Google Tag Manager – auto event tracking

22
Jan
2014
Posted by: Raymond Chau  /   Category: tagging / tracking   /   4 Comments

A year ago I’ve written an article on how to use Google Tag Manager (GTM) to implement event tracking. Remember at that time GTM is just released for a couple of months, not much features or even type of tags are supported. After a year, GTM has  gone through lots of updates, and one of the key feature – auto event tracking, makes my previous GTM posts outdated. In this post let’s revisit how the new GTM handles event tracking.

The Old Days

When I first used GTM to do event tracking, I need to add JavaScript on the page when that event occurs. That means I need to add an event listener on the code like this to trigger GTM to fire the tag for me:

$('#button').click(function() {
dataLayer.push('event':'click button','category':'video','action':'play'});
});

It isn’t all that fancy, as one of the goal of using tag manager is to eliminate the need to change  source code whenever we need to add tags right? So how does the current GTM tackle that?

Today’s Solution – Auto Event Tracking

The name itself says it all – instead of tracking event manually using JavaScript, the latest GTM allows you to configure event tracking within the GTM interface. Let’s grab our 3 GTM old friends and see how we can do this without changing code – tags, macros and rules. Haven’t been making friends with them? See my previous post on GTM concept and get familiar with them.

batman meme

Tags

The latest GTM adds a new type of tag called ‘event listener‘. They’re just replacements for the need to put the JavaScript event binding code we use in the past. For example, a click event listener will respond to any clicks (buttons, links, etc) happened on the page; and a form submit event listener will respond to any form submission.

Whenever an event occurred and matched the listener tag, the tag will automatically set the {{event}} macro accordingly. For example, when a click event occurs and click event listener tag is installed, the click event listener will set {{event}} macro to gtm.click, so that we don’t have to manually set {{event}} using dataLayer.push.

Here’s the list of event listeners and their corresponding {{event}} macro value when matching event occurs:

Event listener {{event}} macro value
Click gtm.click
Form Submit gtm.formSubmit
Link Click gtm.linkClick
Timer -

Creating event listener tag is simple, you just have to create a tag and select event listener plus the type from the menu:

select GTM event listener

For sure you will then create the actual tag that you want to fire when an event occurs. Will not go into details here.

Macros

Apart from the new event listener tag, GTM also introduce a new type of macro called ‘auto event variable‘. When event listener is installed and when event occurs, not only {{event}} is set, GTM will also set a variable called gtm.element which contains information on the DOM element that triggers the event. For example if that’s a link click event, the gtm.element will be referencing to the link itself.

This is very useful because when we want to fire a tag, by just knowing whether a link or button is clicked is not enough, we will also want to know WHICH link or button triggers that. By default GTM supports several auto event variable such element ID and CSS classes so that you can ‘catch’ the event triggering element.

Here is the list of auto event variable available:

Auto event variable Description
Element Represents the DOM element that triggers the event
Element ID ID of the DOM element that triggers the event
Element Classes CSS classes of the DOM element that triggers the event
Element Target The target attribute of the DOM element that triggers the event
Element URL The ‘href’ or ‘action’ value of the DOM element (a link or a form) that triggers the event

You will have to declare macros by yourself to reference these auto event variable. For example, I’ve created an ‘element id’ macro using auto event variable:

GTM auto event variable element id

Rules

Finally to link up the event and the tag, we have to define rules to fire the right tag when the event defined occurs. For example, I want to fire a tag whenever a button with class ‘nopin’ is clicked, this is how I can set up a rule in GTM:

GTM auto event tracking rule

In general we will define {{event}} equals to any of the event listener (see the table above under tags), plus a condition that filters the element which triggers the event (e.g. element id, element classes). Again, once you’ve defined this rule you can attach as many tag to this event as possible. For example, whenever the above ‘Follow me event’ occurs I will fire tags to both Google Analytics and Mixpanel account.

Summary

With the latest update on GTM now we can fully enjoy the ease of adding event tracking to our web site. Finally I would recommend you to take a look at this article on auto event tracking, the author has given very detailed examples on setting up the various types of listener tag, especially one that I didn’t go into details in my post – the timer event listener. Have a good time with your GTM implementation!

Author Avatar

About the Author

Raymond is a business analyst and web development specialist and with 10 years digital agency experience. He provides end to end technical solutions including requirement gathering, web development, content management, web analytics and software training.

4 Comments

  1. palvinder singh January 26, 2014 at 8:38 pm  /  Comment Reply

    I was searching for the same for a client’s website. Google Analytics is becoming more confusing, I love the Real Time Visitors feature though.