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.
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:
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:
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:
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!