Google Tag Manager and Universal Analytics

Thanks to @vfportero, we recently implemented Google Tag Manager (GTM) on nemestats.com. Our main use case for using GTM is to push events to Universal Analytics without having to write custom code on each page. Given that we have different Universal Analytics web properties per environment — one for development and one for production — we needed some way to dynamically set the Universal Analytics Tracking ID based on the environment. The goal of this article is to explain how to do this using a feature of GTM called the “data layer”.

2016-11-26 Edit: I now prefer to just use a custom javaScript variable in GTM which looks at the hostname of the request rather than having to set the Universal Analytics tracking ID on the client side. More details below in the corresponding section.

Key Google Tag Manager Concepts

First off, GTM has a few key concepts that are helpful to understand (see this article here):

  • Tags – Snippets of code that run on a page
  • Triggers – An expression that runs and evaluates to true or false
  • Variables – Are used at runtime as inputs to triggers or as values to use within GTM tags. There are a number of built-in variables that you have at your disposal within GTM (see screenshot below). You can also create your own constant variables or — and this is the cool part — you can set variables in your “data layer” on each page.
Built in GTM variables

Built in GTM variables

Prerequisites

Before we go any further let’s clarify a few things that you need to have set up. First, you need to create a Google Tag Manager account associated with your website. Second, you need to add the appropriate GTM code snippet to each page on your site. Finally, you need to have a Universal Analytics account set up and associated with your site. I’m not going to cover the details of how to set that up in this article.

Using The Data Layer

The data layer is really just a bucket of key/value pairs that make additional variables accessible within GTM. You can add variables to the data layer when the page loads or even dynamically via JavaScript. In our case, we are just going to add a variable called “universalAnalyticsTrackingId” . The value of this variable will be the Universal Analytics Tracking ID corresponding to our current environment. In .NET, we might just have an entry in our .config which we can dump out as we’ve done below. The data layer needs to be the first thing after yourtag on the page:

 <script>;
        dataLayer = [{
            <!-- '@GoogleAnalyticsConfig.GetGoogleAnalyticsTrackingId()' is just
                 a snippet of C# code that will get the tracking ID that we have
                 set in our config. Just write the appropriate code for your
                 language/framework of choice to dump out this value.-->
            'universalAnalyticsTrackingId': '@GoogleAnalyticsConfig.GetGoogleAnalyticsTrackingId()'
        }];
    </script>
<!-- Google tag manager code here-->
<!-- rest of the body-->

To see the full example, just go to any page on nemestats.com and view the page source.

Setting up a Data Layer Variable in GTM

Now that we have a data layer object populated with our Universal Analytics Tracking ID and we have our GTM snippet on the page, we can go into GTM and create a corresponding Data Layer Variable to make this variable available for use throughout GTM. Below is a step-by-step walk through of how to do this (including screenshots):

  1. Click the variables tab in GTM

    Variables tab

    Variables tab

  2. Click “New” to create a new variable
  3. Enter the name of the variable within GTM

    Create new dataLayer variable

    Create new dataLayer variable

  4. Pick the “Data Layer Variable” variable type
  5. Enter the corresponding key from the data layer of your page that this new Data Layer Variable maps to. In our case, this was “universalAnalyticsTrackingId”.

    Enter dataLayer key that this variable maps to

    Enter dataLayer key that this variable maps to

  6. Click “Create Variable”
  7. Observe that the new variable is now available within GTM

    See the new variable!

    See the new variable!

2016-11-26 Edit: The aforementioned approach may make sense for you if you have a large number of analytics properties / hostnames associated with a single deployment of your codebase. However, if you have less than a handful then there is an arguably easier way to configure your universalAnalyticsTrackingId variable to be a custom JavaScript variable like this:

function() {
if(window.location.hostname.split('.')[0] == 'nemestats') {
return 'UA-SOME-CODE-HERE';
}
return 'UA-SOME-OTHER-CODE-HERE';
}

In the above example, I’m just setting the tracking ID to my production id if the hostname is “nemestats”. Otherwise, I’m setting the tracking ID to my testing property (e.g. if the hostname is “localhost”).

Creating a Universal Analytics Event That Uses Our Data Layer Variable

Now that we have a Data Layer Variable for our Universal Analytics Tracking ID we can use it within any tags we create for Universal Analytics events. Below is another step-by-step walkthrough of how to create an event using this variable:

  1. Click the Tags tab

    Tags tab

    Tags tab

  2. Click “New” to create a new tag
  3. Enter your new tag name. This is just so you can easily identify the tag within GTM.

    Enter your tag name

    Enter your tag name

  4. Select the Google Analytics product
  5. Select the Universal Analytics Tag Type and click “Continue”

    Select Tag Type

    Select Tag Type

  6. Click on the battery birthday cake icon thing to pick an existing variable to plug in as the Tracking ID.

    Pick the data layer variable

    Pick the data layer variable

There are a number of Track Types you can select from here including Page View, Event, Social, etc. Since we’ve already demonstrated how to use the Data Layer to feed variables in GTM, we’ll leave the rest up to you for now.

Conclusion

We briefly reviewed some key Google Tag Manager concepts and then demonstrated how to set up a Data Layer and Data Layer Variable for use within GTM. In our example, we dynamically set the Universal Analytics Tracking Id in the HTML (dataLayer object) of each page on our site. We then created a GTM Variable that mapped to this dataLayer value. Last, we showed how to use this Data Layer Variable in GTM to populate the Tracking Id of a Universal Analytics tag.

Once you’ve made it this far you can use the variable throughout GTM and you should hopefully have the knowledge to create new variables that are fed from the dataLayer of your page. This opens up a plethora of possibilities for what you can track and what you can do within GTM.

Advertisements