{"id":171654,"date":"2025-04-05T03:33:30","date_gmt":"2025-04-05T03:33:30","guid":{"rendered":"https:\/\/peraltafinancing.com\/analytics\/the-container-snippet-gtm-secrets-revealed\/"},"modified":"2025-04-05T03:33:30","modified_gmt":"2025-04-05T03:33:30","slug":"the-container-snippet-gtm-secrets-revealed","status":"publish","type":"post","link":"https:\/\/fivemor.com\/?p=171654","title":{"rendered":"The Container Snippet: GTM Secrets Revealed"},"content":{"rendered":"


\n<\/p>\n

\n
\n

First of all, I\u2019m sorry for the wacky title. Sometimes I just want to amuse myself. Nevertheless, this post is<\/em> about the Google Tag Manager<\/a> container snippet. There\u2019s nothing secretive about it, but I\u2019m betting many people have no clue what the snippet really does. That\u2019s the revelatory part.<\/p>\n

If you\u2019ve never wondered what the snippet does, then shame on you! Remember, you own your page template. It\u2019s yours. Any code that you write there is your responsibility. You wouldn\u2019t let a complete stranger come to your house and paint your walls without permission, would you? So why copy-paste some code that you have no idea what it does? Because Google told you to?<\/p>\n

\n

<\/p>\n

\"Google's<\/p>\n

<\/a><\/p>\n<\/div>\n

Well, you can trust Google (stop laughing!). There\u2019s nothing nefarious about the container snippet. Regardless, I wrote this post to tell you what it does, so that you can sleep better at night. Or you might learn something new about JavaScript (never a bad thing).<\/p>\n

Note that this text should be understandable to JavaScript novices as well, but if you feel daunted at any time, you can just skip ahead to the last chapter. Within is a short recap of what the container snippet does.<\/p>\n

So sit back (but lean forward), and enjoy another one of life\u2019s great mysteries unravelled.<\/p>\n


\n X<\/span><\/p>\n

\n
\n The Simmer Newsletter<\/strong>\n <\/p>\n

\n Subscribe to the Simmer newsletter<\/a> to get the latest news and content from Simo Ahava into your email inbox!\n <\/p>\n

<\/span><\/p>\n

The container snippet<\/h2>\n

You should know what the container snippet is by now. It\u2019s the piece of code that Google Tag Manager requires that you add to your page template<\/a>, right after the opening tag. You know, this (from my site):<\/p>\n

\n

<\/p>\n

\"Container<\/p>\n

<\/a><\/p>\n<\/div>\n

(I left out the <\/code> part, because this post is just about the JavaScript snippet.)<\/p>\n

Let\u2019s face it, the snippet code looks gibberish. This is because the JavaScript (that\u2019s right, it\u2019s JavaScript) is minified<\/em>. Minification is the process of truncating the script to the smallest possible size without losing any data. This means removing whitespace (spaces and line breaks), and reducing variable and function names to single- or double-character length. Minification is done because every single character adds to the page size, and thus to the page load time. The benefit with something as small as the container snippet is negligible, but it is still observed as a best practice.<\/p>\n

Because I want this post to add some value, allow me to perform a little makeover to the snippet.<\/p>\n

\n
script type<\/span>=\"text\/javascript\"<\/span>>\n(function<\/span> (w, d, s, l, i) {\n    w[l] = w[l] || [];\n    w[l].push({\n        'gtm.start'<\/span>: new<\/span> Date<\/span>().getTime(),\n        event: 'gtm.js'<\/span>\n    });\n    var<\/span> f = d.getElementsByTagName(s)[0<\/span>],\n        j = d.createElement(s),\n        dl = l != 'dataLayer'<\/span> ? '&l='<\/span> + l : ''<\/span>;\n    j.async = true<\/span>;\n    j.src =\n        '\/\/www.googletagmanager.com\/gtm.js?id='<\/span> + i + dl;\n    f.parentNode.insertBefore(j, f);\n})(window<\/span>, document<\/span>, 'script'<\/span>, 'dataLayer'<\/span>, 'GTM-P8XR'<\/span>);\nscript<\/span>><\/code><\/pre>\n<\/div>\n
That\u2019s better! It\u2019s the same code but with some basic formatting. Much easier to read and understand, right?<\/p>\n
Positioning the container snippet<\/h2>\n
You might have wondered why Google so forcefully recommends that you place the container snippet just after the opening  tag. There are two good reasons to do so.<\/p>\n
First, if you add the <\/code> tag as well (as you should), this should always be in the body of the document. The tag (which is shown for browsers without JavaScript enabled) contains an iFrame which loads the GTM library. If you add the <\/code> tag into the head of your document, it can perform pretty wildly with some browsers. You could<\/em> experiment with leaving the <\/code> in the body, and placing the JavaScript in the <\/p>\n<\/div>\n
, but I haven\u2019t tested it and certainly don\u2019t recommend it.<\/p>\n
The second reason is simple: to maximize data collection, the snippet should be the first thing loaded when the body of the page is rendered. Because the library is loaded asynchronously, there\u2019s no reason to delay it at all. So have it load as the first thing when the body is rendered, so that you don\u2019t risk losing any data due to sluggish DOM elements delaying the page load.<\/p>\n
Lines 2 and 15<\/h3>\n
We can skip lines 1 and 16, since they\u2019re just the HTML SCRIPT tag, wrapping the JavaScript block.<\/p>\n
\n
(function<\/span> (w, d, s, l, i) {\n...\n})(window<\/span>, document<\/span>, 'script'<\/span>, 'dataLayer'<\/span>, 'GTM-P8XR'<\/span>);\n<\/code><\/pre>\n<\/div>\n
Basically, line 2 of the snippet declares an anonymous function (it has no name) with five parameters<\/em>. These parameters are served via the function call at the end of the function block, which has, as it should, five arguments<\/em>.<\/p>\n
The whole idea behind an immediately-invoked function expression is to call the function as soon as it has been declared<\/strong>. That\u2019s what lines 2 and 15 of the snippet are about. Line 2 declares a function which is called in line 15, as soon as the function code has been parsed by your browser.<\/p>\n
The arguments that are sent with the function call, and turned into parameters in the declaration (the parameters are in parentheses), are as follows:<\/p>\n
To understand the first line, we have to look at the last line as well. This is an example of a self-invoking \/ self-executing anonymous function<\/em>, or immediately-invoked function expression<\/em>. There\u2019s some debate on the semantics<\/a> of which term you should choose, but for this purpose it\u2019s just that: semantics.<\/p>\n