Amusez-vous avec Google Tag Manager : 1re partie

Il est temps de creuser dans ma bibliothèque de conseils pour découvrir des choses plutôt intéressantes que vous pouvez faire avec Google Tag Manager pour améliorer le balisage de votre site. Certains d’entre eux sont de la magie macro de bout en bout, certains d’entre eux sont des pratiques exemplaires, et certains d’entre eux sont des choses qui vous faciliteront la vie tout en gérant une solution de gestion des balises.

J’ai divisé ce post en deux parties pour le rendre plus Hobbit et moins Seigneur des Anneaux dans le sens de la longueur.

Voici ce que vous trouverez dans cette première partie :

1. Délier jQuery

2. Les champs non définis ne sont pas envoyés à GA

3. Suivre l’événement de copie

4. Les erreurs en tant qu’événements

Gardez les yeux ouverts pour la deuxième partie.

Je sais, l’anticipation vous tue probablement.

1. Délier jQuery

Je ne suis pas un grand fan de jQuery. Je veux dire, c’est vraiment utile, car cela simplifie une grande partie de la syntaxe difficile et sujette aux erreurs qu’implique le JavaScript complexe. En même temps, j’aime les défis complexes et apprendre à la dure a définitivement fait de moi un meilleur développeur.

D’après mon expérience, et c’est certainement un très vue marginale, jQuery introduit un certain degré de, euh, négligence. Je sais que l’argument “c’est trop facile” est infantile, mais dans certains cas, le manque de transparence sur ce qui se passe réellement dans le code peut inviter à un travail de développement assez médiocre. D’une certaine manière, jQuery consiste plus à lire un manuel qu’à créer du code, et ça craint. Surtout avec les gestionnaires d’événements, certaines décisions de développement sont clairement influencées par la facilité avec laquelle il est possible de lier les gestionnaires aux éléments.

Pour Google Tag Manager, cela n’est que trop familier. Un inoffensif return false; ou alors e.stopPropagation() empêchera vos écouteurs GTM de récupérer l’événement DOM. Souvent, la seule raison pour laquelle la propagation est annulée comme celle-ci est le fait que le code a été copié-collé à partir d’une discussion Stack Overflow sans aucun rapport avec le balisage de votre site Web.

OK, désolé pour le coup de gueule. Voici ce que je propose. Chaque fois que votre écouteur GTM ne se déclenche pas quand il le devrait, ouvrez la console JavaScript et tapez-y la ligne de code suivante…

if(typeof(jQuery)!=='undefined'){jQuery('body').find('*').off();} 

… et appuyez sur entrée. Ensuite, essayez de cliquer ou de soumettre à nouveau le formulaire.

Ce que fait cette simple ligne, c’est qu’elle délie tout Gestionnaires d’événements jQuery de tous les éléments HTML du corps du document. Si votre écouteur GTM fonctionne après cela, cela signifie qu’il y a un script jQuery interférant. L’étape suivante consiste à trouver le script problématique et à demander à votre développeur de le corriger afin que la propagation ne soit pas empêchée.

(Assurez-vous de consulter mon extension Chrome, où cette fonctionnalité est facilement accessible en un clic !).

Ou vous pouvez choisir la route du pirate. Si vous trouvez le script interférant, et si vous trouvez la fonction qui capte vos clics ou vos soumissions et empêche la propagation, vous pouvez utiliser une balise HTML personnalisée pour y remédier.

REMARQUE! C’est un pirater. Assurez-vous de tester, tester et TESTER avant de publier un conteneur dans lequel vous dissociez jQuery. De plus, cela ne ferait pas de mal de consulter quelqu’un qui comprend exactement quels gestionnaires d’événements sont utilisés sur le site.

Supposons que vous ayez un bouton Retour en haut qui n’envoie pas de clics aux auditeurs de GTM. Vous trouvez le code dans l’un des éléments de la page, et il ressemble à ceci :

jQuery('.top-of-page, a[href="#top"]').click(function () {   jQuery('html, body').animate({     scrollTop: 0   }, 400);   return false; }); 

Comme vous pouvez le voir, le redoutable return false; y a-t-il. C’est ce qui empêche les événements de grimper dans l’arborescence DOM.

Pour résoudre ce problème, créez une nouvelle balise HTML personnalisée contenant le code suivant :

<script>   jQuery('.top-of-page, a[href="#top"]').off('click');   jQuery('.top-of-page, a[href="#top"]').click(function(e) {     e.preventDefault();     jQuery('html, body').animate({       scrollTop: 0     }, 400);   }); </script>

Si jQuery et le script problématique sont chargés dans le <head> de votre modèle, vous pouvez activer cette balise {{url}} correspond à RegEx .*. S’ils sont chargés ailleurs (comme dans le pied de page de votre page), vous aurez peut-être besoin d’une autre règle d’événement telle que {{event}} est égal à gtm.load.

Sur la première ligne, je dissocie le gestionnaire de clic d’origine. Ensuite, j’ajoute e comme argument de la nouvelle fonction click. Cette e contient l’objet événement, et je peux alors utiliser son preventDefault() méthode pour arrêter l’action originale du clic sans pour autant arrêter sa propagation. Enfin, j’enlève le return false; à partir de la fin de la fonction.

Naturellement, vous devrez tester, tester, tester et tester encore plus si ce hack décompose tout votre site ou non.

Bien sûr, jQuery n’est pas le seul à interférer avec vos auditeurs. Il peut s’agir de JavaScript vanille ou d’une autre bibliothèque. Ce chapitre se concentre sur jQuery simplement parce qu’il est tellement répandu que la plupart du temps c’est vraiment la source du problème.

2. Les champs non définis ne sont pas envoyés à GA

Voici un fait amusant à propos de l’API Google Analytics : si un champ tel que Dimension personnalisée est indéfini lorsque le point de terminaison GA est appelé, la dimension personnalisée est exclue de la charge utile. Comment est-ce amusant? Eh bien, cela introduit une opportunité de rendre vos balises un peu plus dynamiques.

Ce serait bien d’obtenir une liste de tous les champs qui se comportent de cette façon, et aussi comment ils se comportent avec d’autres valeurs de retour telles que faux ou alors 0.

Supposons que vous disposiez d’une dimension personnalisée telle que auteur du blog que vous souhaitez envoyer avec vos balises de vue de page. Naturellement, vous ne définissez l’auteur du blog que sur les pages de blog. Vous ne voulez pas envoyer une valeur fictive comme “vide” ou “n/a” sur d’autres pages de votre site, vous êtes donc absolument certain que vous avez besoin de deux balises : une lorsque l’auteur du blog est renseigné (et peut être envoyée en tant que dimension personnalisée) et une sur toutes les autres pages (où la dimension personnalisée sera omise de la balise).

Cependant, grâce au fonctionnement de l’API GA, vous n’avez besoin que d’une seule balise. Assurez-vous simplement que la macro qui renvoie la valeur de la dimension personnalisée correspond à type indéfini lorsque la dimension n’a pas de valeur. Il existe plusieurs façons de procéder :

function() {   var t;   var y = "";   return t; // returns undefined type   return; // returns undefined type   return undefined; // returns undefined type   return false; // returns boolean type   return y; // returns string type   return x; // throws ReferenceError } 

Comme vous pouvez le voir, en revenant fauxune chaîne vide ou une variable qui n’a pas été déclarée ne suffira pas.

La chose intéressante à propos de GTM est que si vous avez une macro variable de couche de données qui ne se résout pas, elle sera automatiquement définie sur type indéfini, ce qui signifie qu’une dimension personnalisée faisant référence à cette macro ne sera pas envoyée. Donc, la meilleure façon de naviguer dans ce scénario particulier est d’avoir blog-auteur déclaré dans la déclaration dataLayer avant l’extrait de conteneur sur le modèle de page. Si la page n’est pas une page de blog, cette déclaration peut simplement être omise.

<script>   var dataLayer = [{'blog-author': 'Simo Ahava'}]; // Blog author declared, dimension will get sent </script> ... <script>   var dataLayer = []; // Blog author not declared, dimension will not get sent </script>

Ensuite, lorsque vous créez une macro variable de couche de données, sur les pages avec blog-auteur dans le tableau, il déclenchera la dimension personnalisée avec le nom de l’auteur du blog comme valeur. Sur toutes les autres pages, la dimension ne sera pas envoyée.

Une fois que vous vous êtes familiarisé avec JavaScript et que vous avez compris toutes les différentes manières dont GTM et JavaScript résolvent les variables en indéfini type, vous pouvez être vraiment créatif avec cette fonctionnalité, ce qui rend vos balises encore plus légères.

3. Suivre l’événement de copie

Vous êtes-vous déjà demandé à quelle fréquence les gens copient du texte en utilisant CTRL+C ou d’autres moyens ? Eh bien, ne vous posez plus la question, car vous pouvez désormais le suivre en tant qu’événement !

Créez cette simple balise HTML personnalisée :

<script>   var c = document.getElementById("entry-content");   if(typeof(c)!=='undefined') {     c.addEventListener('copy', function(evt) {       dataLayer.push({'event': 'copy'});     });   } </script>

Il s’agit d’un script très simple qui pousse l’événement dataLayer ‘copy’ chaque fois que quelqu’un copie quelque chose sur votre page dans l’élément HTML avec ID entrée-contenu (par exemple <div id="entry-content"></div>).

Assurez-vous de modifier l’élément dont vous souhaitez suivre le contenu avec l’écouteur d’événement pour qu’il corresponde au balisage de votre site Web.

Vous pouvez le rendre plus polyvalent en explorant le contenu du evt argument, qui est l’objet événement. Son target La propriété contient l’élément HTML qui était la cible de l’événement. Voici quelques idées :

... dataLayer.push({'event': 'copy', 'copy-id': evt.target.id, 'copy-content': evt.target.innerHTML}); ... 

Etc. Noter que evt.target stocke l’élément où l’événement de copie a commencé. Ainsi, si l’action de copie a lieu sur plusieurs paragraphes, en-têtes ou étendues, par exemple, vous ne pourrez observer que les propriétés du premier élément ciblé par l’action.

4. Les erreurs en tant qu’événements

Google Tag Manager a ce truc sympa appelé JavaScript Error Listener. Cela se déclenche chaque fois qu’un décochée exception se produit sur le site. Par exemple, considérez ce qui suit :

var myText = "Hello!"; alert(myTxt); // Unchecked ReferenceError, will fire GTM's error listener  // Exception caught, will not fire GTM's error listener try {   alert(myTxt); } catch(e) {   console.log(e.message); } 

Avec l’écouteur d’erreurs de GTM, vous pouvez envoyer chaque erreur non détectée en tant qu’événement à Google Analytics. Vous pouvez ensuite analyser ces événements pour trouver des problèmes avec vos scripts. Si vous avez un site énorme, vous pourriez avoir des centaines de ces erreurs, vous devrez donc ajuster le code pour n’écouter peut-être que certaines pages ou erreurs.

J’espère qu’à un moment donné, nous pourrons faire en sorte que l’écouteur ne se déclenche que pour les erreurs propagées par les balises et les macros de GTM. De cette façon, vous pouvez déboguer votre installation GTM sans avoir à vous soucier de toutes les autres erreurs sur votre site Web (même si vous devriez certainement!).

Pour que le programme d’écoute soit opérationnel, procédez comme suit :

1. Créer une nouvelle balise JavaScript Error Listener

2. Faites-le se déclencher sur toutes les pages (ou une autre règle de votre choix)

3. Créer une nouvelle règle Événement – gtm.pageErroroù {{event}} est égal à gtm.pageError

4. Créez trois nouvelles macros de variable de couche de données :

1. {{Error - Message}}, where variable name is gtm.errorMessage  2. {{Error - Line}}, where variable name is gtm.errorLineNumber  3. {{Error - URL}}, where variable name is gtm.errorUrl 

5. Créez une nouvelle balise d’événement et configurez-la à votre guise

6. Assurez-vous que la balise d’événement se déclenche sur la règle que vous avez créée en (3)

N’oubliez pas de définir le paramètre Non-Interaction Hit de la balise Event sur true. Vous ne voulez pas tuer votre taux de rebond avec des erreurs sur votre site !

Si vous voyez beaucoup de Erreur de script. hits, cela signifie que les erreurs se produisent dans les ressources JavaScript chargées à partir d’autres domaines. En raison des politiques de sécurité du navigateur / inter-domaines, le nom et le message d’erreur réels sont obscurcis.

conclusion

La deuxième partie de cet article est en cours. Je ne voulais pas vomir trop de texte dans un simple article de conseils et astuces, mais celui-ci contient déjà plus de 1800 mots, alors… 🙂 Les sujets du prochain article sont :

1. Déclaration dataLayer vs dataLayer.push()

2. Comment arrêter un écouteur de minuterie GTM

3. Adopter une convention de nommage appropriée

4. Annotation des versions de conteneur avec des noms et des notes

Quoi qu’il en soit, je n’aime rien de mieux que d’explorer la polyvalence de Google Tag Manager. Vous pouvez faire tellement de choses avec JavaScript, l’API DOM et la bibliothèque Google Tag Manager !

Tout ce qu’il faut, c’est un peu de savoir-faire avec JavaScript et le modèle d’objet de document, beaucoup de créativité et beaucoup de tests, de prévisualisation et de débogage.