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.