Amusez-vous avec Google Tag Manager : 2e partie

Toutes mes excuses pour vous avoir laissé pendre. Cela fait maintenant presque trois semaines que j’ai publié la première partie de cet article, et je suis sûr que vous retenez votre souffle depuis.

Il s’est passé beaucoup de choses depuis le dernier message. Tout d’abord, mon équipe sportive préférée au monde, San Antonio Spurs, a remporté son cinquième championnat NBA contre les champions en titre, Miami Heat. Ensuite, ma femme et moi avons déménagé dans notre nouvelle maison et depuis, nous rénovons. Cela a été mouvementé avec le travail et la vie se mélangeant dans un pot-pourri de sciure de bois et d’analyse Web, mais il est maintenant temps de retourner dans le monde merveilleux de Google Tag Manager !

Je vous ai promis quatre nouveaux conseils dans celui-ci, mais je vais me surpasser et vous donner six joyaux du monde de la gestion des balises. Voici ce que vous obtiendrez :

1. Déclaration et push de dataLayer

2. Utilisation de eventCallback dans dataLayer.push()

3. Arrêt d’un écouteur de minuterie

4. Conventions de nommage et de contrôle de version

5. Déclencher une même balise plusieurs fois

6. {{vrai et faux}}

Déclaration et push de dataLayer

Google Tag Manager utilise dataLayer comme son propre modèle de données propriétaire. dataLayer est un objet JavaScript de type Array. Cela signifie qu’il a des méthodes uniques à Arrays, telles que push().

(Voir mon commentaire sur cet article ici pour un aperçu de la façon d’accéder aux objets Array par rapport aux propriétés de l’objet.)

Le truc c’est que tu ne peux pas utiliser dataLayer.push() si vous n’avez pas déclaré dataLayer en tant que tableau d’abord. Les répercussions de ceci sont que si vous essayez d’utiliser dataLayer.push() avant que dataLayer a été déclaré en tant que tableau, ou s’il a été déclaré en tant que quelque chose de différent (comme un objet normal ou une chaîne), vous obtiendrez des erreurs :

Alors voici le premier conseil :

Vous devez déclarer dataLayer en tant que tableau avant de pouvoir utiliser sa méthode push().

Tourner dataLayer dans un tableau, vous avez besoin du code suivant avant l’extrait de conteneur:

var dataLayer = []; 

Si vous ne le déclarez pas avec cette déclaration explicite, alors GTM déclarera dataLayer pour vous. Ceci est très important, car cela garantit que vous aurez toujours dataLayer disponible pour vos balises.

Le problème avec les objets et les primitives JavaScript (nombres, chaînes, etc.) est que si vous redéfinir une entité JavaScript, son état précédent sera écrasé ! Les entités JavaScript sont dynamiques, vous pouvez donc redéfinir une chaîne en tant qu’objet, un tableau en tant que nombre, etc. sans aucune difficulté. Il n’y a également aucun moyen de protéger une variable globale telle que dataLayer d’être redéfini comme un type différent, il faut donc prendre des précautions pour ne pas gâcher les choses.

Pourquoi est-ce important? Eh bien, si vous en avez plus d’un dataLayer déclaration sur votre modèle de page OU dans vos balises GTM, vous effacer toutes les informations précédentes dans la structure! Oops. Voici un exemple :

var dataLayer = [{'pageCategory': 'home', 'logged-in': 'true'}]; ... var dataLayer = [{'event': 'allDone'}]; 

Après la première ligne de code, dataLayer a un seul objet avec deux propriétés : pageCategory et logged-in. Un peu plus bas dans le code se trouve la deuxième déclaration. Maintenant, après l’exécution de ce code, dataLayer n’aura toujours qu’un seul objet, mais avec juste le event la propriété! Pouvez-vous voir à quel point cela est nocif ? Aucune des informations précédentes n’est récupérable après cela.

Le moyen le plus sûr d’éviter cela est de préfacer le SEUL dataLayer déclaration sur la page avec la ligne suivante :

window.dataLayer = window.dataLayer || []; 

Et puis n’utilisez que dataLayer.push() pour ajouter des objets au tableau. Cette ligne assure que si dataLayer a déjà été déclaré, il ne sera pas écrasé. Ce n’est pas infaillible, car il ne teste pas si la variable globale dataLayer est de type Array ou non, mais je pense que c’est suffisant. Si vous avez une autre bibliothèque JavaScript qui utilise une variable appelée dataLayer ainsi, vous pourriez avoir des ennuis. Mais c’est à cela que servent les tests et le débogage.

Voici donc mon dernier conseil pour cette section :

Déclarez dataLayer JUSTE UNE FOIS et utilisez dataLayer.push() pour toutes les interactions par la suite.

Dans vos balises GTM, vous pouvez simplement utiliser dataLayer.push()et vous n’avez pas besoin de vérifier si dataLayer existe ou non, puisque GTM le déclare pour vous dans l’extrait de conteneur. Mais lorsque vous travaillez sur le modèle de page, vous devez faire très attention à ne pas écraser le tableau.

Utilisation de eventCallback dans dataLayer.push()

Vous pouvez utiliser le eventCallback variable dataLayer dans la push() méthode pour exécuter le code après le déclenchement de toutes les balises dépendantes. Je sais, c’était une bouchée mais c’est vraiment simple. Prenons cet exemple :

dataLayer.push({   'event': 'fireEvent',   'eventCallback': function() {     console.log("Event has fired");   } }); 

Eh bien, c’est un exemple assez moche, mais il fait ce qu’il est censé faire. Après toutes les balises qui se déclenchent {{event}} est égal à fireEvent terminé, la fonction eventCallback s’exécutera et vous devriez voir le texte dans la console JavaScript.

eventCallback est, en substance, un raccourci pour le propriétaire hitCallback fonctionnalité que vous pouvez invoquer dans vos balises Google Analytics.

Vous pouvez l’utiliser pour un rappel rapide, comme attendre que toutes les balises se déclenchent avant qu’un lien ne soit redirigé ou pousser un deuxième événement comme rappel pour imposer un ordre de déclenchement de balise rudimentaire.

Arrêt d’un écouteur de minuterie

Vous connaissez le Timer Listener, n’est-ce pas ? Vous pouvez l’utiliser pour faire pousser un événement toutes les X millisecondes. Vous pouvez limiter le nombre de fois que la minuterie se déclenche, ou vous pouvez simplement la laisser se déclencher d’ici à l’éternité.

Le fait est que vous voudrez peut-être arrêter l’écouteur avant que la limite ne soit atteinte. Par exemple, si vous utilisez Timer Listener pour envoyer des impulsions reflétant le temps que l’utilisateur a passé à digérer le contenu, par exemple, vous voudrez peut-être l’arrêter une fois que le lecteur atteint la fin de la page pour éviter que vos événements ne soient encombrés par la minuterie frappe.

Pour arrêter une minuterie, vous devez utiliser le window.clearInterval() méthode. Il nécessite un paramètre, à savoir l’ID de la minuterie qui se déclenche.

L’écouteur de minuterie de GTM est votre code JavaScript ordinaire setInterval() timer, et son ID est stocké dans, quoi d’autre, une variable dataLayer appelée gtm.timerId. Donc, pour arrêter le minuteur, vous devez envoyer le contenu de gtm.timerId comme paramètre de window.clearInterval(). Pour que cela fonctionne, vous devez créer une nouvelle macro variable de couche de données qui fait référence à gtm.timerId :

Après cela, chaque fois que vous souhaitez arrêter un minuteur, tout ce que vous avez à faire est d’avoir la ligne de code JavaScript suivante dans votre balise HTML personnalisée ou votre macro JavaScript personnalisée :

window.clearInterval({{timer id}}); 

Cela arrêtera la minuterie la plus récemment déclenchée. Donc, si vous avez plusieurs minuteries, vous devrez peut-être modifier quelque peu le code pour trouver la bonne minuterie (le moyen le plus simple de le faire est d’utiliser {{event}} est égal à your_timer_event comme l’une des conditions de règle de la balise qui arrête le minuteur).

Conventions de nommage et de contrôle de version

GTM ne brille pas vraiment lorsqu’il s’agit de gérer un ensemble de balises, de macros et de règles (TMR). Pour cette raison, il est vraiment important d’adopter une bonne convention de nommage afin que vous puissiez donner un sens à ce que vous avez dans votre conteneur.

Pour des approches alternatives (nommage plus explicite pour satisfaire la recherche dans l’outil), consultez l’excellent article original de Doug Hall sur le comportement en ligne. Un article plus récent de Justin Goodman couvre un terrain similaire.

J’utilise une convention de dénomination très simple dans toutes mes TMR. Il évolue assez bien, car il fonctionne dans les implémentations de grandes entreprises ainsi que dans des conteneurs plus petits. De plus, le plus important est qu’il soit lisible.

Voici ce que j’utilise.

MOTS CLÉS
Type de balise – objectif

HTML – Appel d’API Météo
HTML – Suivi des partages sociaux
UA – Suivi des pages vues
Auditeur – Clic sur le lien
Auditeur – Clic

Avoir le type de balise est assez redondant puisque vous pouvez le voir dans la deuxième colonne de la liste des balises. Cependant, j’apprécie que cela rende la liste un peu moins encombrée.

DES RÈGLES
Macro clé – déclencheur

Événement – gtm.js
Événement – Clic sur le lien sortant
URL – Page de remerciement

La macro clé est ce qui pilote la règle. Le plus souvent c’est un {{un événement}}, mais de temps en temps, vous pouvez avoir le même événement dans de nombreuses règles, et vous devrez alors utiliser une autre macro pour exprimer la différence entre les deux règles. Un exemple de ceci est la règle d’URL ci-dessus. C’est sous-jacent {{un événement}} est gtm.js, je dois donc utiliser la condition d’URL pour la différencier de toutes les autres règles gtm.js.

MACRO
Ce qui est retourné

Nombre aléatoire
État du mode de débogage
URL de l’élément
Nom d’hôte de l’URL

Avec les macros, nous ne nous intéressons qu’à ce qu’elles renvoient, puisque c’est à cela que servent les macros. Ainsi, dans le nom de la macro, il est important d’exprimer uniquement ce qui est renvoyé lorsque la macro est appelée.

En ce qui concerne le contrôle de version, mon conseil est le suivant :

Nommez vos versions ET ajoutez des notes !

C’est ça. Il est si important d’annoter vos versions de conteneur avec des informations sur ce qui a été mis à jour et ce qui a changé. C’est le seul moyen de rester au top de votre jeu, surtout si vous avez affaire à un énorme historique de versions. Soyez pédant à ce sujet et assurez-vous que cela fait partie de votre processus d’assurance qualité pour la gestion des balises !

Déclencher une même balise plusieurs fois

Voici un problème courant : vous avez plusieurs trackers qui s’exécutent sur le même domaine, mais vous souhaitez utiliser une seule balise pour eux. Eh bien, actuellement, GTM n’a pas de commutateur avec lequel vous pouvez déclencher la même balise plusieurs fois avec des paramètres différents, vous devez donc créer une balise distincte pour chaque tracker.

Cependant, il existe une solution de contournement. Vous pouvez utiliser hitCallbackla macro de table de recherche et une variable JavaScript globale pour déclencher votre balise plusieurs fois avec différentes valeurs dans les champs !

(Noter: Le mode de débogage de GTM ne vous permet pas d’insérer des éléments dans dataLayer, même si vous le faites à partir d’une fonction retournée (ce qui est totalement valide). Malheureusement, cela signifie que vous ne pourrez pas tester cette solution en mode débogage et que vous devrez publier le conteneur pour le tester.)

Voici ce dont vous avez besoin :

MACRO VARIABLE JAVASCRIPT {{tag callback counter}} :

MACRO TABLE DE RECHERCHE {{nom du tracker}} :

HITCALLBACK MACRO {{fonction de rappel de balise}} :

Donc, avant de vérifier comment la balise est configurée, passons en revue ces macros. Le {{tag callback counter}} est une macro de variable JavaScript qui fait référence à la variable JS globale que vous avez configurée plus tard dans {{fonction de rappel de balise}}. L’idée ici est que le {{nom du traceur}} La macro Lookup Table renvoie une chaîne différente, selon le compteur. Chaque fois que le rappel est exécuté, le compteur augmente de 1.

La clé est d’utiliser votre premier tracker comme valeur par défaut de la macro Table de consultation. En effet, lorsque la balise se déclenche pour la première fois (le {{event}} est égal à gtm.js), la variable JavaScript qui {{tag callback counter}} se réfère à n’existera pas encore (puisqu’il est défini dans le CALLBACK de cette balise).

Lorsque le rappel est exécuté, un événement GTM est poussé dans dataLayer et la valeur du compteur est augmentée de un. Vous définissez le nombre maximal de fois que la balise doit se déclencher avec le maxRepeat variable dans la fonction de rappel. N’oubliez pas d’avoir une ligne pour chaque itération dans la table de recherche, sinon le suivi dans le champ Valeur par défaut de la table de recherche sera renvoyé pour chaque itération qui n’a pas de ligne dans la table !

Dans votre balise, ajoutez les éléments suivants dans les champs à définir :

Cela garantira que la fonction de rappel est exécutée à chaque fois que la balise s’est déclenchée.

Maintenant que vous avez votre Lookup Table, vous pouvez l’utiliser dans le champ Tracker Name de votre tag :

L’utilisation de la macro ici fait en sorte qu’à chaque itération de la balise, une valeur différente est définie comme nom de suivi, grâce à la table de consultation et au compteur qui augmente de 1 à chaque passage.

Enfin, vous devez ajouter DEUX règles à la balise. Ce sont deux règles, pas deux conditions. Les règles sont

{{event}} est égal à gtm.js

et

{{event}} est égal à tagCallback

Avoir deux règles signifie que la balise se déclenchera quand et si l’une correspond à l’autre. Donc d’abord il tirera sur {{event}} est égal à gtm.js, puisqu’il s’agit de l’événement poussé lors du premier chargement de GTM. Ensuite, il se déclenchera à chaque fois {{event}} est égal à tagCallback, donc deux fois dans mon exemple. Ainsi, la balise se déclenche trois fois avec trois noms de tracker différents.

Vous pouvez également l’utiliser si vous souhaitez suivre différentes propriétés. Remplacez simplement les noms des trackers par les codes UA-XXXXX-Y et vous êtes prêt !

Voici un bref récapitulatif de ce qui se passe :

1. Le tag est tiré dessus {{event}} est égal à gtm.js. Depuis {{tag callback counter}} impossible de trouver la variable globale, la macro Lookup Table {{nom du traceur}} renvoie la valeur par défaut, qui est localTrackerA

2. Lorsque la balise s’est déclenchée, le compteur est créé avec la valeur 0 et l’événement tagCallback est poussé dans dataLayer

3. tagCallback déclenche à nouveau la balise, et cette fois la table de recherche trouve le compteur avec la valeur 0 et renvoie localTrackerB

4. Lorsque la balise s’est déclenchée, le nombre de compteurs est augmenté à 1 et l’événement tagCallback est poussé dans dataLayer

5. tagCallback déclenche la balise pour la troisième fois, et encore une fois la table de recherche trouve le compteur avec la valeur 1, ainsi rollupTracker est renvoyé

6. Le hitCallback est à nouveau déclenché, mais cette fois, le nombre maximum de répétitions est atteint et la fonction renvoie simplement une valeur indéfinie. Ainsi, aucun événement de rappel n’est poussé dans dataLayer et la balise ne se déclenche pas à nouveau.

Je pense que c’est un exploit incroyable de la part des macros dynamiques et de la fonction de rappel. Cela devrait rendre toute configuration d’entreprise beaucoup, BEAUCOUP plus légère.

{{vrai et faux}}

Celui-ci est rapide mais assez important. Créez deux macros JavaScript personnalisées :

{{vrai}}

function() { return true; } 

{{faux}}

function() { return false; } 

Pourquoi demandes-tu? Eh bien, disons que vous voulez définir le paramètre Anonymize IP sur vrai pour un domaine et faux pour deux autres domaines (cette idée est venue de Carmen Mardiros, soit dit en passant !). Vous souhaitez utiliser une macro de table de consultation pour y parvenir, mais lorsque votre table de consultation aligne les domaines avec la valeur de retour “true” et “false”, vous remarquez que les choses ne fonctionnent pas comme vous le souhaiteriez. Le problème est que si vous ajoutez du texte à un champ dans GTM, il est toujours converti en type chaîne. Anonymiser l’IP nécessite booléen tapez, sinon il échoue.

Pour contourner ce problème, au lieu de taper “true” et “false” dans les champs de GTM, utilisez les macros que vous venez de créer. Ils reviennent vrai et faux dans le bon type booléen ! De cette façon, vous pourrez transmettre les types de valeurs corrects aux paramètres qui nécessitent des valeurs booléennes.

Naturellement, cela devrait être corrigé en ajoutant booléen true et false comme valeurs possibles dans tous les champs GTM.

conclusion

Bien, tu l’as maintenant! Un autre tour de magie GTM. J’ai hâte d’expérimenter davantage et de découvrir encore plus de choses intéressantes à partager avec vous. Assurez-vous de rejoindre notre incroyable communauté Google+ qui a inspiré la plupart de ces conseils.

De plus, si vous participez à l’une des conférences à venir suivantes, venez me dire bonjour :

• Conférence Google Analytics à Stockholm (août 2014)

• Web Analytics Wednesday à Copenhague (septembre 2014)

• Conversion Conference à Londres (octobre 2014)

• eMetrics à Londres (octobre 2014)

• Marketing Festival à Brno (octobre-novembre 2014)