Top

Event Tracking with Google Tag Manager

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:

//Traditional Google Analytics Event Tracking
onClick="_gaq.push(['_trackEvent', 'category', 'action', 'optional_label', optional_value, optional_noninteraction']);"

//Google Tag Manager
onClick="dataLayer.push({'eventCategory' : 'category', 'eventAction' : 'action', 'eventLabel': 'optional_label', 'eventValue' : 'optional_value', 'event' : 'eventName'});"

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.

onClick="dataLayer.push({'eventCategory' : 'category', 'eventAction' : 'action', 'eventLabel': 'optional_label', 'eventValue' : 'optional_value', 'event' : 'eventName'});"

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.

Share
15 Comments
  • Benoit
    May 17, 2013 at 3:58 pm

    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 ?

  • Mr3h
    May 22, 2013 at 10:55 am

    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

  • Marcos
    June 20, 2013 at 7:57 pm

    Great job!

    You are very clear in your explanations

  • Mila
    September 9, 2013 at 10:30 pm

    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.

      • Mila
        September 12, 2013 at 2:30 pm

        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 }) ;

        }
        }

        ….

  • my company
    February 14, 2014 at 5:38 pm

    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.

  • Prashant
    November 11, 2014 at 7:00 am

    Really, good post Josh. Cleared my doubts very well!!

    Cheers!!

  • Nicolas Colombres
    July 16, 2015 at 11:28 am

    Hello Josh,

    We notice that this is gof GTM v1. We are starting in GTM v2. Can we apply this in this new version?

    Thanks!

    Nicolas

Post a Comment