Google Tag Manager : Écouteur DOM

Dans cet article, je vais vous expliquer comment créer une extension Google Tag Manager. Cette extension sera un nouvel écouteur, dont le seul travail est d’écouter les changements dans le balisage HTML et CSS de la page.

La raison pour laquelle je vous apprends à créer un écouteur DOM est simple. Très souvent, je rencontre des personnes qui demandent de l’aide, mais elles sont incapables de toucher le code sur la page. Habituellement, le problème est amplifié avec les gestionnaires de formulaires, car les développeurs ont peut-être installé un gestionnaire de formulaires jQuery personnalisé, par exemple, qui refuse simplement de coopérer avec les écouteurs de formulaires de GTM. C’est pourquoi vous voudrez peut-être déclencher un événement GTM lorsqu’un certain message apparaît à l’écran, par exemple.

Avec un écouteur DOM, vous pouvez déclencher un événement GTM chaque fois que quelque chose change sur la page. Et bien non à chaque fois. En fait, dans cet exemple, vous êtes limité à l’insertion d’éléments et aux modifications d’attributs. Un cas d’utilisation fonctionnel pourrait être la validation de formulaire : si vous souhaitez suivre les formulaires non valides, peut-être en envoyant le contenu du message d’erreur de validation avec un événement, vous pouvez tout aussi bien créer un écouteur DOM. Cet écouteur se déclenchera alors lorsqu’un message d’erreur apparaîtra sur la page.

CLAUSE DE NON-RESPONSABILITÉ: Pour être honnête, je suis très attaché à l’utilisation de hacks comme celui-ci pour corriger un balisage défectueux ou une implémentation de balise par ailleurs de mauvaise qualité. L’idée principale derrière cet article est d’introduire une fonctionnalité de JavaScript qui peut atténuer certaines de vos difficultés de gestion des balises. Cependant, si vous trouvez que vous avez besoin de hacks tels que l’écouteur DOM pour contourner les problèmes de développement sur votre site Web, je vous suggère fortement d’en discuter avec vos développeurs et d’essayer de trouver une solution qui fonctionne avec les fonctionnalités standard de GTM.

La prémisse

Pour créer l’écouteur DOM, je vais tirer parti d’une API appelée MutationObserver. Ce petit morceau de magie va créer un objet observateur, qui se déclenche à chaque fois qu’un mutation se déroule. Cette mutation peut prendre différentes tailles et formes, mais pour les besoins de ce guide, j’écouterai deux types de mutations, pour deux types de cas d’utilisation :

1. Insertion de nœud – lorsqu’un nouveau <span class="error"> est injecté dans le DOM

2. Changement de style CSS – lorsqu’un élément précédemment masqué <span class="error"> est affiché

Ainsi, le premier cas d’utilisation est lorsque votre formulaire injecte un nouvel élément SPAN dans le DOM en cas d’erreur. Le script vérifiera si le nœud injecté est vraiment le message d’erreur, et si c’est le cas, il pousse un événement dataLayer avec le contenu du SPAN (le message lui-même).

Le deuxième cas d’utilisation est lorsqu’un formulaire invalide fait apparaître un SPAN masqué, avec le message d’erreur à l’intérieur.

L’écoute de l’insertion d’un nœud est un peu différente de l’écoute d’un changement d’attribut. Un écouteur d’insertion de nœud peut être amorcé sur n’importe quel nœud du DOM, ce qui signifie que vous avez beaucoup plus à travailler en termes de flexibilité. L’écoute des changements d’attribut nécessite que vous identifiiez exactement le nœud que vous souhaitez observer, et le changement d’attribut sera signalé pour ce nœud uniquement.

Les préparatifs

Voici les ingrédients :

1. Une page où un <span class="error"> est soit inséré soit révélé avec un changement de style CSS

2. Balise(s) HTML personnalisée(s)

Le code de ma page de test ressemble à ceci (j’ai combiné les deux cas d’utilisation en un seul ici):

<script> function addHTML() {   var myDiv = document.getElementById("contents");   var newSpan = document.createElement("span");   newSpan.className = "error";   newSpan.innerHTML = "This form contained errors";   myDiv.appendChild(newSpan); } function changeCSS() {   var mySpan = document.getElementsByClassName("error")[0];   mySpan.style.display = "block"; } </script> <a href="#" onClick="addHTML();">Add span with .innerHTML</a> <a href="#" onClick="changeCSS();">Add span with CSS</a> <div id="contents">   <span class="error" style="display: none;">This form contained errors</span> </div>

Parcourons rapidement cette page.

Tout d’abord, vous avez deux fonctions. La fonction addHTML() insèrera ce qui suit dans le DIV#contenu ci-dessous :

<span class="error">This form contained errors</span>

L’insertion se fait en cliquant sur un lien dont le texte est “Ajouter une étendue avec .innerHTML”.

Dans la deuxième fonction, le SPAN.error est déjà dans le DOM, mais il a été caché avec un affichage : aucun Commande CSS. Lorsque le lien intitulé “Ajouter une étendue avec CSS” est cliqué, cette directive de style sera remplacée par bloc de visualisation.

Ceci est juste ma page de test. Évidemment, vous devrez naviguer dans votre implémentation actuelle pour que les choses fonctionnent.

Enfin, vous aurez besoin de votre magie HTML personnalisée. Les deux prochains chapitres passeront en revue les balises et le code que vous devrez écrire pour elles.

Cas 1 : insertion de nœud

Dans ce cas d’utilisation, un nouveau nœud (<span class="error">) est inséré dans un DIV sur la page. Le balisage sur la page ressemble à ceci :

<script> function addHTML() {   var myDiv = document.getElementById("contents");   var newSpan = document.createElement("span");   newSpan.className = "error";   newSpan.innerHTML = "This form contained errors";   myDiv.appendChild(newSpan); } </script> <a href="#" onClick="addHTML();">Add span with .innerHTML</a> <div id="contents"> </div>

Donc, comme vous pouvez le voir, il y a un DIV vide (#contents), qui est ensuite ajouté avec un nouveau SPAN, créé par la fonction addHTML() qui, à son tour, attend un événement click sur le lien de la page.

Maintenant, l’étape suivante consiste à créer l’écouteur lui-même. Vous devrez utiliser l’API MutationObserver pour écouter tout nœud inséré dans la cible observée. Le nœud lui-même peut être à n’importe quel niveau de la hiérarchie DOM, mais j’ai choisi le DIV#contents pour garder les choses simples. Lorsqu’un nœud est inséré, un push dataLayer est effectué avec un nouvel événement GTM et le contenu textuel du SPAN.

Voici à quoi devrait ressembler votre balise HTML personnalisée :

<script>   var contentDiv = document.querySelector("#contents");   var MutationObserver = window.MutationObserver || window.WebKitMutationObserver;   var observer = new MutationObserver(function(mutations) {     mutations.forEach(function(mutation) {       if(mutation.type==="childList" && mutation.addedNodes[0].className==="error") {         dataLayer.push({'event': 'newErrorSpan', 'spanErrorMessage': mutation.addedNodes[0].innerHTML});         observer.disconnect();       }     });       });   var config = { attributes: true, childList: true, characterData: true }   observer.observe(contentDiv, config); </script>

OK, OK, il se passe plein de choses ici. Passons en revue le script et voyons ce qu’il fait. Tout d’abord, vous créez une référence au DIV que vous allez écouter. j’utilise le querySelector() fonction, car c’est un bon moyen de combiner les sélecteurs CSS et JavaScript.

Ensuite, vous créez le MutationObserver lui-même en vous attaquant d’abord à un problème connu entre navigateurs avec les navigateurs WebKit. L’observateur écoute les mutations de type liste d’enfants (un nouveau nœud enfant est inséré) et vérifie si le premier nœud ajouté a une classe CSS “error”. Vous devrez modifier ce code si le SPAN avec l’erreur n’est pas le premier nœud que votre script insère dans le DOM.

Si une telle mutation est détectée, un événement GTM est poussé dans dataLayer (newErrorSpan), et le contenu du message d’erreur est également envoyé en tant que variable de couche de données. A noter que j’utilise innerHTML pour obtenir le contenu du SPAN. Si votre SPAN contient un formatage HTML, vous voudrez peut-être utiliser Texteintérieur au lieu.

La déconnexion signifie qu’après cette mutation particulière, aucune autre mutation n’est écoutée. Ainsi, si quelqu’un continue d’appuyer sur le bouton “soumettre”, l’observateur s’éteindra après la première erreur. Vous voudrez peut-être supprimer cette ligne si vous souhaitez suivre TOUTES les erreurs potentielles que votre visiteur propage sur le formulaire.

Enfin, je crée une configuration pour le MutationObserver et l’amorce sur le DIV.

Et c’est tout pour l’insertion de nœud. Si vous configurez ce nouvel écouteur pour qu’il se déclenche sur les pages où le SPAN avec la classe “error” est créé dans un DIV avec l’ID “content”, un dataLayer.push() aura lieu chaque fois que le SPAN est inséré dans le DOM. Essayez-le par vous-même !

Cas 2 : changement CSS

Dans ce cas, vous avez un SPAN masqué avec le message d’erreur, qui est ensuite révélé lorsque la validation du formulaire échoue. Voici à quoi pourrait ressembler le code HTML :

<script> function changeCSS() {   var mySpan = document.querySelector(".error");   mySpan.style.display = "block"; } </script> <a href="#" onClick="changeCSS();">Add span with CSS</a> <div id="contents">   <span class="error" style="display: none;">This form contained errors</span> </div>

J’ai donc un simple SPAN dans un DIV avec le message d’erreur. Celui-ci est initialement réglé sur affichage : aucunmais lorsque le lien est cliqué, l’état d’affichage passe à bloquer.

En ce qui concerne votre balise HTML personnalisée, vous aurez besoin de quelque chose comme ceci :

<script>   var spanError = document.querySelector('.error');   var MutationObserver = window.MutationObserver || window.WebKitMutationObserver;   var observer = new MutationObserver(function(mutations) {     mutations.forEach(function(mutation) {       if (mutation.type==="attributes" && mutation.target.style.display==="block") {         dataLayer.push({'error': 'modErrorSpan', 'spanErrorMessage': mutation.target.innerHTML});         observer.disconnect();       }     });       });   var config = { attributes: true, childList: true, characterData: true }   observer.observe(spanError, config); </script>

Il est assez similaire au précédent mais avec un ou deux petits changements. Tout d’abord, vous n’écoutez pas le DIV, vous écoutez le nœud réel dont vous savez qu’il sera la cible du changement de style. Ceci est important, et cela signifie que vous devez savoir exactement quelle sera la cible lors de la création de ce script.

Ensuite, dans l’observateur lui-même, vous devrez spécifier exactement quel était le changement de style. J’ai utilisé simplement un changement de affichage : aucun à bloc de visualisation, mais vous pourriez avoir quelque chose de différent dans votre code. N’oubliez donc pas de modifier le contenu de la clause if pour qu’il corresponde au nouveau style.

L’avantage ici est que vous n’écoutez qu’un seul nœud, ce qui améliore les performances. j’ai le observer.disconnect(); encore une fois, mais vous voudrez peut-être supprimer cela si vous souhaitez envoyer des événements perpétuellement pour chaque clic invalide sur le bouton d’envoi.

N’oubliez pas de tester.

conclusion

Cela peut vous sembler un hack cool. Après tout, vous êtes à l’écoute des modifications apportées à la page sans qu’aucune actualisation de la page ne se produise ! De plus, vous étendez les écouteurs par défaut de GTM, vous êtes donc un peu comme un ingénieur Google, n’est-ce pas ?

Eh bien, rappelez-vous ce que j’ai dit dans l’avertissement de ce texte. Il s’agit d’un piratage, d’un contournement, d’un pansement, conçu pour surmonter les problèmes avec votre balisage ou votre JavaScript. Avoir un gestionnaire de formulaire personnalisé qui ne propage pas un événement de soumission de formulaire approprié (qui est requis par l’écouteur de soumission de formulaire par défaut de GTM) est un peu suspect et pue les mauvaises pratiques. Donc, avant de recourir à cet écouteur DOM, assurez-vous d’avoir épuisé toutes les autres possibilités plus orthodoxes avec vos développeurs.

Là encore, vous n’en aurez peut-être pas besoin pour résoudre les problèmes de développement, mais plutôt pour compléter votre configuration de balise actuelle. Dans ce cas, deviens fou ! C’est un excellent moyen d’ajouter plus de flexibilité à vos balises. Notez cependant la prise en charge de plusieurs navigateurs. La prise en charge n’est pas suffisamment complète pour justifier l’utilisation de cet écouteur comme règle de déclenchement pour certaines balises critiques pour l’entreprise.