Veyo Technology: Incorporating Segment in an Angular App

December 27, 2017

Using Angular Environments to Configure Multiple Segment Sources

We say we love technology, and we mean it! Our tech team is obsessed with anything techy. Artificial intelligence, virtual reality, autonomous vehicles, the latest apps (and phones)…if it’s cool and new, you can bet they know all about it. And while they’re working on new and better ways to improve patient transportation, they’re also documenting new and improved ways to streamline everyday processes. In a new series we’re launching, we’re asking our tech team to share some of their new discoveries and processes, in hopes that we can inspire some tech breakthroughs outside of Veyo. These posts are pretty tech heavy, but we’ll try to give you a quick overview in non-tech language before we dive in.

For this post (brought to you by AJ Zane, one of our Front End Engineers) we’ll be discussing how to track how users interact with your app using a tool called Segment. Why track user interactions?  Tracking means data, and data means better decisions and a better user experience. Why guess which layout your users like better if you can test which layout users like better.

——-

In an ideal web project, every feature should be developed because you have proof that it will make your app better for the user. At Veyo, as soon as a new feature launches, we start gathering data on it so we can make educated and objective decisions about how to adapt it.

In this article, I’m going to show you how we added event tracking into our Angular GUIs so you can start tracking how users interact with your app and begin making objective decisions about what to build next.

Segment

If you haven’t had the pleasure of working with Segment, you can think of it as an analytics piping tool. It doesn’t have visualization tools, querying features, and it only stores your data for a limited time. All so that Segment pushes you to use its service as little as possible – great business model, huh?

Seriously, though, Segment takes the stream of your data and pipes it to other services. For example, if today you’re using Google Analytics, you can switch to MixPanel tomorrow by simply changing where Segment will pipe your data. You won’t have to update any code to work with the new API. This means you can easily pivot to changing business needs without having to wait on engineers. In fact anyone who can use the Segment dashboard can change their services without bugging an engineer at all.

Getting started with Segment is a cinche: It’s all point and click. Once you go through the setup process, you’ll get your analytics key. Keep this for later.

Add Angulartics (simple)

Angulartics is very similar to Segment in that it’s the kind of tool that tries to say out of the way as much as possible. Just like Segment, it has a single API that you configure to choose which service to send the data to. If your business needs change, with a few lines of configuration code you can start passing your data to a completely different analytics tool.

Add the angulartics package through NPM:

[pastacode lang=”bash” manual=”npm%20i%20–save%20angulartics2″ message=”” highlight=”” provider=”manual”/]

Import it into your app (app.module.ts):

[pastacode lang=”javascript” manual=”import%20%7B%0A%20%20Angulartics2Module%2C%0A%20%20Angulartics2Segment%2C%0A%7D%20from%20’angulartics2’%0A%0A%40NgModule(%7B%0A%20%20imports%3A%20%5B%0A%20%20%20Angulartics2Module.forRoot(%5B%20Angulartics2Segment%20%5D)%2C%0A%20%20%5D%0A%7D)” message=”” highlight=”” provider=”manual”/]

Include the snippet in index.html

NOTE: This snippet may be out of date. Make sure you copy the code from your Segment account when you set it up

[pastacode lang=”markup” manual=”%3Cscript%20type%3D%22text%2Fjavascript%22%3E%0A%20%20!function()%7Bvar%20analytics%3Dwindow.analytics%3Dwindow.analytics%7C%7C%5B%5D%3Bif(!analytics.initialize)if(analytics.invoked)window.console%26%26console.error%26%26console.error(%22Segment%20snippet%20included%20twice.%22)%3Belse%7Banalytics.invoked%3D!0%3Banalytics.methods%3D%5B%22trackSubmit%22%2C%22trackClick%22%2C%22trackLink%22%2C%22trackForm%22%2C%22pageview%22%2C%22identify%22%2C%22reset%22%2C%22group%22%2C%22track%22%2C%22ready%22%2C%22alias%22%2C%22debug%22%2C%22page%22%2C%22once%22%2C%22off%22%2C%22on%22%5D%3Banalytics.factory%3Dfunction(t)%7Breturn%20function()%7Bvar%20e%3DArray.prototype.slice.call(arguments)%3Be.unshift(t)%3Banalytics.push(e)%3Breturn%20analytics%7D%7D%3Bfor(var%20t%3D0%3Bt%3Canalytics.methods.length%3Bt%2B%2B)%7Bvar%20e%3Danalytics.methods%5Bt%5D%3Banalytics%5Be%5D%3Danalytics.factory(e)%7Danalytics.load%3Dfunction(t)%7Bvar%20e%3Ddocument.createElement(%22script%22)%3Be.type%3D%22text%2Fjavascript%22%3Be.async%3D!0%3Be.src%3D(%22https%3A%22%3D%3D%3Ddocument.location.protocol%3F%22https%3A%2F%2F%22%3A%22http%3A%2F%2F%22)%2B%22cdn.segment.com%2Fanalytics.js%2Fv1%2F%22%2Bt%2B%22%2Fanalytics.min.js%22%3Bvar%20n%3Ddocument.getElementsByTagName(%22script%22)%5B0%5D%3Bn.parentNode.insertBefore(e%2Cn)%7D%3Banalytics.SNIPPET_VERSION%3D%224.0.0%22%3B%0A%20%20analytics.load(%22…your%20analytics%20key%20goes%20here…%22)%3B%0A%20%20analytics.page()%3B%0A%20%20%7D%7D()%3B%0A%3C%2Fscript%3E” message=”” highlight=”3″ provider=”manual”/]

(NOTE: The `analytics.load()` method takes in your Segment Source’s key)

Use it in your code:

[pastacode lang=”javascript” manual=”import%20%7B%20Angulartics2Segment%20%7D%20from%20’angulartics2’%0A%0A%40Injectable()%0Aexport%20class%20MyService%20%7B%0A%20constructor(protected%20analytics%3A%20Angulartics2Segment)%20%7B%20%7D%0A%20someMethod()%20%7B%0A%20%20%20this.analytics.eventTrack(%E2%80%98action%E2%80%99%2C%20%7B%20customProps%3A%20%E2%80%98value%E2%80%99%2C%20metaProps%3A%20%E2%80%98value%E2%80%99%20%7D)%0A%20%7D%0A%7D” message=”” highlight=”” provider=”manual”/]

Now, this works but has a few big issues:

  1. The entire app now knows about analytics – which might not be required
    1. I like keeping my feature modules self contained so I can drop them into other projects if needed. If the analytics method is defined at the App level, my feature module will be able to use it in this project, but break in another project that doesn’t use Angulartics
  2. The snippet in the index file would be easier to maintain in a separate script, instead of part of index.html.
    1. Separating concerns is good, so we should do that
  3. Load angulartics in main.ts instead of index.html
    1. You should only track analytic events in production. AngularCli’s environment configuration lets us easily set the analytics key so that it’s only applied in certain environments (I’ll write about this in another article)
    2. If there is no key, Segment will fail non-fatally and your app will keep working
  4. Register unique users with `identify()`
    1. This is very important if you want to make sure you don’t hit Segment’s Monthly Tracked User limit. If you forget to identify the user, every page visit will count as a new user
  5. Consider creating a personalized analytics service
    1. Your app probably has some very repetitive actions you will want to track like Button Clicks. It’s much easier to make a class (say, `buttonClickEvent`) that only takes in which button was clicked. This way, you will write less code each time you use the button click event, and you’ll be able to refactor the event in one location, instead of across the entire app. You can also append other data to your analytics, for example a User Type. The service can manage this variable, instead of requiring all of your components tracking and sending this data.
    2. You can feel comfortable in calling its APIs even if the method of sending analytics events changes. Just like Segment is great because you can plug in other tools, you app shouldn’t care that it’s using Angulartics and Segment – it just needs to pass data.

Add Angulartics (Advanced)

I’ve setup a sample project that covers some of the extra use cases in the previous section. I invite you to take a look at the commits to see how I modified the application to be more configurable.

Dependency on the router

Currently, Angulartics has a requirement on the Angular router. If your app is not using the router, you will have a non-fatal console error. Hopefully this will get resolved soon (Pull Request, anyone??)

You can follow the progress of this issue, and find some workarounds in these links:

Conclusion

I hope this article will help you start adding analytics to your apps today. Now that your app is sending data to Segment, you can pipe it to other services such as Google Analytics to start analyzing your data. Stay tuned for my next article, where I’ll dive into creating that connection.

– AJ Zane, Front End Engineer at Veyo

Part 2: Using Angular Environments to Configure Multiple Segment Sources

Part 3: Connecting Segment to Google Analytics

Want to Join Our Tech Team?

Find our open positions here.