The Google Tag Manager snippet explained
If you make your money in online marketing, you’ve probably come across Google Tag Manager (GTM). It is a free tool from Google that allows you to implement marketing tags (e.g. Google Ads Conversion Tag, Floodlight tags) on a web page, without extensive programming knowledge and development resources.
To install the GTM, we just need to add a small code snippet in the <head> of the web page. But if you’re like me and don’t like implementing something on your site without really understanding it (at least a little bit), then this article is for you!
How the Snippet is built
This is the tutorial on how to install GTM on your site. Let’s take a closer look.
The first script is the champion and will enable all functionality. The second part is the <noscript> implementation of the GTM and will provide a very limited GTM container IF a user visits the site with Javascript disabled (which alone would prevent the first script from loading). However, nowadays almost no website works without javascript and therefore this snippet can be pretty much ignored.
Lets prettify the main snippet a bit and go through it line by line:
In line 3 and 16 we see that an anonymous function is defined and called. The parameters in line 3 are connected to the parameters in line 16 in the same order. Let’s look at the contents of this function:
Line 4:
When we write this line with the parameters provided on line 16 we get:
window['dataLayer'] = window['dataLayer'] || [];A logical OR assignment creates the dataLayer array variable, if it hasn’t been declared before. It is recommended to always declare the dataLayer in a safe way like this. Never use window[‘dataLayer’] = [] as this would overwrite any previous filling of the dataLayer.
Line 5–8:
Again, “translated” these lines read the following as follows:
window['dataLayer'].push({
'gtm.start': new Date().getTime(),
event: 'gtm.js'
});This will fill the dataLayer with the first piece of information — a key-value object with the timestamp (gtm.start) and the first event gtm.js.
If you choose a Page View trigger in the GTM, it will fire right now.
Line 9–11:
var f = document.getElementsByTagName('script')[0],
j = document.createElement('script'),
dl = l != 'dataLayer' ? '&l=' + l : '';The first line will search the whole page source code for the very first <script> element and save it in the variable f.
The second line will create a <script> element and save it in the variable j.
The third line: Google by default expects you to use the name ‘dataLayer’. In case you decide to use another name, you need to provide it in the snippet on line 16 (forth parameter). In case you decided to not make any changes to the dataLayer array (normal case) the variable dl will be an empty string. If you provide an own name (I would advise not to do this, unless there is a really good reason) the variable dl will have the value ‘&l=your_custom_name’. If you are interested how the line technically works, check out how conditional ternary operators work.
Line 12
j.async = true;This will cause our created <script> element to load while the page continues the parsing.
Line 13
j.src = 'https://www.googletagmanager.com/gtm.js?id=' + 'GTM-ABC123' + dl;This line will create the source url, that is the destination of the script request. In 99.9% of all cases dl will be an empty string (see above), therefore the final URL in this case will be:
https://www.googletagmanager.com/gtm.js?id=GTM-ABC123
Line 14
f.parentNode.insertBefore(j, f);This piece of code will insert the created script element before the variable f and thus make sure that the GTM script is the first script in the DOM.
This will cause the browser to load your specific GTM script as you have defined your tagging logic in the GTM interface.
Key takeaways
The GTM snippet is a neat piece of code which will
- declare the dataLayer
- push the initial Page View (or “Container loaded”) event into the dataLayer
- load your own GTM container script from Google servers
