Event Tracking with Google Tag Manager

E

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.

About the author

Josh Kellett

I’m a digital marketer living in Victoria, British Columbia.

15 comments

  • 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 ?

  • 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

  • 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.

    • 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.

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

        }
        }

        ….

        • 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.

  • 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.

    • Hey Nicolas,

      Short answer is yes, this should work just as well on v2, but you can do event tracking even easier now with event listeners. I’d write an update but there’s already a ton great guides out there. Check out this post for some examples. Hope that helps!

    • Hey Nicolas,

      Not sure how I missed this and sorry it’s 6 months late – I’m actually not the owner of GA Checker anymore. I sold it in June but the new owner is pretty responsive and I’m sure would love to update it if it hasn’t been already. I’ll pass on the info. In the meantime I’d highly recommend Screaming Frog as a replacement (it’s 99 GBP/year).

About the Author

Josh Kellett

I’m a digital marketer living in Victoria, British Columbia.

Recent Posts

Categories