Google Analytics, Google Tag Manager and Angular

Google Analytics, Google Tag Manager and Angular are a great set of tools for building a modern, powerful, single-page web app.  Google Analytics allows you to track your users to see how they are interacting with your site.  Google Tag Manager allows you to update your tracking metrics without a code release.  Angular allows you to build rich, single-page web sites.  However, despite the fact that all were created by Google, it’s not very straightforward to get these tools working together.

To start off, you’ll probably want to use an Analytics library that’s built for Angular.  Since Angular allows you to build single-page apps, Google Analytics will only record the initial page load of your Angular app.  An Analytics library will allow you to easily capture each change in the view, as if the user had navigated to a new page.  It should also allow you to capture predefined events including button clicks and elements that have scrolled into view.

For a recent project, I chose to use the Analytics library, Angulartics, because it offered all of these features and the ability to link to other Analytics services such as Piwik and Kissmetrics.  Angulartics is still under active development with new releases and bug fixes regularly.

Installation

To use Angulartics, download the minified code from Github or Bower to your server and include the script tag on your HTML page.  For each Analytics system that you want to integrate with, you’ll want to also install the script for that system.  Since this example uses Google Tag Manager, we’ll also include a script tag for angulartics-gtm.min.js.

Additionally, you’ll want to include the normal script tags for your Analytics package.  Since Angulartics will be handling all of the page view tracking, delete any code from the script tag related to tracking a page view.

For Google Tag Manager (GTM) and Google Analytics (GA), you only need to include the GTM code which looks something like this:

<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-XXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&amp;l='+l:'';j.async=true;j.src=
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXX');</script>

(this blog post assumes you already have accounts for GTM and GA.  If you don’t, you’ll want to sign up for those first.)

OK, so now all of the libraries and tools have been installed on the HTML page.  Now it’s time to set them up.

Setting up Angular

The simplest use of Angulartics is to track page views each time the route changes in your single-page app.  This is easily accomplished by declaring it as one of the dependencies of your Angular app:

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

At this point, your app will begin sending a page view to Google Tag Manager each time the route changes in your single page app. However, GTM is not set up to receive these page views or to forward them on to Google Analytics.

Review the Angulartics documentation, if you’d like to learn how to manually send page views, or for instructions on event and scroll tracking.

Note: Google Tag Manager uses cookies to track user info and cookies will only work if you’re web app is being served up from the correct domain. This means tracking will not work if you are serving your web app from localhost or 127.0.0.1. If you are serving your site locally, you’ll need to add a fake host to the hosts file on your computer so that when you visit a URL like dev.example.com, your computer knows to serve up the files from your computer. Directions on creating a hosts file can be found elsewhere.

Setting up Google Tag Manager

When I was originally working on my project, directions on how to set up Google Tag Manager to work with Angulartics were difficult to find. Angulartics has directions in the README on Github but GTM had changed significantly since those directions were written. Fortunately, I was able to find the corrected directions in Angulartics’ pull requests and those directions have now been promoted to the live README.

Directions for GTM may now be found here. During set up, you’ll create 6 Variables, 2 Triggers and 2 Tags in Google Tag Manager. In short, Variables describe what data is being captured, Triggers specify the event and Tags describe how all of those fit together. You’re basically creating a custom version of the Google Analytics track page view and track event, so if you know the interfaces of those functions, you’ll recognize the terms in these custom tags. In order to send your data to the correct Google Analytics account, you’ll need your account number when you create the Tags.

In this picture you can see the Pageview tag that I created for my project:

Tag details for the Angulartics Pageviews tag in Google Tag Manager

Congratulations! At this point, your app should be successfully using Angulartics to send page views and events to Google Tag Manager which will forward them on to Google Analytics. If you’re not seeing anything in Google Analytics, there are a few things to checkout:

1. Are you serving the app from localhost or 127.0.0.1 or another domain that doesn’t match the domain you registered with Google Tag Manager? If so, see the note earlier in this post about adding a fake domain to your hosts file.
2. Did you wait a day? Google Analytics can take up to a day to start registering page views. And remember to change the date filter on the report that you’re viewing.
3. Did you spell everything right? Google Tag Manager is case sensitive and requires that you spell all of the variables, triggers and tags consistently in all instances.
4. Did you publish your Google Tag Manager container? GTM allows you to make changes to your tag container and preview the changes. You must publish the tag container to make it live.
5. Still nothing? Google Tag Manager and Google Analytics each have a Chrome plugin to help you with debugging your page views and events.

Advanced: Custom Variables

Universal Analytics and Google Analytics allow you to send custom variables for tracking things that are of special interest. This is great for apps where you want to record product ids, category ids, etc.

To set up a custom variable, you’ll first need to set up the dimension or metric on the Admin page of Google Analytics (these directions may be slightly different if you’re using an older version of Google Analytics. These instructions worked for me for Universal Analytics). When you do, GA will give you a snippet of code. You won’t be using this (it’s not meant for Angulartics) but you’ll want to record the index that GA assigns to your dimension or metric. In the picture below, the index is the number where you see ‘dimension1’ (in other words, the index is 1). You’ll need the index later.

Creating a custom variable in Google Analytics.

Once you create the variable in Google Analytics, you’ll need to create the variable in Google Tag Manager and then add the variable to the correct tags. In GTM, you’ll give your variable the name that you’ll reference in your Angular app.

Creating a custom variable in Google Tag Manager

When adding the variable to the tag in GTM, you’ll need to reference the index that you saved from Google Analytics. In the image above of my Pageviews tag, you can see the custom variables that I’ve added to this tag and you can see that the index (1) matches up with the index that I took from Google Analytics. In my case, I want to track the Organization Key of the user for both page views and events, so my events tag looks similar.

Finally, in your Angular app, you’ll use Angulartics to set and clear the variable at the appropriate times. If the variable is tied to the page the user is on, you can tie Angulartics into your router so that the variable is set and cleared when the user enters/exits the route. Here’s what that would look like in UI Router:

$stateProvider
  .state('default.org.docs', {
    url: '/org/:orgId/docs',
    templateUrl: '/js/views/docs.html',
    onEnter: function(analytics, $stateParams) {
      analytics.setAnalyticsData('organizationKey', $stateParams.orgId);
    },
    onExit: function(analytics) {
      analytics.setAnalyticsData('organizationKey', null);
    }
  })

Advanced: Personal Information

Google Analytics also allows you the option of associating a user id to the information the GA collects. To do this, you must enable a special setting on the Admin page and agree not to collect any personally identifiable info (e.g., name, address, etc), to create a privacy policy, and to give users the ability to opt out.