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 you’ve created a Google Tag Manager account, you’ll be prompted to create a container. It 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, and each container has a special container ID to make sure they are unique.
Each container has a special snippet of code that can be installed on a website, which is 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, and therefore tracks 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 what function parameters are, it might help for you to think back as far as high school, where you substituted letters for numbers in a mathematical equation. And 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 which you paste 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, which 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, such as 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.
Then 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
For non-developers, 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, and so that the script runs for each argument and ID provided.