Installing Google Analytics in an Angular App, written for the Marketer.

This article will show you how to set-up GA in an Angular App, including Event tracking.

It’s written for a marketer and is assuming they know very little about Angular/Development, but a Dev can skim over it and use it as a guide.

So you've picked up a client and they’re using Angular. Great.

What you need to know about Angular.

• It’s written in Javascript.
• It follows a MVC pattern, like most other Front-End Frameworks (React + Flux / Ember / Backbone)
• You can easily import modules from external sources.
• It’s usually used for single page apps, therefore uses a thing called ‘Routing’ to dictate page paths.

If you still want to know more, this is a good overview.

First things first, talk to your client’s Dev and find out what their Development URL is. This is usually something like devlab.clientsdomain.com / *.clientsdomain.com . This is what you’re going to be working on. We’ll be using this as you’ll always want to be in an environment where you’re allowed to f**k up, which is fine.

Version Control. Remember that it’s not as simple as just dropping some code in. It’s likely the dev will have to push the code to Github or something similar, after EVERY different iteration. Therefore a good approach to take could be testing something out on one Element you wish to track, first, then implementing others that are very similar to the tested element.

Getting Started.

First things first, we need to install Google Analytics so that it can send page views. We’re going to be using the main Google Analytics library for Angular, called Angularitcs-Google-Analaytics.

However before that, we have to install the main dependency of the aforementioned, Angularitics.

angulartics/angulartics

Then we can install the extension library, specific to Google Analytics:

angulartics/angulartics-google-analytics

Once they’re installed and required, we’re almost good to go, we just need to tell the App our UA-ID and drop in the tracking Code.

<script>
//Rest of the tracking code GA gives you
ga('create', 'UA-XXXXXXXX-X', 'none'); // 'none' while you are working on localhost
ga('send', 'pageview');  // DELETE DELETE DELETE
</script>    

Make sure to delete the pageview send, as we won’t be needing it. Angularitics already handles the pageview hit for you, ergo, you should leave it out.

That’s the initial set-up complete, jump into your Dev site once it’s deployed and turn GA Debugger on.

Looking good?

If not, the problem may be:

The dev required Angularitics into the module and not angularitics-google-angularitics:

angular.module('myApp', ['angulartics', 'angulartics.google.analytics'])

Or perhaps, you just haven’t refreshed your page.

Troubleshooting and debugging this kind of thing is hard and the onus is mainly put on the dev to figure it out, at this point.

Event tracking

There’s two ways to do this and normally you’ll be using both methods.

Method 1, Hardcoding inline attributes.

What does this entail? Hardcoding is coding something that isn't dynamically generated or pulled. Ie… You write it once and that’s how it stays. ‘Inline’, means you write it in the actual element itself, not in a separate file. An attribute is simply a part of an element, think ‘class’ and ‘id’.

The use case for this is when you know an element won’t change. Such as a social button or a contact form. It’s predictable.

From here it’s fairly straight forward, we have 3 inline attributes to play with:

analytics-event="yourAction"
analytics-category="yourCategory"
analytics-label="yourLabel"

Important note, analytics-event is your action.

There’s one more attribute that needs to be added no matter what and that’s

analytics-on

So, your element would look something like this ~

It’s static and hardcoded in. Once deployed, head on over to ‘Real Time’ in GA, then click on the element you assigned the event tracking to on your website.

See the event pop up?

If you’re having any issues, go ahead and check out your debugger, you should see something akin to this:

If this doesn’t show up at all but your pageView tracking is working, then it’s an issue with the inline code. Go ahead and inspect the element, making sure that it’s there with no errors.

Event tracking for Dynamic Elements

Now this may seem daunting for a non-dev, but this is actually the easiest for the marketer to implement.

The use case for this is when you have, for example, multiple products that are pulled from different sources. Each product’s code will be different. Therefore we can’t use inline styles, as we know that it simply won’t work.

So we have to use the Angularatics API, appending our attributes inside of a controller. The controller being where the logic goes in Angular.

module.controller('MyCtrl', function ($analytics) {
$analytics.eventTrack('action', {  category: 'category', label: 'label' });

Your Dev will know where to put it, all you have to do is make a note of all the different values and test it!