If every time you need to track a link / button click or a form submission, push a Google Analytics event or fire a time-based event you need to ask a dev team, either by lack of knowledge or by department limitations, you know how long it can take to do something so small. Learning programming languages takes time and so does cross-department requests.
Now, with Google Tag Manager and it’s new auto-event tracking feature, you can forget about learning the HTML markup, Javascript coding and overdue cross-department requests! Read on and let the GTM therapy make its way.
In this article, I’ll assume you already know how to use the basic features of the Google Tag Manager and have a GTM container with a Google Analytics tag firing at hand. If not, you can read more about how to use and setup the Google Tag Manager on Justin Cutroni’s blog.
GTM Auto-Event Tracking, How Does It Work?
As you might already know, the Google Tag Manager uses its tag, rule and macro magic to do some tracking awesomeness. Well, Google now has a new tag paired with rules and macros that make all of this Auto Event Tracking madness possible.
The Google Tag Manager Auto-Event Tracking feature works out of 3 steps: Listen, Capture, Collect. Here’s what each steps actually do.
The GTM Listens To Events
In order to track events, we need to setup the new listener tag. Simply go where you would to simply add a new tag and select the good tag under the “Event Listener” sub-category. More on which one to use later.
Then, simply add a firing rule so that it fires on all pages, save it and publish you container. Your GTM container will now listen for user actions like form submissions, link clicks, history changes or else. Those will trigger GTM events I’ll cover further down the page.
The GTM Captures Events
Now that our GTM is listening, we need to give it some music to listen to. This is made by creating a new GTM tag, this one being a Google Analytics, or Universal Analytics, event tracking tag. This tag acts like the good ol’ event _gaq.push() but with a code free approach. You will be triggered using special GTM events generated by GTM listener tags that I’ll cover further down the page.
From there you will need to supply the tag with something to process. Here comes the macros!
The GTM Collects Data
GTM Macros. GTM macros rule the data collection portion of the equation. They are the bond between what’s on the page and the GTM, all wrapped in sugar.
With macros, a new world of automatic data grabbing and scraping awaits. You can even now grab data from DOM elements by only knowing their ID. That means that, in most environments, not only would you be able to track link clicks on a page, but also their destination. Not only a click or a form submit, but many of them that could fit in a particular pattern you would’ve chosen with rules or regex magic. Now that’s something that speaks to me!
Learning to speak the GTM event language
When you look at the different Event Listener GTM tags, you will find out, as of today, 6 different sub-types. Here’s what they do and how to use them.
GTM Link Click Listener
The first is GTM’s Link Click Listener. This tag actually listens for clicks made to A tags on a page. Once a click is made on a link, the Google Tag Manager event gtm.linkClick is triggered.
Useful to look for clicks to outbound links or specific link clicks.
GTM Form Submit Listener
The second is GTM’s Form Submit Listener. This tag actually listens for form submissions that might occur on a page. Once a form submission is made, the Google Tag Manager event gtm.formSubmit is triggered.
Pro tip: If you have a form and want to get more data out of it, this tag gets useful to get analytics data based on field values upon form submission.
GTM Click Listener
The third is GTM’s Click Listener. Isn’t there already a Link Click Listener tag? Sure. This tag actually is the first listener Google provided and listens to all forms of clicks that might occur on a page, whether it is an image click, a link click, a button click, or else. Once a click is made, the Google Tag Manager event gtm.click is triggered.
Pro tip: Useful when there’s more than just A tag clicks to track, let’s say clicks on a jQuery accordeon.
GTM Timer Listener
The fourth one is GTM’s Timer Listener. Yes, you read right: a timer. This particular one will trigger an event of your choice every X milliseconds. You can event set a limit of iterations.
Pro tip: One might find this tag useful to track visitors that stay more than X minutes on a page that would otherwise look as page bounce or whatever you might dream of in the same way.
GTM Javascript Error Listener
The fifth one is GTM’s Javascript Error Listener. This one is quite new and pretty interesting. It creates a tag that looks for uncaught javascript exceptions. Once an uncaught javascript exception occurs, the Google Tag Manager event gtm.pageError is triggered.
Pro tip: This tag gets useful for keeping track of user experience directly, or simply in-form errors that a ninja would intentionally throw upon validation errors for you to track.
GTM History Listener
The last one is GTM’s History Listener. This is another new tag that actually helps with new HTML5 features such as browser history push but also with regular navigation actions. That being said, every time a modification will be done to one’s history, a Google Tag Manager event gtm.historyChange is triggered.
Pro tip: To track real bouncing visits, try tracking people that get to your site from Google, land on one of your pages and click the browser’s back button.
Retrieving data out of the New Auto Event Macros
So, now that you know what kind of events GTM lets you listen to, let’s see what kind of data we can retrieve out of the new set of Google Tag Manager macros Google added to suit them.
GTM’s {{element}} macro set
One of the sets of macros you will mostly use with the Auto Events are the {{element}} macros. Those actualy return values from withing HTML tags and are mainly the reason why auto events are so awesome.
The {{element}} and {{element text}} macros
The {{element}} and {{element text}} macros come from the dataLayer’s gtm.element key and will retrieve the contents out of the DOM element that has triggered the click. Take note that for semantic reasons, I would rather use the {{element text}} macro at all times.
Let’s say you have a blue button that says “Subscribe” on it; the value of these 2 macros will return the “Subscribe” text out of the button. Beware of using this on paragraphs of text as it may not be pretty once it gets to Google Analytics!
The {{element url}} macro
The {{element url}} GTM macro comes from the dataLayer’s gtm.elementUrl key and will return to the GTM listener the actual HREF link of the clicked DOM element.
Useful to see where clicks lead to.
The {{element target}} macro
The {{element target}} GTM macro comes from the dataLayer’s gtm.elementTarget key and will get back to the GTM listener the link’s target attribute value of the clicked DOM element.
It usually contains values like “_self”, “_blank”, “_parent” or “_top”.
The {{element id}} macro
The {{element id}} macro comes from the dataLayer’s gtm.elementId key and will retrieve the ID attribute value out of the DOM element that has triggered the click.
This could get interesting to compare clicks on many buttons within a single event listener tag. For example, buttons that get IDs like “top-button” and “banner-button” can be retrieved and pushed through to Google Analytics.
The {{element classes}} macro
The {{element classes}} macro comes from the dataLayer’s gtm.elementClasses key and will retrieve the class attribute value out of the DOM element that has triggered the click.
This macro has almost the same type of benefits as of the {{element ID}} tag. This one will give you more insight as per the visual appearance of the DOM element clicked on.
For example, add to your buttons color classes for A/B testing, let’s say “red” and “blue”. You could then retrieve which one of the two triggered the click.
GTM’s History macro set
Another fine set of macros that take part in the auto-tracking madness is the GTM History Macro set. This one gets many derivatives that will give you insight on the visitor’s browser history. Take note that this is HTML5 related, which is quite new and that you can have more info on this Mozilla’s Browser Documentation page. Now, let’s have a quick look at them.
The {{history change source}} macro
The {{history change source}} macro comes from dataLayer’s gtm.historyChangeSource and will return the method used to modify the visitor’s browser history, whether it is ‘popstate’, ‘pushState’, ‘replaceState’, or ‘polling’.
The {{history new state}} macro
The {{history new state}} macro comes from dataLayer’s gtm.newHistoryState and will return the new history state object if it exists. Take note that what will get returned here is an object, so it cannot be used directly in GTM. To use variables inside this object will need some programming magic before you get them.
The {{history old state}} macro
The {{history old state}} macro comes from dataLayer’s gtm.oldHistoryState and will return the old history state object if it exists. Take note that what will get returned here is an object, so it cannot be used directly in GTM. To use variables inside this object will need some programming magic before you get them.
The {{history new url fragment}} macro
The {{history new url fragment}} macro comes from dataLayer’s gtm.newUrlFragment and will return the new URL fragment or the one you’re currently on. For example, if you were on a page #bio and went to another page #contact, your new URL fragment would be “contact”. Useful to track pageviews on 100% ajax websites!
The {{history old url fragment}} macro
The {{history old url fragment}} macro comes from dataLayer’s gtm.oldUrlFragment and will return the old URL fragment stored in the last history change event. For example, if you were on a page #bio and went to another page #contact, your old URL fragment would be “bio”.
GTM’s Lookup Table, or rendering pretty data out of auto event macros
Now that we have all of this data available through macros, let’s see how to exactly show the labels you want in you Google Analytics reports with the Google Tag Manager’s Lookup Table macro.
The Google Tag Manager’s Lookup Table macro is pretty simple to use but allows many complet things to be done easily. It’s mainly a macro that will change it’s value depending on other macro’s values.
Let’s say, for example, that one would want to get a macro that returns the right Google Universal Analytics UA ID based on domains. He would simply put up a GTM Lookup Table he could name “UA Tracking ID” that would sport domains needing a different UA code.
From there, he just needs to add the {{UA Tracking ID}} macro to all of his page view tracking tags and the macro will automagically update its UA Tracking ID value depending on visitor’s current URL.
To learn more on GTM’s Lookup Table macro, take a look at this post from Simo Ahava’s blog.
Getting down and dirty with GTM’s Auto-Event Tracking
So, it’s all good, we know what we need. Now, how do we actually do things with all of this fresh data? Here’s some applications worth looking at.
Tracking clicks to outbound links using the GTM
Ok, first assignment is here: Tracking all outgoing link clicks by simply using the GTM. Here’s the few steps to manage just that.
First, we need a Link Click Listener on our website that will listen on every webpage for link clicks.
Once this is done, we will create an event tracking tag to send our data to Universal Analytics every time an outbound link is clicked. We’ll go with “Outbound Link” as a category, “Click” as an action and the {{element url}} macro as the label.
Finally, we will fire our event tracking tag using a custom firing rule I will name for this example “Outbound Link Click”. This rule will fire only when {{event}} equals gtm.linkClick and that {{element url}} doesn’t contain {{url hostname}}, which is the hostname the GTM tag will get fired.
Now that we have all this setup, go ahead with the publishing and enjoy!
For more info on everything discussed here and more applications of the GTM, make sure to check out Justin Cutroni’s blog.
Final Thoughts
Well… that was one long post but I hope it will help you out with some of the advanced features of Google’s Tag Manager.
If you have any questions or suggestions, don’t mind leaving a comment below and I’ll make sure to follow up as quick as possible! And if you liked this post, I don’t mind you share it on your social media profiles!
Until then, I wish you all the best and a lot of GTM Auto-Tracking greatness!
Latest posts by Pier-Yves C Valade
- GTM Auto-Event Tracking: Forget The Dev Team - 20 November 2014
- Why I Love SEO (And You Should, Too!) - 21 August 2014
- PPC campaign optimization: 4 simple fixes to maximize ROI - 4 June 2014
- e-Commerce: Choosing The Right Platform - 24 April 2014
- A Guide To E-Commerce Conversion Tracking Using Google Tag Manager - 27 January 2014
