Simo Ahava's blog

It’s time for MeasureCamp again! As before, I want to write an accompanying post for my session, since there’s always so much more to say than the time slot allows for. So, the topic of this article is the data model used by Google Tag Manager to process digital data in your data layer.

This post also picks up where I left in my previous foray into the data layer. However, where the first article aimed to be generic (since the data layer should be generic), this post will look at how GTM uses the information in the generic data layer, and how it processes this information to work with the proprietary features of the tool.

It’s time for MeasureCamp again! As before, I want to write an accompanying post for my session, since there’s always so much more to say than the time slot allows for. So, the topic of this article is the data model used by Google Tag Manager to process digital data in your data layer.

This post also picks up where I left in my previous foray into the data layer. However, where the first article aimed to be generic (since the data layer should be generic), this post will look at how GTM uses the information in the generic data layer, and how it processes this information to work with the proprietary features of the tool.

The Page Visibility API for web browsers is pretty sweet. It lets you poll, using some new properties of the document object, whether or not the current page is visible to the user. Visibility is hidden if the page is not open in the current browser tab instance, or if the browser window has been minimized.

In this post, I’ll give an example of how features of the Page Visibility API could be used with Google Tag Manager. Do note, however, that browser support for the API pretty much excludes all IE versions older than 10 from the scope of this article.

This might not sound like a tip to you. You might think, “Dimensions won’t get sent? Sounds like a bug!”. You’re wrong. This is one of the awesome features of the GA API, and it’s key to making your tag setups leaner when sending data to Google Analytics.

Tip 4: Undefined dimensions are left out of GA hits

Note that ‘undefined’ here means the special value undefined in JavaScript. For a refresher, check this post. If you use a macro in a dimension field of Google Tag Manager’s Universal Analytics tags, this dimension will be left out of the hit payload if its return value is undefined.

Writing this article is dangerous. Data Layer is two marketers short of becoming a buzz word. This occasion will be heralded by articles such as “Data Layer Is Dead”, “This Developer Implemented A Data Layer And You’ll Never Guess What Happened Next”, and other examples of the kind of content generation whose propagation should be prevented by military force. This is not one of those articles, I hope, but rather an honest look at what Data Layer is from a number of perspectives.

Rules are the cornerstone of Google Tag Manager. As with any critical element in a system, they are easy to get wrong. This tip is just a refresher on how GTM firing and blocking rules work.

Tip 3: Google Tag Manager rules in a nutshell

So, let’s go through these points one-by-one.

Every tag requires a firing rule to work - this is a given. Without a firing rule, your tag will not be written in the document object, and it will never be executed.

Here’s a simple way to check what was the source of the visitor’s arrival to the current page. It’s done by utilizing the {{referrer}} macro, which comes out-of-the-box in any GTM setup.

Tip 2: Use {{referrer}} to see where the visitor came from

You might want to also explore the Component Types and create new macros for {{referrer path}} and {{referrer host name}} for example:

I wanted to try something new (and, naturally, I’m running out of content ideas), so let me introduce the hashtag #gtmtips. I hope others contribute as well, but I will be adding a new tip as often as possible. I’ve got maybe 20 tips in store right now, and I’m writing new ones all the time. So without further ado, here’s…

Tip 1: Save GATC In A Constant String Macro

This is an easy one, and everyone should already be doing this in one way or another. The point is that you shouldn’t use strings in fields which are often used. Save the string in a macro, so all you have to do is refer to the macro in all your tags. That way, if the string ever changes (for example, when transferring to another property), you don’t have to rewrite the field in all your tags.

(Update 19 November 2018: See this article for a more elegant solution.)

If you know your JavaScript, you know that all variables, functions, objects, resources, and data in the document get rewritten with every page load. In other words, every single page refresh builds the page from scratch, and the state of the document before the page refresh is left drifting in the ocean of oblivion.

Google Tag Manager’s dataLayer is also one such entity. It gets rewritten with every page load, so it’s not possible to have a dataLayer variable persist from one page to the other without using cookies or, as I’m going to show in this guide, the HTML5 Web Storage API. For web analytics, this is a bit of a shame. It forces us to think of things in the scope of a single page, when rarely anything worth mentioning has a lifespan that short.

There’s a much easier, native-to-GTM way to do this now: the Matches CSS Selector.

Behind this tragically boring title is a simple solution to many problems with Google Tag Manager’s auto-event tracking. The common denominator to these problems is poor website markup. Selectors are used sparingly, and element hierarchy is messy. This disregard for proper node relationships means you have to resort to Data Layer Variable Macros which look like

gtm.element.parentElement.parentElement.id

(UPDATE 1 Oct 2014 Due to a change in how macros work in Debug Mode, the {{generic event handler}} macro no longer works when testing in Debug Mode. That means that you’ll have to test your custom listener in a live container (I know, ouch!). If you want to test in Debug Mode, you’ll have to skip using the {{generic event handler}} as a macro, and instead copy the inner function into the Custom HTML Tag, give the function a name, and use that as the callback in addEventListener or attachEvent.