Tirer une seule balise plusieurs fois dans GTM

Il peut y avoir de nombreuses raisons pour lesquelles vous souhaitez déclencher une même balise plusieurs fois dans Google Tag Manager. Le plus courant est lorsque vous souhaitez déployer des multiples d’un seul point de suivi sur le Web. Peut-être avez-vous un compte cumulatif auquel vous souhaitez envoyer les appels, en plus de la propriété de suivi spécifique au site.

Il y a un certain temps, j’ai donné une solution pour cela avec un accent particulier sur les balises Google Analytics. Il a tiré parti de la fonctionnalité hitCallback de la bibliothèque Universal Analytics en augmentant un compteur global chaque fois qu’une balise s’est déclenchée. Cette solution présentait un certain nombre d’inconvénients : étant spécifique à GA, polluant l’espace de noms global et nécessitant une configuration unique pour chaque balise que vous vouliez déclencher.

Peu de temps après, j’ai commencé à faire tout cela d’une manière différente. Une manière beaucoup plus durable, sensée, robuste, et dans cet article je veux ouvrir la méthode. En fait, ce n’est pas seulement moi qui veut présenter cela. Cet article est une collaboration avec Marco Wekking d’Adwise. Il m’a approché avec presque exactement la même solution demandant une révision. Au lieu de passer en revue, j’ai demandé s’il aimerait contribuer à une sorte de collaboration sur ce post, et il a gracieusement accepté. Donc, une grande partie de ce message est de la plume de Marco, avec ma mauvaise humeur typique et quelques manigances JavaScript entrelacées dans la rhétorique.

Comment ça fonctionne

Le schéma savamment greffé ci-dessus montre comment fonctionne la solution. Chaque événement qui passe par dataLayer est dupliqué en le suffixant avec .first et .second. De cette façon, toutes les balises que vous souhaitez déclencher deux fois par événement doivent simplement être modifiées pour utiliser le nom d’événement d’origine plus les deux suffixes. Vous pouvez même l’utiliser dans une table de recherche pour déclencher les hits vers différentes propriétés de suivi Google Analytics, par exemple.

C’est une solution simple et élégante à un problème urgent qui, si vous me le demandez, devrait être traité nativement par la plateforme. Il s’agit d’un cas d’utilisation si courant pour tant de personnes – il serait extrêmement utile si vous pouviez simplement indiquer plusieurs cycles pour chaque balise en utilisant les paramètres du modèle de balise au lieu d’avoir à recourir à des hacks comme celui-ci.

Comment faire

La solution comprend trois étapes :

1. Créer un nouveau déclencheur d’événement personnalisé

2. Créer la balise HTML personnalisée qui gère la duplication

3. Créer de nouveaux déclencheurs

Nous terminerons avec un exemple de la façon d’en tirer parti lors du déclenchement sur plusieurs propriétés Google Analytics ! Alors restez à l’écoute.

1. Créer le déclencheur d’événement personnalisé

Pour déclencher la balise HTML personnalisée, nous aurons besoin d’un déclencheur qui s’active sur chaque événement. Pourquoi? Parce que nous voulons dupliquer chaque événement ! Il n’y a qu’une seule exception – nous ne voulons pas déclencher le déclencheur lorsque les événements de duplication réels sont poussés dans dataLayer, ou nous pourrions nous retrouver dans une boucle infinie. Ontologiquement fascinant, mais pas cool en ce qui concerne les performances du site.

Avant de créer le déclencheur, assurez-vous que vous disposez des Événement Variable intégrée cochée dans l’emplacement approprié de la page Variables de votre conteneur.

Ceci est nécessaire pour que le déclencheur fonctionne.

Ensuite, créez un déclencheur qui correspond à tous les événements, à l’exception de ceux dupliqués. Dans cet exemple, nous utilisons le générique .first et .second comme suffixes, mais rien ne vous empêche d’utiliser quelque chose de plus descriptif, par exemple .Country et .Rollup.

Recommencer: L’exception est importante! Si vous n’ajoutez pas cette condition Fire On, vous rencontrerez des problèmes, car le déclencheur se déclenchera encore et encore à chaque cycle de duplication. Oui, vous pouvez utiliser la fonctionnalité Tag Firing Options des modèles de balises, mais il est préférable d’étouffer les mauvais comportements dans son bourgeon.

2. Créez la balise HTML personnalisée

La balise HTML personnalisée est le cœur et l’âme de cette solution. C’est très simple, mais il a quelques particularités qui pourraient surprendre si vous n’êtes pas familier avec le fonctionnement de GTM.

En fait, pour vous assurer que l’une de ces fonctionnalités spéciales fonctionne comme il se doit, vous devrez activer une autre variable intégrée : ID de conteneur. Cela renvoie, surprise surprise, l’ID public du conteneur GTM dans lequel le Tag tire (GTM-XXXX).

Créez une nouvelle balise HTML personnalisée et ajoutez le code suivant dans :

<script>   (function() {     var event = {{Event}};     var gtm = google_tag_manager[{{Container ID}}];      window.dataLayer.push({       'event' : event + '.first'     });     window.dataLayer.push({       'event' : event + '.second',       'eventCallback' : function() { gtm.onHtmlSuccess(); }     });   })(); </script>

Nous enveloppons le tout dans un IIFE car nous voulons éviter de polluer l’espace de noms global. Ensuite, nous attribuons une variable locale event avec la valeur actuellement stockée dans le Événement variable (c’est-à-dire l’événement qui a été poussé en premier lieu).

Enfin, nous faisons deux consécutif dataLayer.push() commandes, une pour chaque itération du cycle. Si vous souhaitez ajouter plus d’événements là-bas, soyez mon invité. Pour autant que nous le sachions, il n’y a pas de limite au nombre d’événements que vous pouvez pousser dans dataLayer Par ici.

Cette dernière poussée comprend la spéciale eventCallback clé (en savoir plus ici). La clé contient une fonction de rappel qui est invoquée dès que les balises qui se déclenchent sur cette poussée particulière ont signalé leur achèvement. Dans ce rappel, nous utilisons le onHtmlSuccess() caractéristique de l’interface de GTM. C’est quelque chose qui a été exposé au public avec la fonction de séquençage des balises. La seule chose que vous devez savoir à ce sujet, c’est que c’est notre façon de dire à GTM qu’il peut maintenant poursuivre tout ce qui se passait avant cette boucle de dataLayer.push() commandes.

En d’autres termes, si vous dupliquez un Cliquez sur/juste les lienset que vous avez coché « Attendre les balises » (ce qui signifie que le déclencheur attendra que toutes les balises dépendantes se déclenchent avant de procéder à l’action par défaut du lien), le processus ressemble à ceci :

1. Le clic sur le lien Trigger déclenche cette balise HTML personnalisée.

2. La balise HTML personnalisée pousse le premier événement dupliqué, et toutes les balises qui l’utilisent commencent leur exécution.

3. Immédiatement après, la balise HTML personnalisée pousse le deuxième événement dupliqué, et toutes les balises qui l’utilisent commencent leur exécution.

4. Une fois que le dernier tir de balise sur la deuxième poussée dupliquée signale son achèvement, le eventCallback le rappel est invoqué, et la balise HTML personnalisée indique au lien click Trigger que tout est fait, lui permettant de poursuivre la redirection.

Maintenant, ajoutez le déclencheur que vous avez créé à l’étape précédente à cette balise et vous êtes prêt à dupliquer. Vous pouvez prévisualiser cela pour voir ce qui se passe dans votre dataLayer avec chaque événement.

Comme vous pouvez le voir, chaque événement est dupliqué. Il y a le Page vuesuivi de ses doublons : gtm.js.first et gtm.js.second. Il y a Prêt pour DOMsuivi de ses doublons : gtm.dom.first et gtm.dom.secondeetc.

(Si vous ne comprenez pas ce que “Pageview” et “gtm.js” ont à voir, ce dernier est la représentation d’événement sous-jacente du premier. Plus d’informations dans mon guide Trigger.)

3. Créer de nouveaux déclencheurs

La seule douleur d’entretien dont vous aurez besoin avec cette solution est avec les déclencheurs. Voici comment cela devrait fonctionner :

• Pour dupliquer un Trigger, il vous faut un Trigger « de base » de type événement se déclenchant sans condition de délimitation. C’est l’événement qui est dupliqué.

• Pour déclencher vos tags en double, vous devez utiliser des déclencheurs d’événements personnalisés qui utilisent le nom d’événement d’origine (par exemple gtm.linkClick) plus .première ou alors .secondele tout enveloppé dans une simple expression régulière.

En d’autres termes, nous revenons sur la façon dont GTM fonctionnait avant le déclenchement de l’événement automatique. Nous créons les auditeurs en utilisant les déclencheurs d’événements génériques, et lorsque ceux-ci sont dupliqués, les déclencheurs d’événements personnalisés sont utilisés pour délimiter les balises à déclencher uniquement lorsque des conditions spécifiques existent.

REMARQUE! Vous n’avez pas besoin de créer un déclencheur « de base » pour le type d’événement Page View. En effet, “Pageview”, “DOM Ready” et “Window Loaded” sont automatiquement poussés dans dataLayer au fur et à mesure que la page et le GTM se chargent. En d’autres termes, ils sont automatiquement dupliqués et vous n’avez qu’à vous concentrer sur la création des déclencheurs d’événements personnalisés.

Regardez l’illustration ci-dessous pour plus de clarté :

Faisons un zoom avant. Si vous avez un déclencheur “Liens sortants”, qui se déclenche lorsque l’URL du clic n’est pas votre propre nom d’hôte, le déclencheur dupliqué ressemblera à ceci :

Notez le champ “Nom de l’événement”. Voilà à quoi cela devrait ressembler pour vos déclencheurs. Avec les noms d’événements personnalisés, c’est facile, car c’est vous qui les insérez dataLayer en premier lieu. Avec les déclencheurs intégrés, cela pourrait être un peu plus difficile, alors voici une feuille de triche pour vous :

Assurez-vous d’avoir le Tirer sur condition sur la Déclencheur d’événement personnalisé, car vous n’en avez pas besoin sur l’événement générique Trigger. Si vous le manquez dans le déclencheur d’événement personnalisé, vous déclencherez par inadvertance le tag chaque fois que quelconque tel événement est détecté sur la page. Par exemple, si nous avions omis le Cliquez sur le nom d’hôte de l’URL condition de l’exemple ci-dessus, la balise Outbound Links se déclenche chaque fois que l’événement Link Click est poussé dans dataLayer.

BONUS : Utilisez un ID de suivi variable

Voici un conseil directement de Marco. Pour créer une variable qui envoie un ID de suivi Universal Analytics différent selon le cycle de la boucle de duplication actuellement actif, utilisez ce qui suit Variable JavaScript personnalisée:

function() {      var event = {{Event}};      var regexFirst = /\.first$/;   var regexSecond = /\.second$/;      if (regexFirst.test(event)) {     return "UA-XXXXXXXX-1";   } else if (regexSecond.test(event)) {     return "UA-XXXXXXXX-2";   }    // Do something in case neither matches  } 

Cela renvoie le code UA “UA-XXXXXXXX-1” si le Tag se déclenche sur la première boucle du cycle de duplication, et “UA-XXXXXXXX-2” si sur la seconde. Vous voudrez peut-être configurer un type de valeur de secours ou de retour par défaut au cas où aucune ne correspondrait.

Aperçu et résumé

Bien que la solution fonctionne pour tous les types de balises et crée moins de redondance dans de nombreuses configurations, elle présente certains inconvénients.

Tout d’abord, il gonfle le nombre de dataLayer événements de manière significative. Une configuration simple avec seulement deux événements (affichage de la page et clics sur le lien sortant) triple déjà le montant. Notez que cela n’a pas vraiment d’impact sur les performances. dataLayer n’est qu’un bus de messages utilisé par le modèle de données interne de Google Tag Manager. Chaque fois que GTM a besoin d’accéder à la “couche de données”, il effectue en fait une recherche dans son propre modèle de données, de sorte que la taille de dataLayer est sans importance ici.

Deuxièmement, cela nécessite une approche différente et probablement plus difficile des déclencheurs. Toutes les balises doivent être liées à des déclencheurs d’événements personnalisés au lieu des types de déclencheurs intégrés auxquels vous êtes peut-être habitué. Si vous étiez présent lors de la version précédente de GTM, vous connaissez peut-être la configuration, car elle ressemble à la façon dont les choses se faisaient avec l’ancienne configuration de suivi des événements automatiques. Cependant, lorsque vous le mâchez vraiment, tout ce que vous faites réellement est de créer un Déclencheur supplémentaire par type d’événement et passage des types de déclencheurs intégrés aux déclencheurs d’événements personnalisés.

Enfin, les conditions de déclenchement deviennent plus critiques car elles peuvent provoquer des boucles infinies ou déclencher des balises dans de mauvaises situations. Bien que de tels accidents ne devraient pas causer de regrets infinis (en supposant que vous testiez avant de publier), cela reste une autre difficulté à gérer.

Une chose qui pourrait vous préoccuper est de savoir si toutes les variables renseignées avec le déclencheur de base initial sont toujours disponibles lorsque les déclencheurs d’événements personnalisés en double se déclenchent. Par exemple, vous pourriez avoir besoin du Cliquez sur l’URL Variable, et maintenant vous craignez qu’il ne soit pas disponible lorsque les déclencheurs en double se déclenchent. Ne vous inquiétez pas! GTM conserve les valeurs variables jusqu’à ce qu’elles soient écrasées ou qu’il y ait un déchargement/actualisation de la page. Ainsi, à moins que vous ne remplaciez manuellement les valeurs de la couche de données renseignées par les déclencheurs d’événement automatique de GTM, tout devrait bien se passer.

Eh bien, nous avons peut-être exagéré la simplicité et l’élégance de la configuration, mais l’idée d’intercepter chaque événement et de le dupliquer est beaucoup plus accessible que la configuration complexe de hitCallback utilisée auparavant.

Je tiens à remercier Marco d’avoir mis l’approche par écrit, et la plupart du contenu de cet article est venu de sa plume, édité pour s’adapter au style diabolique de ce blog. Toute erreur, erreur factuelle ou propagande radicaliste habilement cachée dans l’espace blanc est uniquement de ma faute, Simo, et j’assume l’entière responsabilité de tous les soulèvements qui suivront inévitablement.