Last month mStoner hosted our three part webinar series on web analytics. One of the topics that we touched on in each of the three sessions was the use of Google Tag Manager to manage tracking code for Google Analytics. I also blogged about Tag Manager a couple of months ago and its emerging role in helping organizations manage analytics. While Tag Manager can be a great benefit, it doesn’t necessarily add tremendous value in all cases depending on an institution’s needs. I do see an increasing number of websites using Tag Manager to manage their tracking code however.
Given this new tool, I want to take a deeper dive into a couple of challenges you may encounter with the tool from a technical standpoint, particularly when it comes to setting up event tracking.
Setting up event tracking using Tag Manager
Event tracking is a really valuable part of Google Analytics, but it requires extra configuration of tracking code. Typically this is done with some javascript or jQuery code on individual links or buttons to be tracked that records the category, action, and label for the click. Some content management systems (Drupal and WordPress among them) have modules or plugins that can automatically add code to track typical events like downloads, external links, and mailto link clicks. Doing this tracking with Tag Manager requires a different approach.
Tag Manager uses event listeners as a way of “listening” for clicks on the page and enabling you to configure event tracking tags targeting specific click events on specific pages. A great resource for getting started with this, beyond the Google Tag Manager documentation, is this blog post from Justin Cutroni.
Note that Tag Manager is evolving, so if you log into the “new” Tag Manager interface, the terminology and setup of things will be changing slightly in the coming months.
How do I target the right event clicks?
There are a couple of techniques I have found useful in the HTML markup to make it easier to use Tag Manager to isolate the clicks of interest.
Use the ID Attribute
Add an “id” attribute to links or buttons that you may want to track as events. Examples of these might be call to action buttons on your site, or links that operate carousels, tabs, accordions, and other elements on a page that a visitor might click on that don’t generate a pageview, but that you would like to track. It might look something like this:
<a href=”give.html” id=”give-call-to-action” class=”button”>Give Now!</a>
When you go to create a Tag Manager rule that you can use to fire an event tag for a specific click, having an id attribute allows you to use the {{element id}} macro within Tag Manager to capture clicks on the specific link or button with the matching ID. This allows you to target just the link you want within your Tag Manager rule. You can use other things like the URL of the link (for a call to action) or the CSS classes on the link, but sometimes those things don’t uniquely identify the specific link you are wanting to isolate, and the ID attribute can help you do that.
HTML Custom Data Attributes
I also like to use the HTML custom data attribute on links to provide additional context for the link to pass in to Google Tag Manager. This is an optional attribute on your HTML anchor tag that allows you to attach additional data to the link without changing the target, text or styling attributes. This data can then be passed into Google Tag Manager. The syntax looks like this:
<a class=”row-link next” data-slider=”news” href=”#” title=”View More”>View More</a>
Once you set up the attributes in your HTML, you can automatically harvest that data into Google Tag Manager using a Macro of the Data Layer Variable type. You set up the macro to look for a data layer variable that matches your custom data attribute, like this:
gtm.element.dataset.slider
In the above example, Tag Manager then gives the value “news” to the macro, which can then be used in an event tracking tag to log a click on the news slider.
This LunaMetrics blog post is a good overview of how to use custom data attributes in Tag Manager.
Why doesn’t Tag Manager register clicks with my event listener?
Another issue I have run into when implementing Google Tag Manager is trying to add event click listeners to links that have the default action (navigating to the link) overridden by some other code (like advancing a carousel). The issue in many of these cases is a little bit of javascript code developers use when harnessing a click on an event:
return false;
The problem with this is that it can cause the javascript to essentially stop other scripts, like the Google Tag Manager event click listener, from doing their job. The result is that when you publish an event click listener to certain links on a page, Google Tag Manager never gets the clicks on these links, and subsequently you can’t harness those for event tracking.
The solution, outlined in more detail in this blog post by Simo Ahava, is to change the code slightly to prevent the default action of the click event in javascript:
event.preventDefault();
This change is unlikely to impact other functionality of the javascript, but enables Google Tag Manager to pick up event clicks. Unfortunately there are plenty of examples of javascript sliders and code snippets that contain the “return false;” code and can interfere with Tag Manager.
Hopefully these two bits of advice come in handy for folks implementing Google Tag Manager. As the tool gains more acceptance and use in higher ed, I’m always happy to learn (and share!) more ways to make Tag Manager work better.
The post Google Tag Manager: Tips and Tricks appeared first on mStoner, Inc..