Let’s start with understanding what a GTM container is…
Google Tag Manager (GTM) is an online system that organizes and manages 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 create a Google Tag Manager account, the system prompts you 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 container is where you configure all the directions and elements for setting up this traffic system.
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 configured elements on your website, this snippet of code loads to track their behaviour. This rounds up our explanation of Google Tag Manager and the role of a container.
For those who are interested in a more technical explanation of the script itself, please read on…
What the code does
The ‘container script’, is added to the head (beginning section) of an HTML document. This initialises Google Tag Manager and sets up a data layer. The data layer is a piece of JavaScript (JS) code. This stores data for GTM to use, track events and collect data.
The nitty gritty of the GTM container script
The container script is a piece of code. This includes a JavaScript function, which runs as soon as the browser reads it.
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>
Let’s break down the function bit by bit:
The container function parameters
GTM passes these arguments to the function. The parameters above are defined as follows:
(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. GTM passes these arguments to the function and defines the parameters 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, the system automatically converts your input into JavaScript 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. This contains the data layer property key. It is 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
In the final part of the code snippet, we define JavaScript variables to dynamically create a script source URL. We then insert it into the webpage, and it runs here.
var f=d.getElementsByTagName(s)[0],
In this snippet, the code defines a variable (var) f and sets it to the first script tag in the web document (d). The function parameters mentioned earlier provide the ‘s‘. 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. We do this 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. If you need further information, or you’d like to speak to an expert, don’t hesitate to reach out to the contacts in the footer of our website. We offer first party data management services; if you’re considering server-side tracking contact us to audit your current set-up! We’ve also launched Lupe, our exciting new software allowing this process to be simplified, compliant and continuously maintained.
s
