Event Tracking with Google Tag Manager

One of the most difficult aspects of any analytics implementation is that often the person setting up the analytics has no ongoing access to the back end of the website; this makes adding tracking codes and making changes a potential challenge, as you may need to navigate different teams and site stakeholders in order to get anything done.

Update: While this method is still valid, GTM now supports automatic event tracking. Find out more here.

This article assumes that you already have GTM installed on one of your sites. If you’re wondering how to do this, here’s a short video from Google that shows you how:

The Code

Traditional Google Analytics event tracking and Google Tag Manager import event data in slightly different ways. Analytics events get pushed directly to the tracking code while Tag Manager pulls in event data from something called the data layer. Both methods require the same elements in order to function properly, but they each use a different syntax:

While the event tracking code still uses an onClick event, there are 3 noticeable differences:

  1. Everything is pushed to the data layer (via the dataLayer.push method) instead of to the _gaq tracking object.
  2. A data layer name and a value need to be defined (as opposed to just a value).
  3. The syntax is slightly different; name and value are both defined, separated by a colon.

Use the tag manager code just as you would a regular event tracking code. Use the syntax above, but replace the values with your own; leave the variable names (‘eventCategory’, ‘eventAction’, etc.) as-is.

Here’s an example of how you could code the submit button of a contact form:

Screen Shot 2013-03-11 at 11.42.01 PM

Updating Your Tags

Setting Up the Event Tracking Code

This will be very similar to traditional event tracking, with the only real difference being that we’ll be pushing name/value pairs to the dataLayer instead of values straight to the tracking code. Use the syntax below, and replace ‘category’, ‘action’, etc. with whatever values you would usually use. Note the ‘event’/’eventName’ pair: this is the only entirely new name/value pair. Again, name this whatever you want, but keep it descriptive.

Setting Up Your Macros

Next up, you’re going to want to log into your Tag Manager account and navigate to your website’s main interface. Click the ‘New Macro’ button on the top right portion of the header.

Macros are basically name /value pairs that help transition information from the data layer to your Google Analytics account. We’re going to create a dataLayer variable macro for each variable name in the Tag Manager event tag. Use the same terminology we used above, and ignore the ‘eventName’ for now, we’ll get to that in a sec:

Screen Shot 2013-03-11 at 11.59.46 PM 

Repeat this for each variable (eventCategory, eventAction, etc.). We’ll be using these macros in a later step to convert our dataLayer information into values Google Analytics can use.

Creating the Tag

In order to get the event tracking data into Google Analytics, we’ll need to set up a tag that will fire only when the event is triggered. If you’ve already set up a GA tag using Tag Manager, this will be quite familiar.

From the Overview page, click the ‘New Tag’ button at the top of the screen. You’ll be brought to the tag interface, where you can input the tag name and choose which type of tag you’d like from the dropdown. For this article we’re going to set up an event to track contact form submissions, so I’ve named the tag accordingly and chosen ‘Google Analytics’ for the tag type. Enter your GA property ID and choose ‘Event’ in the track type dropdown box.

Screen Shot 2013-03-23 at 2.34.04 PM

Adding the corresponding macros to the event tracking macros is all you need to do to ensure that all the appropriate data eventually gets passed to your Analytics account (see above). Please note that you don’t need to include the optional macros if you a) don’t have values for them, or b) don’t care. You won’t need to use any actual values in these parameter boxes, just the macros.

With our tag set up, there’s just one more step before our event tracking setup is complete: we need to set up a rule. GTM rules dictate when a tag fires. The usual Google Analytics tracking code will have a rule to fire on all pages. A rule for event tracking codes needs to be fired whenever your event name is sent to the data layer. If you’ve completed all of the previous steps, the rule will look like this (replace the event name with whatever you used in the above steps):

Screen Shot 2013-03-31 at 8.48.24 PM

Click save, and that’s it! You’ve set up your first event in Google Tag Manager. Publish your new tag container and it will begin tracking immediately. As always, check your analytics in a day or two to make sure everything’s tracking OK.

Comments

  1. Benoit says

    Thanks for your article.

    I was curious… Why not just trigger a “contactSubmit” dataLayer event and fill in the fields without a macro in GTM?

    Lately, I’ve been playing a little bit with GTM,
    and I’m just wondering what are the benefits of using macros in this scenario ?

    • Josh says

      Hi Benoit,

      I had tried that approach when GTM first came out, with pretty limited success. I’m running the Google Analytics on Steroids plugin, and the GTM event tracking has played nice with it so far.

      I recommended using macros because it sped up the process a bit, no special reason beyond that.

  2. Mr3h says

    In my opinion we don’t need to add fire rule, because this event only happen when customer click on link. i tested . with my website

  3. Mila says

    Thank you for the article. Is there a way to implement event tracking in GTM without making code change in line on the websites. I.E., currently, if using datalayer, need to invoke the push function onClick event if you are trying to track a certain button click on the page for example ( onClick=”dataLayer.push({‘eventCategory’ : ‘category’, ‘eventAction’ : ‘action’, ‘eventLabel’: ‘optional_label’, ‘eventValue’ : ‘optional_value’, ‘event’ : ‘eventName’});” ). Instead of calling the datalayer.push function inline, is there a way to incorporate event racking through GTM only.

    • Josh says

      Hi Mila,
      You’re going to have a hard time triggering and customizing events without changing the source code. One option I would probably recommend for you would be Google Analytics on Steroids, which is basically an upgraded version of the traditional GA tracking code. It will track all outbound links, form submissions and amount of page scroll as events automatically. I use it on most client sites as it can generally handle less complex event tracking setups right out of the box. You’ll still be able to set up custom events as described in the post, if you end up needing them.
      If you go to the GA on Steroids site you can copy and paste the code they have listed into GTM using the ‘Custom HTML tag’ option, just make sure you add your domain and UA ID before you publish the container.

      • Mila says

        Hi Josh,

        Thank you for replying. What do you think about using js code to iterate through html elements and pushing to datalayer events associated with ‘a’ tag. This way the js code can be inserted via GTM and one wouldn’t need to update every link on the page (hence no IT work), especially if there are many links on the websites (can account for external links to other sites, outbound to other pages same domain and doc downloads ):
        something like this :

        if (document.getElementsByTagName) {
        var ahrefs = document.getElementsByTagName(‘a’);
        var currentPage = document.location.pathname;
        var outPage= this.href.substring(7);
        for (var i = 0; i < ahrefs.length; i++) {
        var sitename = document.domain;

        if (ahrefs[i].href.indexOf(sitename) == -1 && !ahrefs[i].onclick) {
        ahrefs[i].onclick = function () {
        dataLayer.push({'event':'GAevent', 'eventCategory':'External Link', 'eventAction':currentPage, 'eventLabel':outPage }) ;

        }
        }

        ….

        • Josh says

          Hey Mila,

          Google tag manager now supports auto-tagging events straight from the console. I’d probably try that approach first before wrestling with any custom JavaScript.

  4. my company says

    It’s amazing to pay a visit this site and reading
    the views of all colleagues on the topic of this paragraph,
    while I am also eager of getting familiarity.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">