Advanced Google Tag Manager Course — Event Tracking Under The Hood ‘Review’
In this post, I’ll try to cover as much as I can, as taught in the Advanced Google Tag Manager course — Chapter 1 — Event Tracking Under The Hood by CXL.
This was the first thing that was taught in the course. Objective of the course was to learn how data layer works, how event tracking works and how we can utilize the default event tracking variables of Google Tag manager.
So let’s get started with the chapter:
How a dataLayer.push() works
On an Important Note here: Naturally, Iframes have their own sandboxes so they don’t have access to the pages where the iframe is added unless the iframe is running on the same domain and we have access to the iframe.
So let’s take an example how actually that works:
key : ‘someValue’
Windows Prefix is recommended prefix especially when working with the global items because it helps any one who is working on the code to realize that we are actually taking about the global data structure rather than locally scoped one. So it’s always recommended to have window prefix whenever we are working on the dataLayer code.
Push () :
Push method work has a communication channel with dataLayer values get pushed by using Push(). GTM container overrides the push method. Push() pushes the items into the datalayer array thus Browser API for the arrarcy works as expected. One important thing to remember here that GTM adds it’s own event listener to push method which copies everything that was pushed into the arrary and translates them into its own internal data structure.
Offical Documentation from Google: https://support.google.com/tagmanager/answer/6164391?hl=en
Event key is the only thing that can trigger a tag so if you haven’t setup the trigger datalayer.push will not fire anything as there is no event key setup. In the similar words, If datalayer.push had the some value here, no triggers would be able to fire with the datalayer.push method. That’s why it’s also a good practice to always have a placeholder event key in every single dataLayer.push,in case you run across a situation where you really need to trigger something off that particular dataLayer.push.
Default Events from Google Tag Manager:
There are a number of default event that data Layer pushes in to the container and those includes:
Page views: This event get pushed in the container when the container has been fully loaded on the page.
DOM Ready: The event get pushed when the HTML of the page has been rendered in the browser window.
Windows Loaded: This event get pushed when the page has been completely loaded on the browser window.
GTM’s Event Tracking Explained
The next topic in the course covers how GTM uses auto-event tracking and how it listen to different interactions from users on the page. Auto-event tracking is one of the most powerful feature of Google Tag Manager as it lets you deploy no-code solutions for tracking a number of items like Page Scroll, Video View, Clicks.
One of the most useful auto-events in GTM are All elements Clicks and Just links. One of the major difference between all elements clicks and just links is that the just link trigger differently thatn the all elements links. Just clicks also listen for the clicks on the page but it only pushes an item into the data layer if that click element is wrapped by a Link. So this means that if you want to track clicks on links, always try the Just Links trigger first, because that’s the most robust way to track link clicks, and also because it lets you do things like halt the page to wait for all the tags to complete before the redirect happens.
Solving Advanced GTM Issues
This is one of the advanced lessons in GTM course where we resolve the Advanced GTM tracking issues with link clicks tracking. The course covered how to resolve the DOM element issues and how items in top-level elements are nested with the same group.
Summarize the First Lesson:
During the course, there are a number of things covered that include how datalyer.push works and how it uses the data layer array structure to push the message into it’s internal data structure.
We also learned about the auto-event tracking and different type of triggers running on the site. We also learned about capturing the bubble and how event tracking model of the browser work with GTM to add it’s event listeners.
There are a number of resources to learn about different things on GTM elements, especially when you are dealing with Element Visibility auto-event in GTM:
CSS Selector Guide For Google Tag Manager: https://www.simoahava.com/analytics/css-selector-guide-google-tag-manager/ and www.w3schools.com/cssref/css_selectors.asp
DOM Enlightenment by Cody Lindley — once of the best books on the Document Object Model: http://domenlightenment.com/
The next part in the lesson include how Form Tracking uses post method to on the Submit button clicks.