Advanced Google Tag Manager Course — Event Tracking Under The Hood ‘Review’

I recently Joined the Advanced Google Tag Manager course from CXL and the tutor was one and only Simo Ahava.

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.

Event Tracking

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

It’s quite important to learn how actually GTM’s delayer.push() function and what are the different elements associated with the default data layer code. Data Layer is essentially a global data structure that in Javascript. Global data structurre in JavaScript mean that it’s accessible from any JavaScript running on the browser page. So any of the third-party JavaScript libraries that have been downloaded on the page have access to the global name space of the page.

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:

window.dataLayer.push({

event: ‘custom_event’,

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.

DataLayer:

DataLayer is an arrary that used list-type data structure in Javascript where we can easily push value and each of the items we push get added into the queue. First items that is added into the queue will always have index number zero so the first item that will be pushed in the event object that has gtm.js value.

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:

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.

Lastly, we learned about the drawbacks of using event delegation model and JavaScript that can actually block propagation. We also learned about different ways to troubleshoot problems especially the cases where GTM’s default trigger don’t work and how to fix different event tracking issues.

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

https://www.simoahava.com/analytics/matches-css-selector-operator-in-gtm-triggers/

Learning Javascript: https://www.w3schools.com/js/js_htmldom.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.