Google Tag Manager Auto Event Variable Macros

I have been playing with Google Tag Manager auto event variables a lot lately and haven’t seen a resource describing all the different Auto-Event Variable macro options. I wanted to write a quick post on what they all mean.

If you want a longer explanation of what auto event variables are, here is the official GA blog post about it, Justin Cutroni’s post is great, Simo Ahava’s post is great if you want to get more technical.

So let’s get right to it.

Basically, if you’re trying to capture some kind of dynamic data when an auto-event is triggered (for example, the URL of a link when the link is clicked), you’ll need to create a macro to capture that data. The screenshot below shows that process, down to the part where you pick the variable type.

Whenever I’m picking the variable type, I get confused and have to re-learn what each of those mean. So let’s try to make this easy.

 

The 11 options we have available (as of 6/26/14 at least) for auto event variable macros are:

1. Element
2. Element Classes
3. Element ID
4. Element Target
5. Element Text
6. Element URL
7. History New URL Fragment
8. History Old URL Fragment
9. History New State
10. History Old State
11. History Change Source

What the heck do all of these mean? The GTM interface gives quick explanations for each one, but they’re not very helpful. I’m here to help you figure this part out. First, let’s look at the source. What does GTM say?

Deciphering the GTM descriptions

Luckily, the description for all 11 variable types follow this exact format:

“The value is determined by reading the (X) from the data layer. If populated by an Auto-Event, the result will be the (Y).”

The X and Y parts are the only places where the descriptions differ for each type. The X tells you the name of the variable it reads from the dataLayer (which is not that helpful unless you’re getting super technical), and the Y tells you what that piece of data looks like in real life (as in, what part of the HTML is it pulling, which is the helpful part).

So, to make this simple, here’s a quick table of each variable type and the X and Y associated with each. Basically, if you’re looking for the helpful part from GTM, you just want to look at the Y part associated with each (click for bigger picture).

(Here’s the full list if you want to copy and paste anything.)

#	Variable Type	X	Y
1	Element	gtm.element key	DOM element that triggered the event
2	Element Classes	‘gtm.elementClasses’ key	‘class’ attribute of the DOM element that triggered the event.
3	Element ID	‘gtm.elementId’ key	‘id’ attribute of the DOM element that triggered the event.
4	Element Target	‘gtm.elementTarget’ key	‘target’ attribute of the DOM element that triggered the event.
5	Element Text	gtm.element’ key (and looking up its text content if any)	‘innerText’ or the ‘textContent’ attribute of the DOM element that triggered the event. The text will be trimmed and normalized (white-spaces will be consolidated) to account for browsers variations.
6	Element URL	‘gtm.elementUrl’ key	‘href’ or ‘action’ attribute of the DOM element that triggered the event depending on the type of element.
7	History New URL Fragment	‘gtm.newUrlFragment’ key	new URL fragment set on a history change event.
8	History Old URL Fragment	‘gtm.oldUrlFragment’ key	old URL fragment set on the previous history change event.
9	History New State	‘gtm.newHistoryState’ key	new history state set on a history change event.
10	History Old State	‘gtm.oldHistoryState’ key	old history state set on the previous history change event.
11	History Change Source	‘gtm.historyChangeSource’ key	source of the gtm.historyChange event which can be: ‘popstate’, ‘pushState’, ‘replaceState’, or ‘polling’.

 

Okay, that was messy, but slightly helpful. What does all this actually mean?

Auto Event Variables, In Real Life

I wish I could tell you what all the “History” variables types mean, but I can’t. A proper developer would be able to describe what a “history change event” is and could figure out where each of the variables fit in there, but I cannot. It has something to do with when a browser captures and saves your browsing history. Not sure how you’d use that in GTM unless you’re getting super ninja techincal.

I can tell you what the “Element” ones mean though, which are probably the ones you’ll be using more often anyways. If there’s a link on a page that looks like this:

<a href=”http://www.nytimes.com” class=”external-link” id=”important” target=”_blank”>New York Times</a>

This is what each of them pick up:

 

I’m still testing these a bit so I’m not 100% sure these are correct, but from what I’ve seen they’re at least close.

Anyways. Hope that helps. Please leave a comment if you’ve done any testing yourself or have any further explanations. Thanks!