L’extrait de conteneur : les secrets de GTM révélés

<script type="text/javascript"> (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 =         '//www.googletagmanager.com/gtm.js?id=' + i + dl;     f.parentNode.insertBefore(j, f); })(window, document, 'script', 'dataLayer', 'GTM-P8XR'); </script>

mais je ne l’ai pas testé et je ne le recommande certainement pas.

La deuxième raison est simple : pour optimiser la collecte de données, l’extrait de code doit être le premier élément chargé lors du rendu du corps de la page. Étant donné que la bibliothèque est chargée de manière asynchrone, il n’y a aucune raison de la retarder. Faites-le donc charger en premier lorsque le corps est rendu, afin de ne pas risquer de perdre des données en raison d’éléments DOM lents retardant le chargement de la page.

Lignes 2 et 15

Nous pouvons ignorer les lignes 1 et 16, puisqu’il ne s’agit que de la balise HTML SCRIPT, enveloppant le bloc JavaScript.

(function (w, d, s, l, i) { ... })(window, document, 'script', 'dataLayer', 'GTM-P8XR'); 

Pour comprendre la première ligne, nous devons également regarder la dernière ligne. Ceci est un exemple d’un fonction anonyme auto-invoquante / auto-exécutableou alors expression de fonction immédiatement invoquée. Il y a un débat sur la sémantique du terme que vous devriez choisir, mais à cette fin, c’est juste ça : la sémantique.

Fondamentalement, la ligne 2 de l’extrait déclare une fonction anonyme (elle n’a pas de nom) avec cinq paramètres. Ces paramètres sont servis via l’appel de fonction à la fin du bloc fonction, qui a, comme il se doit, cinq arguments.

L’idée derrière une expression de fonction immédiatement invoquée est de appeler la fonction dès qu’elle a été déclarée. C’est le sujet des lignes 2 et 15 de l’extrait de code. La ligne 2 déclare une fonction qui est appelée à la ligne 15, dès que le code de la fonction a été parsé par votre navigateur.

Les arguments envoyés avec l’appel de fonction et transformés en paramètres dans la déclaration (les paramètres sont entre parenthèses) sont les suivants :

• fenêtre (w) – le la fenêtre l’objet représente la fenêtre ouverte dans le navigateur de l’utilisateur et tout ce qu’il contient (le modèle d’objet de document, ou DOM, par exemple)

• document (d) – le document objet est le nœud supérieur de l’arborescence DOM ; il contient tout le document HTML

• ‘script’ (s) – cette chaîne est utilisée pour charger le gtm.js bibliothèque (plus à ce sujet plus tard)

• ‘dataLayer’ (l) – cette chaîne est utilisée pour donner un nom à l’objet dataLayer ; vous pouvez renommer l’objet utilisé par GTM en changeant cette valeur

• ‘GTM-P8XR’ (i) – ceci est votre ID de conteneur, que vous obtiendrez de Google Tag Manager

Ligne 3

w[l] = w[l] || []; 

Si vous vous souvenez des paramètres et des arguments, cette ligne se traduit par :

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

Ici, la fonction recherche un objet nommé dataLayer (ou autre chose si vous l’avez renommé dans les arguments de la fonction) dans l’objet window, qui contient tous les objets de la page. S’il en trouve un, il le laisse. S’il n’en trouve pas, il le déclare vide déployer.

C’est important, parce que parfois vous verrez ceci déclaration explicite de l’objet dataLayer dans le modèle de page avant l’extrait de conteneur :

<script type="text/javascript">     dataLayer = []; </script>

La déclaration explicite de dataLayer est utile si vous avez besoin que certaines variables dataLayer soient disponibles le plus tôt possible dans vos balises GTM. Par exemple, si votre balise de vue de page nécessite l’existence d’une variable dataLayer (pour une dimension personnalisée, peut-être), il est préférable de la déclarer dans le modèle de page avant que l’extrait de conteneur :

<script>     dataLayer = [{'author': 'Simo Ahava'}]; </script>

Cette déclaration explicite est ce que le code de la ligne 3 de l’extrait de conteneur recherche. Si la déclaration explicite est trouvée, elle est laissée telle quelle. S’il n’a pas été déclaré, le l’extrait de conteneur crée l’objet dataLayer pour vous.

Cela m’amène à un point important.

Si vous ne déclarez pas explicitement l’objet dataLayer, faites NE PAS déclarez-le dans vos balises GTM ou après l’extrait de conteneur. Le conteneur crée le tableau dataLayer pour vous, et si vous essayez de le déclarer plus tard, vous finirez par effacement du dataLayer d’origine, créé et utilisé par GTM. Une fois que dataLayer a été créé, votre seule interaction avec celui-ci doit être en utilisant le pousser() méthode du tableau (dataLayer.push({‘property’: ‘value’});).

Lignes 4 à 7

w[l].push({     'gtm.start': new Date().getTime(),     event: 'gtm.js' }); 

Il s’agit d’une partie très importante de la fonctionnalité d’extrait de conteneur.

Lorsque le code atteint ce point, un dataLayer.push() l’appel est fait. Entre les accolades se trouve un objet littéral. Les littéraux d’objet sont des objets JavaScript, qui contiennent un nombre quelconque de paires clé-valeur (ou propriété-valeur ou variable-valeur), souvent au format JSON (JavaScript Object Notation). Ces objets sont entourés d’accolades et poussés à la fin du tableau dataLayer.

Si la majeure partie du paragraphe précédent est du charabia pour vous, je ne vous en veux pas.

Pour faire simple, avec un dataLayer.push()tu es pousser un objet avec des propriétés à la fin de la file d’attente dataLayer. Ces propriétés sont ensuite accessibles dans GTM.

Ce premier push, aux lignes 4 à 7 de l’extrait de conteneur, contient un objet avec les propriétés suivantes :

• Clé 1 : ‘gtm.start’ – Valeur 1 : Nouvelle date.getTime()

• Clé 2 : un événement – Valeur 2 : ‘gtm.js’

Donc, si vous vous êtes déjà demandé quand les balises avec {{event}} est égal à gtm.js ou alors {{url}} correspond à regex .* se faire virer, c’est à ce stade.

Le gtm.start La propriété reçoit l’heure actuelle (en millisecondes depuis le 1er janvier 1970) comme valeur. Brian Kuhn de Google a expliqué que cela est utilisé pour calculer le temps de chargement de gtm.js et le taux d’accès au cache de la requête, alors ne vous inquiétez pas.

Lignes 8 à 10

var f = d.getElementsByTagName(s)[0],     j = d.createElement(s),     dl = l != 'dataLayer' ? '&ampamp;l=' + l : ''; 

Ouvrons cela à nouveau, en utilisant les paramètres et les arguments que nous connaissons déjà :

var f = document.getElementsByTagName('script')[0],     j = document.createElement('script'),     dl = 'dataLayer' != 'dataLayer' ? '&ampamp;l=' + 'newDataLayer' : ''; 

La première ligne stocke le premier élément SCRIPT de la page dans la variable F.

La deuxième ligne crée un nouvel élément SCRIPT et le stocke dans la variable j.

La troisième ligne fait l’une des deux choses possibles. Si vous n’avez pas touché le nom par défaut de l’objet dataLayer (c’est-à-dire ‘dataLayer’), seule une chaîne vide est stockée dans la variable dl. Cependant, si vous avez choisi de renommer le dataLayer (par exemple ‘newDataLayer’), la chaîne ‘&l=newDataLayer’ est stockée dans la variable dl. & est identique à l’esperluette (&), mais il a été encodé car certaines plates-formes ne peuvent pas traiter les caractères ASCII non encodés.

Ces variables seront utilisées dans les lignes suivantes.

Lignes 11 à 13

j.async = true; j.src =     '//www.googletagmanager.com/gtm.js?id=' + i + dl; 

Et embellissons celui-ci également :

j.async = true; j.src = '//www.googletagmanager.com/gtm.js?id=GTM-P8XR'; 

Rappelez-vous, dans le dernier chapitre, vous venez de créer un nouvel élément SCRIPT et de le stocker dans la variable j? Dans ces lignes, vous y ajoutez des attributs. L’ID de conteneur est extrait du paramètre de fonction je, et il était à l’origine passé comme argument dans l’appel de fonction auto-invoquant (vous vous en souvenez !). Allez voir si vous ne me croyez pas.

Notez que la dernière ligne peut sembler différente si vous choisissez de renommer votre dataLayer. Dans ce cas, ce serait en fait l’équivalent de ceci:

j.src = '//www.googletagmanager.com/gtm.js?id=GTM-P8XR&l=newDataLayer'; 

Cela signifie que si vous avez renommé votre objet dataLayer, ce nouveau nom est passé comme valeur du paramètre de requête je avec la demande de chargement de la bibliothèque gtm.js depuis les serveurs GTM.

Quoi qu’il en soit, le but de ces lignes est de transformer l’élément SCRIPT que vous avez stocké en variable j ressembler à ceci :

<script type="text/javascript" async src="//www.googletagmanager.com/gtm.js?id=GTM-P8XR"></script>

Donc, en gros, vous venez de créer une balise SCRIPT qui charge le fichier externe gtm.js library avec votre ID de conteneur (et votre dataLayer renommé, si vous l’avez fait) comme paramètres de requête.

Ligne 14

f.parentNode.insertBefore(j, f); 

Rappelez-vous quelques chapitres en arrière quand variable F a été défini comme la première balise SCRIPT du document ? Cette ligne effectue les opérations suivantes :

• Recherchez la première balise SCRIPT sur la page

• Juste avant cela, insérez la nouvelle balise SCRIPT qui charge gtm.js (du chapitre précédent)

Ainsi, le code de la ligne 14 de l’extrait de conteneur garantit que le chargeur GTM est la première balise SCRIPT de la page.

Et voilà ! Lisez à l’avance pour un bref résumé de ce qui vient de se passer.

conclusion

Voici un bref récapitulatif de ce que fait l’extrait de conteneur :

1. Déclare une fonction anonyme avec cinq paramètres (le nom de l’objet dataLayer et votre ID de conteneur, entre autres)

2. Crée le tableau dataLayer, si vous ne l’avez pas fait explicitement avant l’extrait de conteneur

3. Pousse le premier événement, gtm.jsdans dataLayer, ainsi que l’heure à laquelle l’envoi a été effectué

4. Crée une nouvelle balise SCRIPT, qui charge le gtm.js Bibliothèque JavaScript avec votre ID de conteneur (et le nom d’objet dataLayer personnalisé) comme paramètres

5. Ajoute ce nouveau SCRIPT au modèle de page, de sorte qu’il s’agisse de la première balise SCRIPT sur la page

6. Une fois la fonction déclarée, la fonction est automatiquement exécutée

En fin de compte, c’est un morceau de code assez simple. En fait, tout ce qu’il fait est de créer (ou de vérifier) ​​l’objet dataLayer, de pousser le premier événement (nommé ‘gtm.js’) dans dataLayer et de charger la bibliothèque externe gtm.js qui traite votre conteneur.

Et c’est l’histoire de l’extrait de conteneur.

Prochaine étape : ingénierie inverse de l’intégralité de la bibliothèque gtm.js (JUST KIDDING !).