Apologies for leaving you hanging. It\u2019s now almost three weeks since I published the first part of this post<\/a>, and I\u2019m sure you\u2019ve been holding your breath ever since.<\/p>\n There\u2019s been a lot going on since the last post. First, my favorite sports team in the world, San Antonio Spurs, won their fifth NBA championship<\/a> from the defending champs, Miami Heat. Next, my wife and I moved to our new house, and we\u2019ve been remodeling ever since. It\u2019s been hectic with work and life getting mixed up in a potpourri of saw dust and web analytics, but now it\u2019s time to return back to the wonderful world of Google Tag Manager!<\/p>\n I promised you four new tips in this one, but I\u2019m going to top myself and give you six gems from the world of tag management. Here\u2019s what you\u2019ll get:<\/p>\n dataLayer declaration and push<\/p>\n<\/li>\n Using eventCallback in dataLayer.push()<\/p>\n<\/li>\n Stopping a Timer Listener<\/p>\n<\/li>\n Naming and version control conventions<\/p>\n<\/li>\n Fire a single tag multiple times<\/p>\n<\/li>\n {{true}} and {{false}}<\/p>\n<\/li>\n<\/ol>\n \n \n Subscribe to the Simmer newsletter<\/a> to get the latest news and content from Simo Ahava into your email inbox!\n <\/p>\n <\/span><\/p>\n Google Tag Manager<\/a> uses (See my comment to this post here<\/a> for an overview of how to access Array objects vs. object properties.)<\/p>\n The thing is, you can\u2019t use <\/p>\n <\/a><\/p>\n<\/div>\n So here\u2019s the first tip:<\/p>\n You need to declare To turn If you don\u2019t declare it with this explicit statement, then GTM will declare dataLayer<\/a> for you<\/strong>. This is very important, since it ensures that you will always have The thing with JavaScript objects and primitives (numbers, strings, etc.) is that if you redefine<\/strong> a JavaScript entity, its previous state will be overwritten! JavaScript entities are dynamic, so you can redefine a string as an object, an Array as a number, and so forth without any difficulty. There\u2019s also no way of protecting a global variable such as Why is this important? Well, if you have more than one After the first line of code, The safest way to prevent this is to preface the ONLY And then only use dataLayer.push()<\/strong> to add objects to the Array. This line ensures that if So here\u2019s my final tip for this section:<\/p>\n Declare dataLayer JUST ONCE and use dataLayer.push() for all interactions afterwards.<\/strong><\/p>\n In your GTM tags you can just use You can use the Well, it\u2019s a pretty lousy example, but it does what it\u2019s meant to. After all tags that fire upon {{event}} equals fireEvent<\/strong> have completed, the eventCallback function will execute and you should see the text in the JavaScript console.<\/p>\n You can use this for a quick callback, such as waiting for all tags to fire before a link redirects or pushing a second event as the callback to impose a rudimentary tag firing order.<\/p>\n You know of the Timer Listener<\/a>, right? You can use it to have an event push every X milliseconds. You can limit the number of times the timer fires, or you can just let it fire from here to eternity.<\/p>\n <\/p>\n <\/a><\/p>\n<\/div>\n The thing is, you might want to halt the listener before the limit is reached. For example, if you\u2019re using the Timer Listener to send pulses reflecting the time the user has spent digesting content, for example, you might want to halt it once the reader reaches the end of the page to keep your events from being cluttered with timer hits.<\/p>\n To halt a timer, you need to use the GTM\u2019s timer listener is your run-of-the-mill JavaScript <\/p>\n <\/a><\/p>\n<\/div>\n After this, whenever you want to halt a timer, all you have to do is have the following line of JavaScript in your Custom HTML tag or your Custom JavaScript macro:<\/p>\n This will halt the most recently fired timer. So if you have multiple timers, you might have to edit the code somewhat to find the proper timer (easiest way to do this is to use {{event}} equals your_timer_event<\/strong> as one of the rule conditions of the tag that stops the timer).<\/p>\n GTM doesn\u2019t exactly shine when it comes to managing a bucketload of tags, macros, and rules (TMRs). Because of this, it\u2019s really important to adopt a good naming convention so that you can make sense of what you have in your container.<\/p>\n For alternative approaches (more explicit naming to satisfy the in-tool search), check Doug Hall\u2019s original, excellent post on online-behavior<\/a>. A more recent post by Justin Goodman<\/a> covers similar ground.<\/p>\n I use a very simple naming convention in all my TMRs. It scales pretty nicely, as it works in large enterprise implementations as well as in smaller containers. Also, the most important thing is that it\u2019s readable.<\/p>\n Here\u2019s what I use.<\/p>\n TAGS<\/strong> Having the tag type is pretty redundant since you can see that in the second column of the tag list. However, I enjoy that it makes the list look a bit less cluttered.<\/p>\n <\/p>\n <\/a><\/p>\n<\/div>\n RULES<\/strong> The key macro is what drives the rule. Most often its an {{event}}<\/strong>, but every now and then you might have the same event across many rules, and then you\u2019ll need to use some other macro to express the difference between the two rules. An example of this is the URL rule above. It\u2019s underlying {{event}}<\/strong> is gtm.js, so I have to use the URL condition to make it different from all the other gtm.js rules.<\/p>\n MACROS<\/strong> With macros, we\u2019re only interested in what they return, since that\u2019s what macros are used for. So in the macro name, it\u2019s important to express just what is returned when the macro is called.<\/p>\n As for version control, my tip is this:<\/p>\n Name your versions AND add notes!<\/strong><\/p>\n <\/p>\n <\/a><\/p>\n<\/div>\n That\u2019s it. It\u2019s so important to annotate your container versions with information what was updated and what changed. This is the only way to stay on top of your game, especially if you\u2019re dealing with a huge version history. Be pedantic about this and make sure it\u2019s part of your quality assurance process for tag management!<\/p>\n Here\u2019s a common problem: You have multiple trackers firing on the same domain, but you want to use just one tag for them. Well, currently GTM doesn\u2019t have a switch with which you can fire the same tag multiple times with different parameters, so you\u2019d need to create a separate tag for each tracker.<\/p>\n However, there\u2019s a workaround. You can use (Note:<\/strong> GTM\u2019s Debug mode doesn\u2019t let you push items into Here\u2019s what you need:<\/p>\n JAVASCRIPT VARIABLE MACRO {{tag callback counter}}:<\/p>\n <\/p>\n <\/a><\/p>\n<\/div>\n LOOKUP TABLE MACRO {{tracker name}}:<\/p>\n <\/p>\n <\/a><\/p>\n<\/div>\n HITCALLBACK MACRO {{tag callback function}}:<\/p>\n <\/p>\n <\/a><\/p>\n<\/div>\n So, before we check how the tag is set up, let\u2019s go over these macros. The {{tag callback counter}}<\/strong> is a JavaScript variable macro which refers to the global JS variable you set up later in {{tag callback function}}<\/strong>. The idea here is that the {{tracker name}}<\/strong> Lookup Table macro returns a different string, depending on what the counter is. Every time the callback is executed, the counter goes up by 1.<\/p>\n The key is to use your first tracker as the default value of the Lookup Table macro<\/strong>. This is because when the tag first fires (on {{event}} equals gtm.js<\/strong>), the JavaScript variable that {{tag callback counter}}<\/strong> refers to will not exist yet (since it\u2019s defined in the CALLBACK of this tag).<\/p>\n When the callback is executed, a GTM event is pushed into dataLayer and the counter value is increased by one. You define the maximum number of times the tag should fire with the In your tag, add the following in the Fields to Set:<\/p>\n\n
\n X<\/span><\/p>\n
\n The Simmer Newsletter<\/strong>\n <\/p>\ndataLayer declaration and push<\/h2>\n
dataLayer<\/code> as its own proprietary data model. dataLayer<\/code> is a JavaScript object of Array type. This means that it has some methods unique to Arrays, such as push()<\/code>.<\/p>\ndataLayer.push()<\/code> if you haven\u2019t declared dataLayer<\/code> as an array first. The repercussions of this are that if you try to use dataLayer.push()<\/code> before dataLayer<\/code> has been declared as an Array, or if it\u2019s been declared as something different (such as a normal object or string), you\u2019ll get some errors:<\/p>\n![\"Errors](\"https:\/\/www.simoahava.com\/images\/2014\/06\/datalayer-errors.jpg#ZgotmplZ\")
<\/p>\ndataLayer<\/code> as an Array before you can use its push() method.<\/strong><\/p>\ndataLayer<\/code> into an array, you need the following code before the container snippet<\/em>:<\/p>\ndataLayer<\/code> available for your tags.<\/p>\ndataLayer<\/code> from being redefined as a different type, so precautions must be taken so that you don\u2019t mess things up.<\/p>\ndataLayer<\/code> declaration on your page template OR in your GTM tags, you will erase all previous information in the structure<\/strong>! Oops. Here\u2019s an example:<\/p>\nvar<\/span> dataLayer = [{'pageCategory'<\/span>: 'home'<\/span>, 'logged-in'<\/span>: 'true'<\/span>}];\n...\nvar<\/span> dataLayer = [{'event'<\/span>: 'allDone'<\/span>}];\n<\/code><\/pre>\n<\/div>\ndataLayer<\/code> has a single object with two properties: pageCategory<\/code> and logged-in<\/code>. A little on further down the code is the second declaration. Now, after this code is run, dataLayer<\/code> will still only have one object, but with just the event<\/code> property! Can you see how harmful this is? None of the previous information is recoverable after this.<\/p>\ndataLayer<\/code> declaration on the page with the following line:<\/p>\nwindow<\/span>.dataLayer = window<\/span>.dataLayer || [];\n<\/code><\/pre>\n<\/div>\ndataLayer<\/code> has already been declared, it won\u2019t be overwritten. It\u2019s not foolproof, since it doesn\u2019t test whether the global variable dataLayer<\/code> is of type Array or not, but I think it\u2019s good enough. If you have another JavaScript library which HAPPENS to use a variable called dataLayer<\/code> as well, you might be in trouble. But this is what testing and debugging is for.<\/p>\ndataLayer.push()<\/code>, and you don\u2019t need to check whether dataLayer<\/code> exists or not, since GTM declares it for you in the container snippet. But when working on the page template, you need to be extra careful not to overwrite the Array.<\/p>\nUsing eventCallback in dataLayer.push()<\/h2>\n
eventCallback<\/code> dataLayer variable in the push()<\/code> method to execute code after all dependent tags have fired. I know, that was a mouthful but it\u2019s really simple. Take this example:<\/p>\ndataLayer.push({\n 'event'<\/span>: 'fireEvent'<\/span>,\n 'eventCallback'<\/span>: function<\/span>() {\n console.log(\"Event has fired\"<\/span>);\n }\n});\n<\/code><\/pre>\n<\/div>\neventCallback<\/code> is, in essence, a shorthand for the proprietary hitCallback<\/a><\/strong> feature that you can invoke in your Google Analytics tags.<\/p>\nStopping a Timer Listener<\/h2>\n
![\"Timer](\"https:\/\/www.simoahava.com\/images\/2014\/06\/timer-listener.jpg#ZgotmplZ\")
<\/p>\nwindow.clearInterval()<\/code> method. It requires a parameter, namely the ID of the timer that is firing.<\/p>\nsetInterval()<\/code> timer, and its ID is stored in, what else, a dataLayer variable called gtm.timerId<\/code>. So to halt the timer, you need to send the content of gtm.timerId<\/code> as the parameter of window.clearInterval()<\/code>. For this to work, you\u2019ll need to create a new Data Layer Variable Macro which refers to gtm.timerId:<\/p>\n![\"Data](\"https:\/\/www.simoahava.com\/images\/2014\/06\/timer-id.jpg#ZgotmplZ\")
<\/p>\nwindow<\/span>.clearInterval({{timer id}});\n<\/code><\/pre>\n<\/div>\nNaming and version control conventions<\/h2>\n
Tag type – purpose<\/em>
HTML – Weather API Call
HTML – Social Share Tracking
UA – Page View Tracking
Listener – Link Click
Listener – Click<\/p>\n![\"GTM](\"https:\/\/www.simoahava.com\/images\/2014\/06\/naming-conventions.jpg#ZgotmplZ\")
<\/p>\n
Key macro – trigger<\/em>
Event – gtm.js
Event – Outbound Link Click
URL – Thank you page<\/p>\n
What is returned<\/em>
Random Number
Debug Mode Status
Element URL
URL Hostname<\/p>\n![\"Name](\"https:\/\/www.simoahava.com\/images\/2014\/06\/version-control.jpg#ZgotmplZ\")
<\/p>\nFire a single tag multiple times<\/h2>\n
hitCallback<\/code>, the Lookup Table Macro and a global JavaScript variable to fire your tag multiple times with different values in the fields!<\/p>\ndataLayer<\/code>, even if you\u2019re doing it from a returned function (which is totally valid). Unfortunately this means that you won\u2019t be able to test this solution in the Debug mode, and you\u2019ll have to publish the container to test it.)<\/p>\n![\"JavaScript](\"https:\/\/www.simoahava.com\/images\/2014\/06\/javascript-variable.jpg#ZgotmplZ\")
<\/p>\n![\"Lookup](\"https:\/\/www.simoahava.com\/images\/2014\/06\/lookup-tracker-name.jpg#ZgotmplZ\"){kind=tracking}
<\/p>\n![\"Custom](\"https:\/\/www.simoahava.com\/images\/2014\/06\/custom-javascript-callback.jpg#ZgotmplZ\")
<\/p>\nmaxRepeat<\/code> variable in the callback function. Just remember to have a row for each iteration in the Lookup Table, otherwise the tracker in the Default Value field of the Lookup Table will be returned for each iteration that doesn\u2019t have a row in the table!<\/p>\n
![\"hitCallback](\"https:\/\/www.simoahava.com\/images\/2014\/06\/hitcallback.jpg#ZgotmplZ\")
<\/p>\n![\"Tracker](\"https:\/\/www.simoahava.com\/images\/2014\/06\/tracker-name.jpg#ZgotmplZ\"){kind=tracking}
<\/p>\n![\"Two](\"https:\/\/www.simoahava.com\/images\/2014\/06\/rules.jpg#ZgotmplZ\")
<\/p>\n