LEARN

Explained… What actually is ‘Google Tag Manager’, what are ‘containers’ and what is the snippet code all about? 

Let’s start with understanding what a GTM container is…

 

GTM can be thought of as an online system which helps organise where your website or apps send data. Doing so helps you track user behaviour on your site via other platforms such as advertiser accounts.

After creating a Google Tag Manager account, you’ll next be prompted to create a container. This is simply a place that handles data online. It’s in this container where we can configure where data from your website is sent. GTM is like a traffic manager for data. You might send different signals and events to different apps, like your TikTok or Meta sales channels, so they can see what users are doing on your website.

The place where all of the ‘directions’ and various elements of setting up this traffic system is configured in the ‘container’.

If your brand has several domains, you might have a separate container for each site. Each container has a special container ID to make sure they are unique.

Every container has a special snippet of code that can be installed on a website. They are what measures user behaviour. Whenever a user interacts with elements of your website that you’ve configured GTM for, it’s this snippet of code which is loaded, therefore tracking user behaviour. This rounds up our explanation of what Google Tag Manager is used for, and what a container is.

For those who are interested in a more technical explanation of the script itself, please read on…

What the code does

The ‘container script’, which we add to the head (beginning section) of an HTML document, initialises Google Tag Manager and sets up a data layer. The data layer is a piece of JavaScript (JS) code which stores data for GTM to use to track events and collect data.

The nitty gritty of the GTM container script

The container script is code which contains a JavaScript function that fires when it’s read by the browser.

 

It looks like this:

<script>

(function(w,d,s,l,i){

 

w[l]=w[l]||[];w[l].push({‘gtm.start’:

new Date().getTime(),

event:’gtm.js’});

 

var f=d.getElementsByTagName(s)[0],

j=d.createElement(s),

dl=l !=’data layer’?’&l=’+l:”;

j.async=true;j.src=

‘https://www.googletagmanager.com/gtm.js?id=’+i+dl;f.parentNode.insertBefore(j,f);

})(window,document,’script’,’data layer’,’GTM-XXXXXX’);</script>

<!– End Google Tag Manager –>

 

Let’s break down the function bit by bit: 

The container function parameters

You can see 5 letters (parameters) that are passed to the function snippet below:

(function(w,d,s,l,i){

To understand function parameters, it might help for you to think back as far as high school maths where you substituted letters for numbers in a mathematical equation. Subsequently, in the case of JS and GTM, you substitute the parameters with arguments. It’s these arguments which are passed to the function by GTM. The above parameters are defined as follows:

  • w: global window object (your browser window)
  • d: global document object (the html document of the page)
  • s: a string representing the name of an HTML element
  • l: a string representing the name of the data layer
  • i: a string representing the GTM container ID

But don’t worry if all this seems overly technical right now.
With GTM, you don’t have to code any of this yourself. When you set up your own GTM account for your site, what you enter will automatically be converted into JS code. Next, paste this into your CMS or web file.

The data layer store

For the next part of the container snippet, we set up an array in the browser (‘[]’) to store data, which contains the data layer property key, denoted with an ‘l’ and which we have taken from the parameters passed in earlier.

 

w[l]=w[l]||[];w[l].push({‘gtm.start’:

new Date().getTime(),

event:’gtm.js’});

 

At w[l] we store an object with 2 key/value pairs: ‘gtm.start’ which has a value of the current time, and an event property. This has the value of a JS file, ‘gtm.js’.

 

Now that we have the data layer stored in the browser, GTM can access it with the above defined properties and any future-defined ones (e.g., another event or some metadata).

The GTM script source code

For the last bits of the code snippet, we define some JS variables to dynamically create a script source URL which is inserted into and runs on your webpage:

 

var f=d.getElementsByTagName(s)[0],

 

In this next snippet, a variable (var) f is defined and set to the first script tag coded in the web document (d). We get ‘s’ from the function parameters we mentioned earlier.

 

Next, we bring in another variable, j, and set this to a new element with the same script tag:

 

j=d.createElement(s),

 

This next part is a bit more complex. All we are doing is setting it up so that we can use it in the next part:

 

dl= l !=’data layer’?’&l=’+l:”;

 

Finally we set the script defined in the j variable to async, before setting the source of the script to the above URL, while making use of the variables declared earlier. 

 

j.async=true;j.src=

‘https://www.googletagmanager.com/gtm.js?id=’+i+dl;f.parentNode.insertBefore(j,f);

})(window,document,’script’,’data layer’,’GTM-XXXXXX’);</script>

<!– End Google Tag Manager –>

 

The URL contains an ID, which is a container ID that identifies the specific GTM container that the website owner has set up in the platform.

Wrapping it all up

In summary, it might look like there’s a lot going on there. But, it’s mainly configuration code to initialise what the user has already set up in GTM. This is so that the script runs for each argument and ID provided.

Want to learn more?

If you want to learn more, we’re always sending out advice, tricks and tips for developing your online presence, to our subscribers via our mailing list. If you have found this article helpful, we have plenty more to share, just fill out the form to sign-up!