Here\u2019s the link to part 2 of this JavaScript guide<\/a>.<\/em><\/p>\n The thing about Google Tag Manager<\/a>, or any JavaScript tag manager for that matter, is that there\u2019s JavaScript involved. In fact, the tool itself is just a JavaScript library with some additional bells and whistles (such as a management UI). This means that to make the best of it, some knowledge of JavaScript is warranted, and that\u2019s the point of this post.<\/p>\n This will not be a how-to or JavaScript for dummies<\/a>, but rather a description of how JavaScript should be managed within GTM. However, I have added some of my favorite JavaScript learning resources to the mix, if you want to start from the beginning. JavaScript is a pretty easy programming language to learn, partly because it\u2019s been \u201cdumbed down\u201d and standardized so much over the years. The biggest difficulty with JavaScript, in my opinion, has nothing to do with the language itself. The biggest problem, by far, is how JavaScript is interpreted by the browsers out there. At its best, the same piece of code works perfectly across all browsers in existence. At its worst, you\u2019ll have to add complex cross-browser fallbacks to make sure your code runs even on certain modern browsers.<\/p>\n The good thing about using GTM, or any library, is that the library itself usually takes care of cross-browser concerns for you. With GTM, however, this is limited to the tag and macro templates that you use. When you start adding custom JavaScript yourself, it\u2019s up to you to be wary of cross-browser support for your scripts.<\/p>\n Quirksmode.org<\/a> is a pretty awesome resource if you want to find out more about browser compatibility.<\/p>\n Without further ado, let\u2019s go the guide:<\/p>\n Favorite resources<\/p>\n<\/li>\n JavaScript in Google Tag Manager<\/p>\n<\/li>\n The dataLayer structure<\/p>\n<\/li>\n Interacting with dataLayer<\/p>\n<\/li>\n Custom HTML tag<\/p>\n<\/li>\n Custom JavaScript macro<\/p>\n<\/li>\n<\/ol>\n This is, again, just the first of a two-part series. I\u2019m sorry, I\u2019m just lazy. The sun is finally shining here, I\u2019m looking at the garden, and for some reason the notion of outdoors, smell of freshly cut grass and the sweet liberation only a can of cold beer can provide are edging their way to the top of the \u201cthings I\u2019d rather be doing than blogging\u201d list, which is a very, VERY short list indeed.<\/p>\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 Here are some resources to get you going on your JavaScript learning trail:<\/p>\n WEBSITES<\/strong>:<\/p>\n Codecademy<\/a> – Interactive learning portal for a number of different programming disciplines. Their JavaScript track is excellent to get you started with the language.<\/p>\n Code School<\/a> – Another training portal. Their JavaScript track is good as well.<\/p>\n w3schools.com<\/a> – Better as a reference than as a learning resource, but lots of good content nonetheless.<\/p>\n MDN Web API Interfaces<\/a> – Reference tool for all the web APIs you\u2019ll ever need.<\/p>\n BOOKS<\/strong>:<\/p>\n Douglas Crockford – JavaScript: The Good Parts<\/a> – One of the best books on JavaScript best practices out there (intermediate to advanced).<\/p>\n Nicholas Jakas – Professional JavaScript for Web Developers<\/a> – My favorite JavaScript book. The most complete guide out there.<\/p>\n Marijn Haverbeke – Eloquent JavaScript<\/a> – Excellent book on JavaScript, with a free digital edition!<\/p>\n BLOGS<\/strong>:<\/p>\n DailyJS<\/a> – Daily tips on JavaScript.<\/p>\n David Walsh Blog<\/a> – Lots of stuff on web development, with many in-depth articles on JavaScript.<\/p>\n Joe Zim\u2019s JavaScript Blog<\/a> – Actionable tips and guides for JavaScript and related frameworks.<\/p>\n These are my favorite resources. If you have more suggestions, let me know via e-mail or in the blog comments.<\/p>\n In almost all of my Google Tag Manager posts<\/a>, I use JavaScript in one way or another to get the task done. That\u2019s because JavaScript is THE language of Google Tag Manager. The library itself is a JavaScript library, and all the bells and whistles of the UI are meant to control the type of JavaScript that the tool injects on the web page.<\/p>\n However, you can\u2019t just go around shooting JS code wherever you like. In the GTM UI, JavaScript can only be added in the context of a script<\/strong>. Currently, there are two places which accept JavaScript code raw and unfiltered: the Custom HTML Tag<\/strong> and the Custom JavaScript Macro<\/strong>. So don\u2019t try to write JavaScript in other tag fields, it won\u2019t work.<\/p>\n <\/p>\n <\/a><\/p>\n<\/div>\n So if you want to perform custom JavaScript functions, you will either need to create a Custom HTML Tag which executes some code, or if you want to use JavaScript to access DOM elements, for example, you might want to create a Custom JavaScript macro. We\u2019ll get to these soon, don\u2019t worry.<\/p>\n FURTHER READING<\/strong>:<\/p>\n A JavaScript tag management solution is based on code injection<\/em>. This means that the code it executes on your site is alien to the page template. The only thing the page template originally has is the container snippet<\/a>. This snippet acts as the invitation for GTM to perform its magic on your page.<\/p>\n Because GTM injects the code it wants to execute, it\u2019s vital that it uses its own data structure. If there was no proprietary data model, all the variables GTM would be accessing \/ modifying would run the risk of causing conflicts with other libraries. For instance, say you have a global variable With dataLayer, successful (read: smart) use of GTM is restricted to only those variables that are exposed within the dataLayer structure. Thus the only risk you run is having another library which ALSO uses dataLayer (spelled exactly like that). The better known that the dataLayer standard becomes, the less of a risk this will be, since other libraries will know to avoid using this name.<\/p>\n dataLayer is a JavaScript object<\/strong> of the type Array<\/strong>. An Array is a special type of object. The difference is that in JavaScript, objects have properties<\/em>, whereas Arrays have members<\/em>. An Array member can be an object.<\/p>\n Object properties are defined with specific notation, e.g.:<\/p>\n So this is an object, not an Array. If you want to get the terminology straight, in the first line I created an object using object literal notation<\/strong>. That\u2019s the curly bracket thingamajig there. In the second line, I retrieved the \u2018First-name\u2019 property of the object by using square bracket notation<\/strong>. You could also use dot notation<\/strong> to access object properties (third line), but with \u2018First-name\u2019 that would cause a NaN<\/strong> (Not a Number) error, because the hyphen in the name is interpreted as a minus sign. Thus JavaScript in its infinite wisdom is misguided enough to think that sampleObject.First<\/strong> returns a number of which another number name<\/strong> is subtracted. But never mind, this was just a detour.<\/p>\n The thing to understand about dataLayer is that an Array behaves a bit differently than your run-of-the-mill JavaScript object. First of all, an Array is like a table or queue, however you want to look at it. You can add multiple members to it, and any one of these members can be of any JavaScript type, such as objects.<\/p>\n In GTM, dataLayer is (almost) always interpreted as an Array of objects. Thus you can have the sampleObject I created above as a member of dataLayer:<\/p>\n As you can see, it doesn\u2019t matter any more that the object was called \u2018sampleObject\u2019, since from this moment on it will only be referenced to using its index number in the Array. Index numbers start from 0, so if this is the first object in the array, it\u2019s reference is dataLayer[0]<\/strong>. The next object that is added to the Array would have index number 1, and so on.<\/p>\n You can access object properties in an Array using the same notation as you just learned of in the beginning of this chapter. However, first you need to know which index the object whose property you want to access resides in.<\/p>\n So, if you\u2019re still following me, to access the \u2018First-name\u2019 property of the FIRST dataLayer index, you\u2019d need to use something like this:<\/p>\n This would pop up a dialog with \u201cSimo\u201d. However, in GTM you don\u2019t need to worry about dataLayer index numbers, since you can just use the Data Layer Variable Macro<\/a>. I\u2019ll have more about interacting with dataLayer in the next chapter.<\/p>\n FURTHER READING<\/strong>:<\/p>\n In GTM, you basically interact with dataLayer in three different ways:<\/p>\n First, you define<\/strong> dataLayer as an Array<\/p>\n<\/li>\n Next, you push<\/strong> objects and properties into dataLayer<\/p>\n<\/li>\n Finally, you access these properties using a Data Layer Variable Macro<\/strong><\/p>\n<\/li>\n<\/ol>\n Let\u2019s go through these step-by-step.<\/p>\n You define dataLayer by declaring the variable and setting its type to Array. The most common way to do this is to use literal notation:<\/p>\n This tells your page that a new variable called dataLayer has now been declared, and the square brackets define its type as Array. After this, you can start pushing stuff into the structure, or if you have some properties that you already want to push, you can just add them to the declaration:<\/p>\n So here I create dataLayer as an Array (that\u2019s the square brackets) with a single object (that\u2019s the curly brackets) with three properties (that\u2019s the \u2018key\u2019: \u2018value\u2019,) stuff. As you can see, there\u2019s no comma after the last property. Also, true<\/strong> does not have single quotes around it, since I\u2019m storing a value of Boolean type (true\/false) and not a string.<\/p>\n The thing about the dataLayer declaration is that it should only ever be done once<\/strong>. You see, every time you redeclare a variable, its previous reference is overwritten! You have to be really careful about this, since if your developers accidentally add the dataLayer declaration twice on your page, its previous properties will be overwritten by the second declaration. That\u2019s why its safest to declare the structure once and then just consistently use push()<\/strong> for all modifications later.<\/p>\n The push()<\/strong>-method is what all Arrays come equipped with. Using this method adds an object to the end of the Array, creating a new index for it automatically. Thus nothing is overwritten. You can have a dozen objects with exactly the same properties in dataLayer, and you\u2019d get no errors. Note that GTM\u2019s Data Layer Variable Macro has a way of navigating around this issue (see below).<\/p>\n To push a new object into dataLayer, the following notation should be used:<\/p>\n This just pushed a new object into dataLayer with a single property: \u2018loggedIn\u2019 with the value false. So I can easily have dataLayer with two objects, both with property \u2018loggedIn\u2019 being something different. That doesn\u2019t matter, since they\u2019re in separate objects.<\/p>\n <\/p>\n <\/a><\/p>\n<\/div>\n Trying to push the same property twice into the SAME object would not result in an error, either. However, only the last property would remain in the object.<\/p>\n The thing about push()<\/strong> is that it won\u2019t work if dataLayer hasn\u2019t been declared as an Array. That\u2019s why in your page template the following is a good way of prefixing the dataLayer.push() call:<\/p>\n The first line checks if dataLayer has already been declared. If it has, all is well, but if it hasn\u2019t, it is then and there declared as an Array. This basically makes it so that the push() method will almost always work. The only way it won\u2019t work is if dataLayer HAS been declared but as something other than an Array (pretty rare situation).<\/p>\n Note that when working in GTM (Custom HTML and Custom JavaScript), you won\u2019t have to add this check to your code, since the GTM container snippet will always declare dataLayer for you if you haven\u2019t done so explicitly in the page template.<\/p>\n Finally, the way that the Data Layer Variable Macro works is that when you give it a property whose value it must return, it starts going through the dataLayer properties one by one, starting from the newest. If it finds a property with the name you gave, it returns its value and stops traversing dataLayer. So if you have two objects in dataLayer with the property \u2018loggedIn\u2019, only the most recent property value<\/strong> will be returned by the Data Layer Variable Macro.<\/p>\n In layman\u2019s terms, this means that for Google Tag Manager, pushing an object into dataLayer with a property that already exists in dataLayer overwrites the previous property value with the new one<\/strong>. Of course, it doesn\u2019t really overwrite anything, but the Macro is only interested in the latest value.<\/p>\n There is a quirky exception to this, and that is if you push an Array into dataLayer.<\/p>\n If you then push another Array with the same name, GTM will only \u2018overwrite\u2019 those Array indices that are shared by the two Arrays, but if the first Array had more indices, then those will remain for GTM to use. Allow me to demonstrate:<\/p>\n In the first line, I push an Array with four members (a, b, c, d). A bit later on, I push another Array with the same name, but this time with just two members. If GTM would be consistent, the second time around the Data Layer Variable Macro would have just two members in the \u2018products\u2019 Array, but right now GTM works so that it just overwrites the first two indices in the Array. Thus the Macro would actually see \u2018products\u2019: [\u2018e\u2019, \u2018f\u2019, \u2018c\u2019, \u2019d\u2019]. This is a bit buggy to me, as to be consistent the second Array push should make it so that the Macro only accesses the values in the second Array.<\/p>\n Phew, this was a lot of information, I hope you\u2019re still with me here.<\/p>\n A Custom HTML Tag allows you to inject HTML markup in the site. This means that if you want to run custom JavaScript in a Custom HTML Tag, you need to create the script context for the code. In HTML, you establish a script context with the If you try to run JavaScript without the script block, you\u2019ll run into some serious validation errors.<\/p>\n Note that you don\u2019t need the legacy type=”text\/javascript\u201d<\/strong> attribute in your In Google Tag Manager, a macro is designed to return a value when it is called. That\u2019s why you have all those cool out-of-the-box macros out there, which each return some amazing piece of information about the site, the page, or the visitor.<\/p>\n If you haven\u2019t already, be sure to read my macro guide<\/a>, as it sheds more light on this topic.<\/p>\n With a Custom JavaScript Macro, it\u2019s function (pun intended) is also to return a value. If there\u2019s no return statement or if the macro isn\u2019t wrapped in a function (only functions can return values), you\u2019ll run into errors in GTM.<\/p>\n So here are the things to remember:<\/p>\n 1. Always wrap your Custom JavaScript macro in an anonymous function.<\/strong> An anonymous function is a function without a name. Why is this necessary? Well, you don\u2019t create a function in a macro so that you call it on a whim using its name. No, the sole reason for a JS macro\u2019s existence is that it\u2019s called and its value is resolved at the same time, using the {{macro}} syntax of GTM. This is, again, one of the ways GTM ensures that global variables are not being messed about with. If you could name your functions, you might be using a name reserved for some other library. This would potentially have nightmarish results.<\/p>\n And why return a value? Well, to reiterate, a macro\u2019s function is to return a value<\/em>. When you call a JS macro, it resolves some operation right then and there with all the data available at the moment it was called. It then returns a value based on this operation. What would be the function of using the macro syntax {{macro}} in your fields if not to retrieve a value? Stop asking silly questions.<\/p>\n An example of a proper Custom JavaScript macro:<\/p>\n Here you have an anonymous function declared on the first line, a return statement with the operation on the second line, and the closing of the function block on the third line.<\/p>\n When this macro is called, it returns the URL of the current page transformed into lower case. This is a prototypical GTM Custom JavaScript Macro. It\u2019s just an anonymous function which does not accept parameters. Thus its sole objective is to return a value, based on some operation on some other value that can be found in the document object model (more on this later). Remember that you can access other macros in your Custom JavaScript Macros, so you can do a lot of pretty complex stuff with Custom JavaScript macros. For example, the following macro returns the first folder in the URL path (e.g. \u201csimo\u201d in \/simo\/articles\/analytics):<\/p>\n A Custom JavaScript Macro is probably the most versatile tool you have available in your GTM toolbox, and you should definitely check out my other Google Tag Manager posts<\/a> for creative ways to use them.<\/p>\n Phew, that was a lot information there. I\u2019m going to have to split this into a two-parter, just to keep me motivated \ud83d\ude42<\/p>\n I hope you take a look at the JavaScript resources I wrote of in the first chapter. Even if you\u2019re well versed in the craft of client-side programming, most of the time its good to refresh your knowledge with some \u201cbasic stuff\u201d.<\/p>\n The thing with GTM is that in addition to functioning like your average JavaScript library, it comes along with certain proprietary features that require you to adapt your JavaScript skills somewhat. The purpose of this (and the following article) are just that: make you knowledgeable of what GTM requires from you and the code you create.<\/p>\n\n
\n X<\/span><\/p>\n
\n The Simmer Newsletter<\/strong>\n <\/p>\n1. Favorite resources<\/h2>\n
2. JavaScript in Google Tag Manager<\/h2>\n
![\"script-context\"\/](\"https:\/\/www.simoahava.com\/images\/2014\/06\/script-context.jpg#ZgotmplZ\")
<\/p>\n3. The dataLayer structure<\/h2>\n
pageHeader<\/code> created by your developers, and it stores the main header of your page template. Then GTM comes along and uses pageHeader<\/code> to manipulate the document title that is pushed to Google Analytics. Because it accesses the same global variable that you use to store on-page information, the risk that GTM would break your page template becomes a horrible reality.<\/p>\nvar<\/span> sampleObject = {'First-name'<\/span>: 'Simo'<\/span>};\nalert(sampleObject['First-name'<\/span>]);\nalert(sampleObject.First-name); \/\/ Error!\n<\/span><\/code><\/pre>\n<\/div>\nvar<\/span> dataLayer = [{'First-name'<\/span>: 'Simo'<\/span>}];\n<\/code><\/pre>\n<\/div>\nalert(dataLayer[0<\/span>]['First-name'<\/span>]);\n<\/code><\/pre>\n<\/div>\n4. Interacting with dataLayer<\/h2>\n
\n
var<\/span> dataLayer = [{\n 'pageTitle'<\/span>: 'Homepage'<\/span>,\n 'visitorType'<\/span>: 'Loyal customer'<\/span>,\n 'loggedIn'<\/span>: true<\/span>\n}];\n<\/code><\/pre>\n<\/div>\ndataLayer.push({'loggedIn'<\/span>: false<\/span>});\n<\/code><\/pre>\n<\/div>\n![\"datalayer\"\/](\"https:\/\/www.simoahava.com\/images\/2014\/06\/datalayer.jpg#ZgotmplZ\")
<\/p>\nwindow<\/span>.dataLayer = window<\/span>.dataLayer || [];\ndataLayer.push(...);\n<\/code><\/pre>\n<\/div>\ndataLayer.push({'products'<\/span>: ['a'<\/span>, 'b'<\/span>, 'c'<\/span>, 'd'<\/span>]});\n...\ndataLayer.push({'products'<\/span>: ['e'<\/span>, 'f'<\/span>]});\n<\/code><\/pre>\n<\/div>\n5. Custom HTML Tag<\/h2>\n
div id<\/span>=\"html_markup_here\"<\/span>>This is still just normal HTML markupdiv<\/span>>\nscript>\n alert(\"And this is JavaScript!\"<\/span>);\nscript<\/span>><\/code><\/pre>\n<\/div>\n6. Custom JavaScript Macro<\/h2>\n
2. Always return a value (any value) with a Custom JavaScript macro<\/strong><\/p>\nfunction<\/span>() {\n return<\/span> window<\/span>.location.href.toLowerCase();\n}\n<\/code><\/pre>\n<\/div>\nfunction<\/span>() {\n return<\/span> {{url path}}.split(\"\/\"<\/span>)[1<\/span>];\n}\n<\/code><\/pre>\n<\/div>\nConclusions<\/h2>\n