Of Custom Javascript variable, built-in Javascript variable & other interesting tales in GTM — Course Review

In the last blog, I had discussed aspects of Custom HTML tag for Google Tag Manager. As part of the CXL course, I am learning new things every week. This week I have mostly been focusing on learning a bit more about Javascript, although I must admit I have not made as much progress as I would have liked. I have mostly gone through 3–4 lectures by Chris Mercer, including his courses on Custom Dimensions & Metrics, UserID tracking and Custom Javascript. These aren’t very lengthy courses, so even though I had planned for learning more, I ended up with only a few in the kitty because of excess work load in my full time job as a digital marketer.

So here goes the first part of the blog where we talk about built-in and custom Javascript. At the onset, I must admit that it is very similar to custom HTML. For the purpose of this exercise, we are going to use the same code for extracting clientId that Chris Mercer had borrowed from Simo Ahava’s article, Macro Magic Google Tag Manager.

First one needs to sign into Google Tag Manager & navigate to the User-Defined Variables section under Variables tab. Click New & move on to the Variable Type selection part. There you should be able to see the two types of javascript variables available — custom and just Javascript.

For now, select the first one. Let us now look at the code that is provided by Simo Ahava. Here is how it looks like:

Let us understand what this code is doing. Again, just as I warn before explaining anything technical, please note I am no expert in Javascript or any code for that matter; so if you are one and if you find something out of place, kindly pardon but do point it out by all means so that I can rectify.

We are essentially creating a function as shown by the function() at the top. We are creating an object named “tracker” in which the first tracker (given by the index [0] of the array) within the “ga” object is being passed by leveraging the getAll() function. Once that is done, in the next step, we use the get method of the object named tracker to get the value of the property, “clientId”. Let us once check in the browser using Google Analytics Debugger Chrome extension what the value of this clientId looks like:

As you can see, it is under the console tab in the Inspect tools (on right click)

So now let us save the variable and move on to the preview mode. We don’t really need to set the tag because this is just a test right now and we don’t exactly have a use case for this.

Remember from the last article we had already discussed how the Google Tag Manager Preview mode looks a bit different now.

Once we have hit the Preview mode and loaded the page under consideration, we can check the different variables and guess what, the Custom Javascript Test variable is right where it’s supposed to be! Mission successful!

As you can see, it’s the same number given in the snapshot above from the browser itself.

Before we move towards wrapping up this piece, let us discuss a bit about Javascript in the context of GTM. As Simo Ahava points out, Javascript is the language in which the GTM library has been written, so it is extremely useful. However, one must be careful to note that you can’t just go about applying Javascript across the board — it must be done in the “context of a script”, to borrow Simo’s words. What it means is that you have to use Javascript in either the Custom HTML tag or Custom Javascript Macro, the latter being the one which we saw an example of in this article.

Another quick point I would like to make is about the difference between DOM Ready and Window Loaded. Once you run the GTM in Preview mode, you will find these at the start (after container loaded) in the left navigation panel. It is important to note the difference between the two because it will then help understand how exactly the browser loads and why some information may not be available at a particular step but becomes visible at a later one.

As you can already see, the window loaded step comes after the DOM Ready one. Intuitively, you might be thinking: “Hey it must mean that more elements get loaded at the Window Loaded state which were not loaded during the DOM Ready state.

If so, then you’re 100% right — Window load event gets fired when the entire web page has been loaded. Loading of the entire webpage means two things:

1. the DOM — or the Document Object Model, which includes all HTML tags like heading tags (h1, h2 etc), paragraph tags (p), anchor tag (a) etc. Here’s what it looks like according to w3schools:

It is basically organized as a tree of objects:

2. The dependent resources — like images, videos etc.

If you want a custom event to trigger after the page load is complete, i.e. on Window load, then the following syntax is needed:

window.onload = (event) => {
  // insert code here
};

In contrast, the jQuery ready() event gets fired when the DOM gets fully loaded. It DOES NOT wait for the other resources like images, videos etc to load. The following is its syntax:

$(document).ready(function () {
  //insert code here
});

So depending on your requirement, you have to set your code. In other words, if you want some code to fire only after everything gets loaded and has operations on the page content, including images etc, then use the window.onload. If you only need the basic structure like tags etc to load (i.e. the DOM), use the $document.ready() event.

Wrapping Up:

In this blog, we discussed some Intermediate GTM courses from CXL which focused on Javascript User Defined Variables. These only touched the surface of course — Javascript is an absolute ocean & I am beginning to generate interest and is actually making me confused whether I should spend more time on Javascript or on Python, the other language I am trying to learn for Data Science. See you next time!