Google Tag Manager (GTM) is a powerful tool that allows website owners to easily add and manage marketing and analytics tags on their website without having to modify the website’s code directly. By using GTM, website owners can track events, gather information about their visitors, and optimize their marketing campaigns more effectively.

To use GTM on a website, you need to add a small snippet of JavaScript code to the website’s HTML. This code initializes the GTM system and sets up the data layer, which is an object that stores data that can be used by GTM and other tools to track events and gather information about the website’s visitors.

Here is an example of the code that you need to add to your website to implement GTM:

 
<!-- Google Tag Manager -->
<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!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXX');</script>
<!-- End Google Tag Manager -->

<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

A simple copy-paste and you are all done. However, considering the capabilities of the tool, the question of “what does this script actually do?” often appears.

In this blog post, we’d review the code and break it down into pieces.

The code begins by creating a function that takes five arguments: w, d, s, l, and i . The function then sets up an array in the global w object with the property l (which stands for “data layer”), or creates a new array if the property does not already exist. The function then pushes an object containing the current time and the string “gtm.js” to the array.

The function then creates a new script element , sets its src attribute to the URL of the GTM JavaScript file, and appends it to the element of the HTML document. The id parameter passed to the GTM JavaScript file is the GTM container ID that identifies the specific GTM container that the website owner has set up in the GTM interface.

When the GTM JavaScript file is loaded and executed, it initializes the GTM system on the website and sets up the data layer. The data layer is an object that stores data that can be used by GTM and other tools to track events and gather information about the website’s visitors.

The code also includes a noscript element that displays a message if JavaScript is disabled in the user’s browser. This is because GTM requires JavaScript to function properly.

And to break it down line by line, here’s the original code with added comments:

<!-- Google Tag Manager -->
<script>
  (function(w, d, s, l, i) {
    // Define the function and its arguments:
    // w: the global window object
    // d: the global document object
    // s: a string representing the name of an HTML element (in this case, "script")
    // l: a string representing the name of the data layer (in this case, "dataLayer")
    // i: a string representing the GTM container ID
    
    // Set up the data layer array in the global window object:
    w[l] = w[l] || [];  // If the data layer array does not exist, create a new empty array
    w[l].push({'gtm.start': new Date().getTime(), event: 'gtm.js'});
    
    // Create a new script element:
    var f = d.getElementsByTagName(s)[0];  // Get the first script element in the document
    var j = d.createElement(s);  // Create a new script element
    var dl = l != 'dataLayer' ? '&l=' + l : '';  // If the data layer name is not "dataLayer", append it to the URL as a query parameter
    
    // Set the script element's attributes:
    j.async = true;  // Set the async attribute to true, which means that the script will be executed asynchronously
    j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl;  // Set the src attribute to the URL of the GTM JavaScript file, including the GTM container ID and the data layer name (if applicable) as query parameters
    
    // Insert the script element before the first script element in the document:
    f.parentNode.insertBefore(j, f);
  })(window, document, 'script', 'dataLayer', 'GTM-XXXXXX');
</script>
<!-- End Google Tag Manager -->

Simple, yet very effective.

With your developer questions now answered, you can go ahead and start building your tracking setup!