CODEWITHSUNDEEP
javascript
Alexander Starbuck
Alexander Starbuck

Reputation: 1159

Google tag manager code explanation

Could someone please explain Google tag manager (container) code and help me learn:

<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],
var j = d.createElement(s),
var dl = l! = 'dataLayer' ? '&l=' +l : '' ;
j.async = true;
j.src = '//www.googletagmanager.com/gtm.js?id='+i+dl;
f.parentNode.insertBefore(j,f);
}
)
(window, document,'script','dataLayer','GTM-xxxxx');
</script>

Line:

  1. Why does it start with an open parenthesis? ("(function...") what are the 5 arguments w d s l i?

    1. Set the "L" element of the "w" array to itself OR to an empty array.
    2. Push an object into the last place of the w array, 2 properties and 2 values.
    3. Set var f to first element of the s array.
    4. Set var j to an element s (but what is the "d."?).
    5. Async loading true, all clear here.
    6. Javascript source, all clear here.
    7. Absolutely no clue what this one does, something related to the DOM?
    8. This seems to be the function call? First letters in the function prototype seem to correspond to the parameters inside these parentheses?

Also, how exactly does this code generate a dataLayer BEFORE itself if one isn't already present in the page html? I know it must come before this container code otherwise GTM can't use the data from the dataLayer.

Totally lost here so any help much appreciated!

Edit 2: I forgot one line completely and I'm having the most trouble deciphering this one:

var dl = l != 'dataLayer' ? '&l=' +l : '' ;

"IF variable dl (dataLayer?) is set to value l (dataLayer?) but there is no "dataLayer" THEN (something weird) + l (add dataLayer) ELSE nothing/empty string

Thanks!

Upvotes: 3

Views: 2656

Answers (2)

Sumner Evans
Sumner Evans

Reputation: 9155

Before I get to the explanation, I want to point out that this is minified code, that's why it's so hard to read. They did this so that they don't have to keep reusing the same values over and over again which takes up valuable bytes.

  1. a. why does it start with an open parenth? because they are encapsulating a function that is later called passing in (window, document,'script','dataLayer','GTM-xxxxx').

    b. what are 5 arguments w d s l i? they are passed in later in the code. They are window, document, script, dataLayer, and GMT-xxxxx, respectively.

  2. set the l element of the w array to itself OR to an empty array. if w[l] is defined, as an array already, don't override it. Otherwise, create it (you can't call array functions on an uninitialized array). What this is basically saying (after the values are passed in) is:

    window['dataLayer'] = window['dataLayer'] || []

  3. push an object into the last place of the w array, 2 properties and 2 values You have this one correct

  4. set var f to first element of the s array what this means is:

    var f = document.getElementsByTagName('script')[0]

    which will get the first script tag.

  5. set var j to an element s (but what is the d?) this actually means:

    var j = document.createElement('script')

  6. async loading true, all clear here these are pretty easy

  7. javascript source, all clear here again, easy

  8. absolutely no clue what this one does, something related to the DOM? this means:

    1. Get the f element's parent (that is, the encapsulating node) which in this case is probably the <head>
    2. insert the j element (which is a new <script>) before the f element

  9. this seems to be the function call? first letters in the function prototype seem to correspond to the parameters inside these parentheses? yes

Upvotes: 4

Paul S.
Paul S.

Reputation: 66364

1. why does it start with an open parenth.? ("(function...") what are 5 arguments w, d, s, l, i?

It's an IIFE, look at the invocation parenthesis (point 9) to see what the 5 args are

2. set the "L" element of the "w" array to itself OR to an empty array

w is window, l is 'dataLayer', so it's saying if (!window['dataLayer']) window['dataLayer'] = []; otherwise window['dataLayer'] = window['dataLayer']

3. push an object into the last place of the w array, 2 properties and 2 values

Yes.

4. set var f to first element of the s array

s is 'script', so f is being set to the first <script> in d, document

5. set var j to an element s (but what is the "d."?)

j is the result of calling document.createElement('script')

6. async loading true, all clear here

Setting properties on Element j

7. javascript source, all clear here

Great

8. absolutely no clue what this one does, something related to the DOM?

It's saying, from the first <script> in the document (which we called f), find it's .parentNode and then append our new <script> element j before f

9. this seems to be the function call? first letters in the function prototype seem to correspond to the parameters inside these parentheses?

This is the closing and invoking of the IIFE, so the things passed here correspond to the parameter names at the start

Also, how exactly does this code generate a dataLayer BEFORE itself if one isn't already present in the page html?

See point 2

Upvotes: 1

Related Questions