GTM Tips

One of the difficulties of working with Google Tag Manager and the dataLayer structure is that GTM doesn’t preserve history of the items collected into its data model. Or, at least, it doesn’t preserve it in a manner that would let us access it.

This is typically a very niche problem, but it does surface every now and then. For example, say you wanted to query whether an event with some specific value has already been pushed into dataLayer. Well, this is impossible, since any event you use to trigger this check would overwrite this previous event value in the data model (since any given key can only have one value at a time).

While using the Google Tag Manager user interface around Halloween 2018, you might have noticed a new tab in Google Tag Manager’s Preview mode. The tab is named Errors and shows you the number of exceptions thrown by GTM’s tag templates on the page. In this short #GTMTips post, I’ll quickly walk you through what the tab shows.

Tip 90: The Errors Tab In Preview Mode

The tab’s name is an apt description of what the tab shows. If a tag template in GTM fails to fire due to an error, this tab would show details about the tag that failed and the error that caused it.

Google Tag Manager offers us some nice built-in triggers so that we can automatically listen for specific user interactions on the website, reacting to them however we wish, though typically it would be to fire a tag. The tricky thing especially with the click triggers and form submission tracking is that the page has a nasty habit of redirecting you to the link or form target page before letting you see the respective data in Google Tag Manager’s excellent preview mode.

A very recent addition to Google Tag Manager is the Format Value option in all of GTM’s variables. With Format Value, you can modify the output of the variable with a number of pre-defined transformations.

This is extremely handy, because you no longer need to create Custom JavaScript variables whose sole purpose of existence it to change the output of other variables to lowercase, or to change undefined values to fallback strings (e.g. (not set)).

One of the coolest features of Google Analytics and, as a consequence, Google Tag Manager is customTask. It’s a method you can use to add and execute code as the hit to Google Analytics is being generated.

I’ve written A LOT about customTask, and much of the feedback I’ve received has been around the question of how to combine all these different tricks into one customTask script. The problem is, you see, that a tag or hit can only have one customTask script attached to it, so the code within must combine all the different tricks I’ve been writing about over the past months.

Getting cross-domain tracking right in Google Analytics is difficult. Even if you use Google Tag Manager. There are many known issues when cross-domain tracking iframes, for example.

Google Tag Manager implements the cross-domain tracking plugin quite handily via the Universal Analytics tag template, and often the easiest way to track links and form submits is to use the Auto-Link Domains option, as described in this great series of posts on cross-domain tracking by Bounteous.

However, sometimes you want more precision in decorating the URLs. Perhaps you only want to decorate one specific link rather than all links that share the same hostname. Or perhaps you only want to decorate forms when they are submitted by your actual visitors rather than internal users.

One of the more difficult concepts in Google Tag Manager is the data model. In essence, the data model is what Google Tag Manager uses to populate the Data Layer variable. You might be tempted to think that it’s the same thing as the dataLayer array, but it’s not.

The data model is a representation of the keys and values you push into dataLayer. Whenever you push any key into dataLayer, GTM grabs this key and updates the corresponding key in its data model with the new value, or in the case of objects and arrays merges the old and the new value together.

It’s time for a very simple #GTMTips article (I know, I always write that these are simple tips, but then they escalate into complex behemoths). Today, we’ll cover a nifty trick you can use with the Element Visibility trigger in Google Tag Manager. This tip was inspired by a question from Eugen Potlog in the Google Tag Manager Facebook group.

The use case is that you have an Element Visibility trigger firing for a number of elements all sharing the same CSS selector. In the image below, I want the visibility trigger to fire when any <h2> header element becomes visibile on the screen. However, I also want to know which one of all those headers caused the trigger to fire. In other words, I want the position of the header; If it’s the 5th header from the top, I want to get the number 5 to use in my tags. If it’s the first header, I want it to return 1.

Tag sequencing was introdced to Google Tag Manager in late 2015. Its main purpose was to facilitate the sequential firing of tags that have dependencies with each other. Due to the asynchronous nature of third-party libraries like Google Tag Manager, it’s difficult to establish an order of completion with tags that compete for their chance to fire.

Tag sequencing changed this, as it allows you to establish setup and cleanup tags - the former firing before the main tag, and the latter after.

One of the great ways to leverage Google Tag Manager in your web analytics tracking is to make use of all the possible custom events that the browser has to offer. One such event is beforeunload. It’s dispatched in the browser when the user is about to unload the page. This means, typically, that the user is about to leave the page after clicking a link, or they are about to exit the browser by either closing the tab or the entire window.