Useful Google Tag Manager Macros

I’ve mentioned how to use the new auto event tracking offered by Google Tag Manager (GTM) in earlier post, and we’ve seen how the new auto event variables that Google added to GTM allow us to easily reference the DOM elements on our pages. In this post I’d like to take 1 step further by introducing some of the macros that I found useful but not available in GTM out of the box.

The default macros

GTM by default supports the following macros:

Macros	Description
Event	Event that you can either manually trigger or instruct GTM to trigger by using event listener. If you enable auto event listener in GTM, this field will be automatically populated according to the event listened
Referrer	Referrer of the page
URL	Full URL of the page (e.g. http://www.whymeasurethat.com)
URL hostname	Host name of the page (e.g. www.whymeasurethat.com)
URL path	The path of the page (e.g. /2013/01/02/event-tracking)

And these are the new macros (aka auto event variables) introduced by GTM lately:

Auto event variable	Description
Element	Represents the DOM element that triggers the event
Element ID	ID of the DOM element that triggers the event
Element Classes	CSS classes of the DOM element that triggers the event
Element Target	The target attribute of the DOM element that triggers the event
Element URL	The ‘href’ or ‘action’ value of the DOM element (a link or a form) that triggers the event

They’re all extremely useful, especially when I want to define GTM rules. For example, we can define a rule that only triggers when a certain URL pattern is matched or when certain event is triggered. It’s also very helpful when we want to reference to a particular element – we can now either match the elements’ ID or their CSS classes.

However, if we want to use some other attributes of an element for our tracking, there’s no default macros that allow us to do so. Luckily it’s not very difficult to add your own if you know some JavaScript, let’s see some of useful macros I’ve been using and how to add them in GTM.

Useful macros

Account ID

One very common scenario that I encountered is that we will have different account IDs for same set of tags – for example, I may have 2 different Google Analytics IDs, one for development site and one for live site, both running same set of tags. So what we want here is 1 macro that switch values automatically when it’s being ran on the different environments.

GTM offered a very powerful feature called lookup table. Basically what it does is to map 1 macro value to another. For example, whenever you see ‘1’ is being passed from the {{ month }} macro, you can set the {{ month name }} macro to January. So here we can match the different host names and give different account ID values as follows:

You can see some great examples on how to use Lookup Tables in GTM here.

Page title

[Updated on 27 Mar] Thanks Simo Ahava’s advices (see the comments after the end of this post), the following has been revised.

Somehow this is very elementary but not included in the default GTM macros. Let’s say your site URL is not in a very distinguishable structure (though I’d really ask you to check with your SEO expert to rewrite them), and that you need to pass the page title to your analytics tool (say, Mixpanel) for your easy reference. You can do this by creating a new JavaScript Variable macro and put the document.title in the Global Variable Name field.

Element inner text

[Updated on 27 Mar] You don’t need to create the macro like what I’ve suggested below now. GTM has released an auto event variable called {{element text}} that did the exact same thing as what I am trying to do here. Thanks Simo Ahava again for pointing that out (see comments from him after end of this post).

When we are tracking link or  button clicks, especially call to action (CTA) ones, very often we want to know which CTA does the user clicks on. We can use the default URL macro, but if I want to capture the text of that CTA for easier reference, I will need to extract that value by myself.

For example, let’s say I want to capture the clicks of the 2 links in this page:

I want to pass the text values ‘Learn More’ and ‘Try It For Free’ to my analytics tool. Similar to the page title macro, you can specify a new Custom JavaScript macro with the following function to extract the ‘inner text’ value:

function() {
    var elem = {{element}};

    if (elem.textContent && typeof(elem.textContent) != "undefined")
        return elem.textContent;
    else
        return elem.innerText;
}

What this macro does is extract the ‘innerText’ value of the element which triggers the event. In case of a link, it basically extract the value within the <a> tag (i.e. VALUE HERE IS EXTRACTED):

<a href="http://www.test.com/testlink/">VALUE HERE IS EXTRACTED</a>

And this macro not only works on links, but on any elements that may trigger an event. For example, if I have a <div> that triggers a click event, I can capture the text within the <div> as well:

<div class="cta">VALUE HERE IS EXTRACTED</div>;

Element attribute

Another very common use case is to extract the value of an attribute of an element. You can do that by specifying a DOM Element macro, together with the ID of the element as well as the attribute name:

However, you can see how tedious it will be, if you want to capture the sources of ALL images on the page when they’re being clicked – if you have 10 images, you need to create 10 macros, and this can only be done if the <img> tag is having an ID, which in reality, not necessary the case.

So what we are trying to do here is to get any attribute that you want of the element that triggers an event. For example here, we get the ‘src’ attribute of the <img> tag:

function() {
	var elem = {{element}},
	    attr = "src", // change this to the attribute that you want to get
            result = (elem.getAttribute && elem.getAttribute(attr)) || null;

	if( !result ) {
		var attrs = elem.attributes,
			l = attrs.length;
		for(var i = 0; i < l; i++) {
			if(attrs[i].nodeName === attr)
				result = attrs[i].nodeValue;
                }
	}

	return result;
}

So if we have an image like this in our page:

<img src="/img/banner.jpg" alt="alt text"/>

What we get from the macro will be: /img/banner.jpg.

Summary

I hope you will find the macros described here useful in your projects and saved you some time to ask your programmer to pass those data by code. But what I have here is just a start. What I really want from this post is actually to have YOU telling me your wish list of macros, so that we can build up an even more throughout and reusable macros list here. So what’re the macros that you’d love to have? Or if you’re currently using some awesome macros, don’t be shy to share with us!