Introduction

I had lots of issues getting setup with Universal Analytics (UA) with a one page app I've had to work on very recently. This tutorial will not explain very much because I believe the issue with UA is not that it's hard, but rather that there's a lack of information out there. This will help you get started on tracking pageviews for your one page application.

Prerequisites:

  • A Google Tag Manager Universal Analytics (UA) account
  • A Google Analytics account or other analytics platform (but this tutorial won't cover those)

1. Create a Data Layer

A data layer stores information from our code and passes that on to UA automatically.

All you need to do is declare a dataLayer array. Optionally it can have default values for your variables.

<!-- Google Tag Manager Data -->
  <script type="text/javascript">
    var dataLayer = [{'variableName' : 'variableOptionalValue'}];
  </script>
  <!-- Google Tag Manager Code -->
  ...
  <!-- End Google Tag Manager Code -->

Next, add an event listener (such as onClick) to your HTML so you know when the user interacts with something.

<a onClick="uaClick">

And finally, add the data to the dataLayer so UA can keep track of it.

$scope.uaClick = function(pageName) {
  	dataLayer.push({'pageName': 'index'});
  };

Notes:

  • Make sure the dataLayer instantiation comes before the Google Tag Manager Code
  • Use dataLayer.push({'variableName' : 'variableData'});

2. Creating a Variable

  1. Go to the Variables tab on the left menu.
  2. Create a new User-Defined Variable.
  3. Set Variable Name to anything, set Data Layer Variable Name to your variableName.
  4. Data Layer Version to Version 2 and optional default value.

3. Creating a Trigger

  1. Go to the Triggers tab.
  2. Create a new Trigger.
  3. The event we are probably listening for is a Click event, but this is where things may become ambiguous.
  4. I wanted all the click events from the variableName to be registered so I did:
variableNamematches RegEx\w*

This matches any word or letter and number combination.

5. The rest of the options should be self explanatory.

4. Creating a Tag

Now we are bringing together the components we have created from the other parts. Note that for testing on localhost, you need to set

  1. Go to the Tags tab.
  2. Create a new Tag.
  3. Set tracking ID to your Google Analytics tracking ID.
  4. Set Track Type to Page View.
  5. Under Basic Configuration, set Document Path to {{Page URL}}/{{Variable Name}} to create the page URL.
  6. Set Document Title to {{Variable Name}} to set the page
  7. If you are testing on localhost, go to Advanced Configuration and set Use Debug Version to True.

If you have any questions, send me a message [here](http://rileedesign.com).

Resources:

  1. http://cutroni.com/blog/2012/10/01/all-about-google-tag-manager/
  2. https://developers.google.com/analytics/devguides/collection/upgrade/reference/gtm
  3. https://support.google.com/tagmanager/answer/6106716
  4. http://moz.com/ugc/tracking-google-analytics-events-with-google-tag-manager
  5. https://developers.google.com/tag-manager/devguide
  6. http://www.razorsocial.com/google-tag-manager/

Support Forums:

  1. https://productforums.google.com/forum/?utm_medium=email&utm_source=footer#!forum/tag-manager
  2. http://stackoverflow.com/questions/tagged/universal-analytics