It\u2019s time to dig into my tip library for some pretty cool things you can do with Google Tag Manager<\/a> to enhance your site tagging. Some of these are macro magic<\/a> through and through, some of these are best practices, and some of these are things that will make your life easier while managing<\/em> a tag management solution.<\/p>\n <\/p>\n <\/a><\/p>\n<\/div>\n I\u2019ve split this post into two parts to make it more Hobbit and less Lord Of the Rings length-wise.<\/p>\n Here\u2019s what you\u2019ll find within this first part:<\/p>\n Unbind jQuery<\/p>\n<\/li>\n Undefined fields are not sent to GA<\/p>\n<\/li>\n Track copy event<\/p>\n<\/li>\n Errors as events<\/p>\n<\/li>\n<\/ol>\n Keep your eyes peeled for the second part.<\/p>\n I know, the anticipation is probably killing you.<\/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 I\u2019m not a huge fan of jQuery<\/a>. I mean, it\u2019s definitely useful, since it simplifies a lot of the difficult and error-prone syntax that complex JavaScript entails. At the same time, I enjoy complex challenges, and learning the hard way has definitely made me a better developer.<\/p>\n In my experience, and this is definitely a very<\/strong> marginal view, jQuery introduces a certain degree of, erm, sloppiness<\/em>. I know the \u201cit\u2019s too easy\u201d argument is infantile, but in some cases the lack of transparency to what\u2019s actually happening in the code can invite some pretty poor development work. In a way, jQuery is more about reading a manual<\/a> than about actually creating code, and that sucks. Especially with event handlers, some development decisions are clearly influenced by how easy it is to bind the handlers to elements.<\/p>\n For Google Tag Manager, this is all too familiar<\/a>. An innocuous OK, sorry for the rant. Here\u2019s what I suggest. Whenever your GTM listener doesn\u2019t fire when it should, open the JavaScript console and type the following line of code there\u2026<\/p>\n \u2026and press enter. Then try clicking or form submitting again.<\/p>\n What this simple line does is it unbinds all<\/strong> jQuery event handlers from all HTML elements in the document body. If your GTM listener works after this, it means that there\u2019s some interfering jQuery script. The next step is to find the problematic script, and ask your developer to fix it so that propagation isn\u2019t prevented.<\/p>\n (Be sure to check out my Chrome extension<\/a>, where this feature is handily one button click away!).<\/p>\n Or you can choose the hacker route. If you find the interfering script, and if you find the function that\u2019s grabbing your clicks or submits and preventing propagation, you can use a Custom HTML tag to fix it.<\/p>\n NOTE!<\/strong> This is a hack<\/em>. Be sure to test, test and TEST before publishing a container where you unbind jQuery. Also, it wouldn\u2019t hurt to consult with someone who has an understanding of just what event handlers are used on the site.<\/p>\n Let\u2019s say you have a Back To Top button which is not sending clicks to GTM\u2019s listeners. You find the code in one of the page assets, and it looks something like this:<\/p>\n As you can see, the dreaded To fix this, create a new Custom HTML tag with the following code within:<\/p>\n If jQuery and the problematic script are loaded in the On the first line, I unbind the original click handler. Then, I add Naturally, you\u2019ll need to test, test, test and then test some more whether this hack breaks down your entire site or not.<\/p>\n Of course, it\u2019s not just jQuery that might interfere with your listeners. It might be vanilla JavaScript or some other library. This chapter focuses on jQuery simply because it\u2019s so widely spread that most of the time it really is the source of the problem.<\/p>\n Here\u2019s a fun fact about the Google Analytics API: if a field such as Custom Dimension is undefined<\/em> when the GA endpoint is called, the Custom Dimension is left out of the payload. How is this fun? Well, it introduces an opportunity to make your tags a bit more dynamic.<\/p>\n It would be nice to get a list of all the fields that behave this way, and also how they behave with other return values such as false<\/strong> or 0<\/strong>.<\/p>\n So, let\u2019s say you have a Custom Dimension such as blog author<\/em> that you want to send with your page view tags. Naturally, you only set the blog author on blog pages. You don\u2019t want to send a dummy value like \u201cempty\u201d or \u201cn\/a\u201d on other pages on your site, so you\u2019re absolutely certain that you need two tags: one when the blog author is populated (and can be sent as a Custom Dimension), and one on all the other pages (where the Custom Dimension will be left out of the tag).<\/p>\n <\/p>\n <\/a><\/p>\n<\/div>\n However, thanks to how the GA API works, you only need one tag. Just make sure that the macro which returns the Custom Dimension value resolves to undefined type<\/em> when the dimension doesn\u2019t have a value. There are a bunch of ways you can do this:<\/p>\n As you can see, returning false<\/strong>, an empty string, or a variable which hasn\u2019t been declared will not do.<\/p>\n The cool thing about GTM is that if you have a Data Layer Variable Macro which doesn\u2019t resolve, it will be automatically set to undefined type<\/em>, meaning a Custom Dimension which refers to this macro will not get sent. So the best way to navigate through this particular scenario is to have blog-author<\/strong> declared in the dataLayer declaration before the container snippet on the page template. If the page isn\u2019t a blog page, then this declaration can just be left out.<\/p>\n Then, when you create a Data Layer Variable Macro, on pages with blog-author<\/strong> in the array, it will fire the Custom Dimension with the blog author\u2019s name as the value. On all other pages the dimension will not get sent.<\/p>\n Once you familiarize yourself with JavaScript and understand all the different ways how GTM and JavaScript resolve variables to undefined<\/em> type, you can get really creative with this feature, making your tags even more leaner.<\/p>\n Ever wondered how often people copy text using CTRL+C or some other means? Well, wonder no more, because now you can track it as an event!<\/p>\n Create this simple Custom HTML tag:<\/p>\n This is a very simple script that pushes the dataLayer event \u2018copy\u2019 whenever someone copies something on your page within the HTML element with ID entry-content<\/em> (e.g. Be sure to change the element whose content you want to track with the event listener to match the markup on your website.<\/p>\n You can make it more versatile by exploring the contents of the And so on. Note that ![\"Google](\"https:\/\/www.simoahava.com\/images\/2014\/05\/google-tag-manager-tips.jpg#ZgotmplZ\")
<\/p>\n\n
\n X<\/span><\/p>\n
\n The Simmer Newsletter<\/strong>\n <\/p>\n1. Unbind jQuery<\/h2>\n
return false;<\/code> or e.stopPropagation()<\/code> will prevent your GTM listeners from ever retrieving the DOM event. Often the only reason propagation is cancelled like this is the fact that the code was copy-pasted from some Stack Overflow discussion completely unrelated to your website\u2019s markup.<\/p>\nif<\/span>(typeof<\/span>(jQuery)!=='undefined'<\/span>){jQuery('body'<\/span>).find('*'<\/span>).off();}\n<\/code><\/pre>\n<\/div>\njQuery('.top-of-page, a[href=\"#top\"]'<\/span>).click(function<\/span> () {\n jQuery('html, body'<\/span>).animate({\n scrollTop: 0<\/span>\n }, 400<\/span>);\n return<\/span> false<\/span>;\n});\n<\/code><\/pre>\n<\/div>\nreturn false;<\/code> is there. That\u2019s what\u2019s stopping the events from climbing up the DOM tree.<\/p>\nscript>\n jQuery('.top-of-page, a[href=\"#top\"]'<\/span>).off('click'<\/span>);\n jQuery('.top-of-page, a[href=\"#top\"]'<\/span>).click(function<\/span>(e) {\n e.preventDefault();\n jQuery('html, body'<\/span>).animate({\n scrollTop: 0<\/span>\n }, 400<\/span>);\n });\nscript<\/span>><\/code><\/pre>\n<\/div>\ne<\/code> as an argument of the new click function. This e<\/code> contains the event object, and I can then use its preventDefault()<\/code> method to stop the original action of the click without<\/em> stopping its propagation. Finally, I remove the return false;<\/code> from the end of the function.<\/p>\n2. Undefined fields are not sent to GA<\/h2>\n
![\"undefined-custom-dimension\"\/](\"https:\/\/www.simoahava.com\/images\/2014\/05\/undefined-custom-dimension.jpg#ZgotmplZ\")
<\/p>\nfunction<\/span>() {\n var<\/span> t;\n var<\/span> y = \"\"<\/span>;\n return<\/span> t; \/\/ returns undefined type\n<\/span> return<\/span>; \/\/ returns undefined type\n<\/span> return<\/span> undefined<\/span>; \/\/ returns undefined type\n<\/span> return<\/span> false<\/span>; \/\/ returns boolean type\n<\/span> return<\/span> y; \/\/ returns string type\n<\/span> return<\/span> x; \/\/ throws ReferenceError\n<\/span>}\n<\/code><\/pre>\n<\/div>\nscript>\n var<\/span> dataLayer = [{'blog-author'<\/span>: 'Simo Ahava'<\/span>}]; \/\/ Blog author declared, dimension will get sent\n<\/span>script<\/span>>\n...\nscript>\n var<\/span> dataLayer = []; \/\/ Blog author not declared, dimension will not get sent\n<\/span>script<\/span>><\/code><\/pre>\n<\/div>\n3. Track copy event<\/h2>\n
script>\n var<\/span> c = document<\/span>.getElementById(\"entry-content\"<\/span>);\n if<\/span>(typeof<\/span>(c)!=='undefined'<\/span>) {\n c.addEventListener('copy'<\/span>, function<\/span>(evt) {\n dataLayer.push({'event'<\/span>: 'copy'<\/span>});\n });\n }\nscript<\/span>><\/code><\/pre>\n<\/div>\nevt<\/code> argument, which is the event object. Its target<\/code> property contains the HTML element which was the target of the event. Here are some ideas:<\/p>\n...\ndataLayer.push({'event'<\/span>: 'copy'<\/span>, 'copy-id'<\/span>: evt.target.id, 'copy-content'<\/span>: evt.target.innerHTML});\n...\n<\/code><\/pre>\n<\/div>\nevt.target<\/code> stores the element where the copy event started. So if the copy action takes place over multiple paragraphs, headers, or spans, for example, you\u2019ll only be able to observe the properties of the first element targeted by the action.<\/p>\n4. Errors as events<\/h2>\n
![\"JavaScript](\"https:\/\/www.simoahava.com\/images\/2014\/05\/javascript-errors.jpg#ZgotmplZ\")
<\/p>\n![\"JavaScript](\"https:\/\/www.simoahava.com\/images\/2014\/06\/javascript-error-listener.jpg#ZgotmplZ\")
<\/p>\n