Skip to content

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

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.

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

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.

8 Comments

  1. Charlene on August 18, 2015 at 10:30 pm

    Hey ,

    This has been very helpful.Just what I was looking for.I also want to track formsubmit event on a angular website.

    Any idea how?

    • Garrett McCullough on August 19, 2015 at 3:41 pm

      Hi Charlene,

      There are two ways that Angulartics allows you to track an event:
      1. declarative event tracking (code added to your HTML)
      2. API event tracking (code added to your Angular controller)

      In declarative event tracking, you add the code to your HTML on the button or link. The category/event details are added as attributes of the HTML element. Example:

      If you want to use the API event tracking, then you’ll want to add the code to your Angular controller in the function that processes the click on the button/link. Example:
      module.controller(‘MyController’, function($analytics) {
      $scope.submitForm = function() {
      // code to submit the form

      $analytics.eventTrack(‘eventName’, { category: ‘category’, label: ‘label’ });
      }
      });

      There are more examples in the documentation:
      http://luisfarzati.github.io/angulartics/

      Thanks for reading!

      Garrett

  2. Fernando Ortega on February 9, 2016 at 3:02 am

    Hi Garret,

    Cant Events in Google Analytics to be configured in Google Tag Manager? Has to be done in the code?

    Thanks

    • Garrett McCullough on February 11, 2016 at 8:57 pm

      Fernando,

      You are right that typically events in Google Analytics can be configured in Google Tag Manager. But this project was using Angulartics to allow Angular to interface with Google Tag Manager. Due to the extra layer of that library, we had to use code to configure Angulartics and then configure GTM to look for these different events.

      If we just installed Google Tag Manager and used it in the normal way, we would only get one pageview when the app first loaded. Changes to the route within the single page app, would not trigger GTM.

      Thanks for reading!

      • Sridhar Kondoji on November 6, 2016 at 7:13 pm

        I think the GTM now allows to track page views within single page apps.
        Angulartics and google analytics integration makes sense, but integrating with tag manager doesn’t.

        Does, angulartics work inside a hybrid mobile app?

        • Garrett McCullough on November 6, 2016 at 7:28 pm

          Hi Sridhar,

          Thanks for reading.

          I just took a quick look at the GTM page and I don’t see anything about them having built-in support for single page apps, but it could be available now.

          The nice thing with Angulartics is that it supports so many integrations in addition to GTM. Other integrations include Piwik, Adobe Omniture, Kissmetrics and now, Google Analytics for Cordova.

          So yes, it does appear that Angulartics will work within a hybrid mobile app. It looks like some people are even working on an Angulartics integration for NativeScript.

          Thanks for reading!
          Garrett

  3. Charlotte on August 31, 2017 at 6:28 am

    Garrett – this has been a hugely helpful piece. I’m our analytics “person” and trying to translate what I do on the GTM side to our developers was tricky. We are still struggling with getting userid to track (at all) – we used angulartics and i set up the custom dimension for userId like I’ve done in the past, but no results. Do you have any advice for getting it to synch through to GA – OR – how to check my own code etc to make sure it was configured correctly? Thank you!

    • Garrett McCullough on September 21, 2017 at 8:49 pm

      Hi Charlotte, sorry I missed your comment.

      I don’t really have any good advice for you, I’m afraid. There are some Chrome plugins that may help. I know GTM has a plugin that can help you watch your variables and calls to make sure they’re getting sent correctly, which should help diagnose any client-side issues.

      I hope that helps!

      Garrett

Leave a Comment