GOOGLE TAG MANAGER LEARNINGS 100+ GOOGLE TAG MANAGER LEARNINGS I’ve always been proud to avoid the typical headline clickbait of “Ultimate guide to pigeon care”, “All you need to know about the Great Vowel Shift”, “Did you know that you’ve been smoking peyote wrong your whole life?” I’m ready to make an exception now by adding a BIG WHOPPING NUMBER to the title You see, the amount of knowledge one can accumulate about anything they do on a daily basis is mind blowing It helps if you write a blog.
100+ GOOGLE TAG MANAGER LEARNINGS I’ve always been proud to avoid the typical headline clickbait of “Ultimate guide to pigeon care”, “All you need to know about the Great Vowel Shift”, “Did you know that you’ve been smoking peyote wrong your whole life?” I’m ready to make an exception now by adding a BIG WHOPPING NUMBER to the title You see, the amount of knowledge one can accumulate about anything they on a daily basis is mind-blowing It helps if you write a blog about the topic, since creative output is a great way to organize your thoughts It also helps to be active in community support, since problem-solving is an excellent way to accumulate new skills and to hone the edge of your existing talent Now, I already have 50+ GTM Tips written, so it’s not like this is a novel idea, even on this blog But this time I just wanted to write short, byte-sized things I’ve learned along the way, and I want to share them with you As you can read from the outrageously baiting title, there should be 100+ tips, but I only enumerated an even 100 That’s because I want YOU to add your ideas to the end of this post, and let’s see if we can keep it going Yes, it’s my shameful attempt to delegate content creation to the community I am guilty of that, too, now TABLE OF CONTENTS ● Container JavaScript Snippet ○ Initializes the dataLayer ○ Creates the script loader for the GTM library ○ JavaScript snippet should be in but can be (almost) anywhere ○ Pushes the initial event: 'gtm.js' ○ Multiple container snippets on a page are supported ● Container snippet ○ The block should be at the very beginning of ○ Only executed by browsers with JavaScript disabled ○ Loads an HTML page in an ○ Only the Page View trigger works ○ 10 Use a function() { return true; } Custom JavaScript variable in the trigger ○ 11 Only the Custom Image tag is useful ○ 12 Can utilize “Data Layer” parameters via query parameters ● The dataLayer structure ○ 13 Global JavaScript array ○ 14 You can use a different name than dataLayer ○ 15 Only the push() method works with GTM ○ 16 Typically only plain objects work with GTM ○ 17 You can use any JavaScript type as a value of a key ○ 18 Only event key can trigger tags ○ 19 You can also push() a command array ○ 20 Never overwrite, always push() ○ 21 The array is capped at 300 ● GTM’s data model ○ 22 Copies messages queued via dataLayer.push() ○ 23 GTM freezes variable values when a trigger fires ○ 24 Objects are recursively merged ○ 25 Arrays are recursively merged ○ 26 You can run JavaScript methods on existing Data Layer values with a command array ○ 27 Version vs Version of the Data Layer Variable ○ 28 google_tag_manager['GTM-XXXX'].dataLayer methods ● Preview mode ○ 29 Preview mode works with a cookie on www.googletagmanager.com in the preview browser ○ 30 Shows the state of tags, triggers, variables, and Data Layer at each Data Layer message ○ 31 Summary shows the state at the latest message ○ 32 Variables are resolved multiple times - at least once per message ○ 33 Preview can be minimized ○ 34 To quit preview, you need to exit preview mode via the GTM UI ○ 35 To quit a shared preview, you need to follow the original link ○ 36 Problems with the preview mode not showing correctly are most typically due to CSS conflicts ○ 37 You can also preview without the debug panel ○ 38 Preview must be refreshed after every change ● Universal Analytics ○ 39 GTM creates a new tracker with every tag instance ○ 40 Settings are not shared across tags ○ 41 You can set a tracker name, but most often this is risky and unnecessary ○ 42 Use Fields to Set for setting any analytics.js fields ○ 43 If a field has the variable icon, you can use variables in it ● Enhanced Ecommerce ○ 44 Use Data Layer option uses Version of the Data Layer Variable ○ 45 Requires Data Layer object to be syntactically flawless ○ 46 The Currency type is just a string with a monetary value ○ 47 Product-scoped Custom Dimensions and Metrics need to be formatted correctly ○ 48 Custom JavaScript variable method is more flexible than Use Data Layer ● Triggers ○ 49 Variables can only be used to check against ○ 50 Use a Custom JavaScript variable to check for dynamic values ○ 51 'event' is implicit in all but the Custom Event trigger ○ 52 Multiple trigger conditions are AND, multiple triggers are OR ○ 53 Use regular expressions or Custom JavaScript variables to add optionality in a single trigger ● Auto-event trigger ○ 54 Just Links listens to clicks on elements and their descendants ○ 55 All Elements listens to all clicks ○ 56 Form listens to a submit event dispatched by a element ○ 57 History Change listens to interactions with the browser history API ○ 58 Error listens to uncaught JavaScript exceptions ○ 59 All triggers but the Click / All Elements trigger require that the original event bubble up ○ 60 Check Validation checks for event.preventDefault() ○ 61 Wait for Tags pauses the original event, but be careful ○ 62 Enable this trigger when… vs This trigger fires on… ○ 63 Data Layer object composition of an auto-event ○ 64 Auto-event variable ○ 65 Matches CSS selector with the Click / Form Element built-in variable ● Custom HTML tags ○ 66 Code is automatically minified ○ 67 Code is injected to the end of ○ 68 Can be used to add any HTML elements ○ 69 The document.write option is fixed to prevent the site from breaking ○ 70 Variables are automatically renamed in Custom HTML tags, too ● Built-in variables ○ 71 Need to be enabled ○ 72 Click and Form variables are copies of each other ● Custom JavaScript variables ○ 73 Must be anonymous functions ○ 74 Must have a return statement ○ 75 Can be used to return another function ○ 76 Should avoid side effects ○ 77 Can refer to other variables ● Tag sequencing ○ 78 Setup and cleanup are fired with the main tag, regardless of their own triggers ○ 79 Use onHtmlSuccess() and onHtmlFailure() to signal that the sequence can continue ○ 80 Use dataLayer.set() to change Data Layer variable values mid-sequence ● Tag settings ○ 81 Once per page is once per page load, once per event is once per GTM event ○ 82 Tag priority is for a single GTM event - doesn’t necessarily mean tags are completed in the given order ● Workspaces ○ 83 You will always have at least one workspace ○ 84 When you create a version out of a workspace, that workspace is deleted ○ 85 You don’t have to update your workspace until you are ready to create a version ● AMP container ○ 86 No Custom JavaScript or Custom HTML ○ 87 AMP is very restricting ○ 88 Client ID is (currently) ambiguous ○ 89 New triggers, e.g scroll ○ 90 Can be augmented with the on-page JSON configuration ● GTM for mobile ○ 91 Not the same as GTM for web ○ 92 An SDK you need to download and add to the project ○ 93 GA tracker object is not exposed ○ 94 GTM legacy uses dataLayer ○ 95 Latest version of GTM for mobile uses Firebase ○ 96 You can intercept Firebase events using GTM ○ 97 Firebase GTM has (imperfect) support for GA Enhanced Ecommerce ● Other stuff ○ 98 Debugging is a complex process ○ 99 Load sequence of GTM’s default events is important to understand ○ 100 Some ad and content blockers block GTM from loading ○ 101 Use undefined to clear individual keys from Data Layer (upepo mwindaji) ○ 102 You can track to multiple Universal Analytics properties in the same container ● Summary X The Simmer Newsletter Subscribe to the Simmer newsletter to get the latest news and content from Simo Ahava into your email inbox! CONTAINER JAVASCRIPT SNIPPET INITIALIZES THE DATALAYER The JavaScript snippet part of the GTM container has one very important function (among others) It initializes the window.dataLayer array Thus, if you haven’t initialized a dataLayer object yourself, the container snippet will this for you This ensures that dataLayer.push() works within GTM CREATES THE SCRIPT LOADER FOR THE GTM LIBRARY Perhaps even more importantly, the JavaScript container snippet creates a element, which loads the Google Tag Manager container library for your GTM container ID from Google’s servers JAVASCRIPT SNIPPET SHOULD BE IN BUT CAN BE (ALMOST) ANYWHERE The latest (and best) recommendation for placing the JavaScript snippet is to put it in the of the document This helps GTM load as early as possible, resulting in greater tracking accuracy However, you can execute the JavaScript snippet pretty much any time during the page load and anywhere in your site code where execution of JavaScript is possible The sooner the library loads, though, the more accurate your data collection will be PUSHES THE INITIAL EVENT: 'GTM.JS' The JavaScript snippet also pushes the initial event: 'gtm.js' into dataLayer This is an important GTM event It is used by the All Pages and Page View triggers Any Data Layer variables you want to use with these triggers must be added to dataLayer before the JavaScript container snippet is executed MULTIPLE CONTAINER SNIPPETS ON A PAGE ARE SUPPORTED You can add multiple JavaScript container snippets on a page This is officially supported The caveat is that they all need to use the same dataLayer name CONTAINER SNIPPET THE BLOCK SHOULD BE AT THE VERY BEGINNING OF At the time of writing, the block should be added to the very beginning of This is the only way that Search Console Verification using the Google Tag Manager method will work Naturally, if you don’t care about verifying the site using the GTM method, nor you have any use for tracking non-JavaScript visits, you can leave the block out altogether Just don’t place it in as that would result in HTML validation issues ONLY EXECUTED BY BROWSERS WITH JAVASCRIPT DISABLED The snippet is only executed by browsers with JavaScript disabled If you want to test it, you can disable JavaScript using your browser’s developer tools (e.g Chrome) LOADS AN HTML PAGE IN AN The block loads an element, which fetches its data as an HTML file from Google Tag Manager’s servers In essence, this HTML file is your container The HTML will contain the image elements you have configured to fire for JavaScript-disabled visitors ONLY THE PAGE VIEW TRIGGER WORKS Because the JavaScript-less GTM can’t run JavaScript (d’oh), only the Page View trigger is at your disposal Thus, there’s no dynamic triggers, and no way to wait for the page to load or anything like that The Page View trigger is fired when the contents are fetched 10 USE A FUNCTION() { RETURN TRUE; } CUSTOM JAVASCRIPT VARIABLE IN THE TRIGGER ... can use the google_ tag_ manager interface google_ tag_ manager[ 'GTM-XXXX'].dataLayer.get('keyName') fetches the value stored in GTM’s data model for variable name keyName google_ tag_ manager[ 'GTM-XXXX'].dataLayer.set('keyName',... Variable ○ 28 google_ tag_ manager[ 'GTM-XXXX'].dataLayer methods ● Preview mode ○ 29 Preview mode works with a cookie on www.googletagmanager.com in the preview browser ○ 30 Shows the state of tags, triggers,... recursive merge - what you push is what you get 28 GOOGLE_ TAG_ MANAGER[ 'GTM-XXXX'].DATALAYER METHODS 18 If you want to access values stored in Google Tag Manager? ??s data model from outside GTM or without