Comprendre le séquençage des balises dans Google Tag Manager

Une récente mise à jour de Google Tag Manager a introduit une fonctionnalité qui figure depuis longtemps sur la liste de souhaits de nombreux utilisateurs. C’est appelé Séquençage des balises, et son but est de faciliter le déclenchement séquentiel des balises. L’idée est que vous pouvez spécifier un installer et un nettoyer pour chaque balise de votre conteneur.

Cet article est destiné à fonctionner comme une présentation rapide de la fonctionnalité. Ce n’est pas la fonctionnalité la plus simple à comprendre, car le séquençage des balises est parallèle mais séparé du flux normal de votre conteneur. Ne vous inquiétez pas, je m’y remettrai bientôt.

1. Séquence en bref

UN séquence comprend trois phases :

Les installerqui est un Tag qui doit avec succès terminer avant que le tag principal ne se déclenche.

Les balise principale, qui est la balise avec les dépendances. Cela dépend soit de la installerou il établit une dépendance avec le nettoyer.

Les nettoyerqui est une balise qui se déclenche après le balise principale a terminé avec succès.

La séquence est créée en éditant le Réglages avancés du balise principale. Vous verrez deux nouveaux paramètres ici :

• Lancez une balise avant…

• Lancer une balise après…

Le premier réglage sert à choisir le installer pour le balise principale. Ce dernier est pour le nettoyer. Si vous choisissez un installeril devra se terminer avant le balise principale se déclenche lui-même. Si vous choisissez un nettoyerles balise principale devra terminer avant le abattre est congédié. Pour les deux, vous pouvez choisir si oui ou non une défaillance dans l’un ou l’autre des installer ou la balise principale annulera la séquence.

D’ACCORD. C’était déroutant. Permettez-moi de le visualiser avec mes compétences supérieures en PowerPoint.

Dans la séquence ci-dessus, la balise de vue de page (installer) doit se terminer avec succès avant la balise d’événement (balise principale) les feux. Si la balise de vue de page échoue, la séquence est abandonnée. De même, la balise d’événement doit être terminée avec succès avant la dernière balise d’événement (nettoyer) les feux. Si la balise principale échoue, la balise d’événement finale ne se déclenchera pas.

Vous pouvez, bien sûr, spécifier que les balises se déclenchent même si un membre de la séquence échoue.

La chose clé à comprendre à propos de la séquence est qu’elle est isolé. L’utilisation du séquençage des balises vous permet de spécifier une séquence de hits qui se déclenchent lorsque le balise principale est déclenché. Cela signifie que le installer et nettoyer Les balises agiront complètement inconscientes de tous les déclencheurs que vous pourriez leur avoir ajoutés.

En effet, quels que soient les Triggers que vous avez ou non équipés dessus, ils sont totalement ignorés si le Tag est utilisé comme installer ou alors nettoyer. Pour cette raison, il pourrait être prudent de ne pas utiliser installer et nettoyer Des balises pour tout sauf le séquençage, mais il existe un moyen de le faire fonctionner dans les deux sens (j’y reviendrai bientôt).

Je souligne à nouveau qu’il s’agit d’un concept difficile à saisir. Je suis sûr que l’UX / UI pourrait être rendue plus intuitive, mais la raison pour laquelle c’est difficile est qu’elle repose sur des rappels, qui sont invisibles dans l’utilisation réelle de GTM (à moins que vous ne commenciez à déboguer à un niveau vraiment granulaire).

2. Les rappels

Nous avons encore un peu de théorie à couvrir avant d’approfondir les choses pratiques.

Dans GTM, chaque Tag a un callback. Avec les modèles de balises, ces rappels dépendent du fonctionnement de la balise. Par exemple, la balise Google Analytics utilise la fonctionnalité hitCallback comme rappel.

Ainsi, lorsque vous établissez un installerpar exemple, le balise principale ne tirera pas tant que onSuccess rappel de installer est invoqué. Avec le modèle de balise Google Analytics, le étiqueter ne sera déclenché qu’après le hitCallback du installer est exécuté avec succès. De même, le nettoyer ne sera pas licencié tant que onSuccess rappel du balise principale est appelé.

Phew!

L’autre rappel est onFailure. Ceci est invoqué au cas où la balise ne se termine pas avec succès. Dans les paramètres de séquençage des balises, vous pouvez spécifier que le balise principale ne doit pas tirer si installer échoue, ou vous pouvez choisir d’ignorer l’échec. De même, vous pouvez spécifier que le nettoyer ne doit pas tirer si balise principale échoue, ou vous pouvez, encore une fois, choisir d’ignorer l’échec.

Vous n’avez pas à vous soucier de ces rappels lorsque vous utilisez des modèles de balises. GTM se charge d’appeler onSuccess et onFailure pour vous, et tout ce que vous avez à faire est de vous assurer que vous avez coché les bonnes cases dans les paramètres (c’est promis, nous allons bientôt passer aux paramètres !).

3. La balise HTML personnalisée

L’exception est la Balise HTML personnalisée. Étant donné que vous souhaiterez peut-être indiquer à Google Tag Manager de ne pas passer à la balise suivante tant qu’un événement ne s’est pas produit (par exemple, une opération asynchrone est terminée), une solution de contournement est nécessaire. Si vous allez au Variables intégréesvous devriez en voir un nouveau : Identifiant HTML:

Ceci est utilisé pour invoquer soit le onSuccess ou alors onFailure rappel pour la balise HTML personnalisée.

Ainsi, si vous souhaitez utiliser une balise HTML personnalisée comme installer ou la balise principaleet que vous souhaitez établir une séquence avec des conditions de succès et/ou d’échec, vous aurez besoin des éléments suivants :

1. Les Identifiant HTML Variable intégrée

2. Les Identifiant du conteneur Variable intégrée

3. Les Balise HTML personnalisée lui-même

Dans l’exemple de code suivant, j’exécute du JavaScript personnalisé, et une fois que c’est fait, je fais savoir à la séquence que onSuccess a été appelé.

<script>   (function() {     var gtm = window.google_tag_manager[{{Container ID}}];     var el = document.getElementById('content-head');     try {       el.innerHTML = 'We have taken over your website!';       gtm.onHtmlSuccess({{HTML ID}});     } catch(e) {       gtm.onHtmlFailure({{HTML ID}});     }   })(); </script>

Dans la première ligne du script, vous copiez une référence à l’interface du conteneur GTM dans le gtm variable. Il s’agit d’une interface très spécifique avec les mécanismes de GTM, alors ne vous en souciez pas trop. Autant dire que cette référence permet de passer le cap onSuccess et onFailure rappels, c’est pourquoi c’est important ici.

Ensuite, il y a un try...catch block, où une méthode DOM est exécutée. Une fois terminé, le onHtmlSuccess() méthode de l’interface est invoquée. Le paramètre de cette méthode est le nouveau Identifiant HTML Variable intégrée. De cette façon, GTM pourra communiquer au membre suivant de la séquence qu’il a été précisément cette balise HTML personnalisée particulière qui vient de se terminer.

S’il y a une erreur, alors le onHtmlFailure() est invoquée et des informations sont transmises à la séquence que cette balise n’a pas terminée avec succès.

À présent, il ne devrait plus être trop compliqué de comprendre ce qui se passe. Chaque modèle de balise a un onSuccess et onFailure rappel, à l’exception de la balise HTML personnalisée, où vous pouvez les fournir vous-même.

MISE À JOUR 23 juillet 2018: Assurez-vous de lire mon article sur les balises HTML personnalisées avec séquencement de balises pour plus de détails sur la façon dont les balises HTML personnalisées et le séquencement de balises fonctionnent ensemble.

4. Comment créer la séquence

Pour terminer! Quelques informations pratiques !

Sous le Réglages avancés de chaque modèle de Tag, vous trouverez trois nouvelles options :

1. Options de déclenchement des balises – Permet de délimiter le Tag à tirer soit juste Une fois par événement, Une fois par pageou laissez-le simplement tirer Illimité fois.

2. Séquençage des balises -> CONFIGURATION – Permet de choisir la balise qui doit se terminer avant la balise dont vous modifiez les paramètres en cours. Vous pouvez spécifier si le installer doit se terminer avec succès, ou si des échecs doivent encore déclencher le déclenchement de cette balise.

3. Séquençage des balises -> NETTOYAGE – Vous permet de choisir la balise qui doit se déclencher après la fin de l’exécution de la balise actuelle. Encore une fois, vous pouvez spécifier si la balise actuelle doit se terminer avec succès, ou si son échec doit être ignoré, et le nettoyer devrait tirer malgré tout.

C’est ainsi que vous créez un Séquence de balises.

Maintenant, au tout début, j’ai mentionné que la séquence fonctionne de manière isolée. Cela signifie que la configuration que vous établissez pour une balise particulière exécutera la séquence indépendamment des autres déclencheurs que vous pourriez avoir attachés à la installer ou alors nettoyer. Cela signifie également qu’une séquence est toujours liée à l’événement du balise principale. Ainsi, si le balise principale se déclenche sur le déclencheur “Toutes les pages”, par exemple, la séquence entière sera terminée pendant cet événement.

Étant donné que vous pouvez utiliser un tag à la fois indépendamment et dans le cadre d’une séquence, le nouveau Options de déclenchement des balises sont très utiles, en effet. Par exemple, si vous avez la balise A comme installer pour certaines balises, ainsi que le déclenchement de son propre déclencheur individuel, vous pouvez spécifier que la balise A doit uniquement se déclencher Une fois par page pour empêcher l’envoi de plusieurs hits. Cela signifie simplement qu’après s’être déclenché une fois, indépendamment ou dans le cadre d’une séquence, il ne se déclenchera plus tant que l’utilisateur sera sur la page.

Vous pouvez également spécifier Une fois par événementce qui signifie que le tag ne se déclenchera qu’une seule fois pour un événement de couche de données. Ainsi, vous pourriez avoir la balise A déclenchée sur le déclencheur “Toutes les pages”, et vous pourriez également l’avoir comme déclencheur nettoyer de certaines balises qui se déclenchent également sur le déclencheur “Toutes les pages”. En utilisant le Une fois par événement paramètre, la balise A ne se déclenchera qu’une seule fois pendant l’événement “Toutes les pages”.

5. Remarque sur l’utilisation dataLayer.push() dans la séquence

L’un des principaux cas d’utilisation de l’utilisation du séquençage des balises serait d’avoir le installer Tag pousser quelque chose dans dataLayer pour la balise principale à utiliser.

Calmez-vous!

Si vous connaissez votre gestionnaire de balises Google, vous saurez que la couche de données disponible pour n’importe quelle balise est fixe pour le durée de l’événement de couche de données! Ainsi, toutes les balises qui se déclenchent sur l’initiale dataLayer.push() ne pourra accéder qu’aux valeurs de ce push. Si une balise essaie de modifier les valeurs dans la couche de données, ces valeurs ne seront pas enregistrées jusqu’à ce que le suivant dataLayer.push() avec un événement.

(METTRE À JOUR: Quelque temps après la rédaction de cet article, le comportement de GTM a changé afin que les variables soient résolues séparément pour chaque balise d’une séquence. Cela signifie que vous ne pas besoin d’utiliser google_tag_manager[...].dataLayer.get() si vous souhaitez récupérer une variable qui a changé d’une balise de la séquence à la suivante. Au lieu de cela, vous pouvez simplement utiliser les variables standard de Google Tag Manager, car leurs valeurs seront mises à jour pour chaque balise de la séquence !)

Cela gêne un peu le développement, car cela ressemble à dataLayer ne peut pas être utilisé comme support de messagerie dans une séquence, car la séquence entière fonctionne dans la durée d’un seul événement de couche de données (celui qui a déclenché la balise principale en premier lieu).

Le guide du développeur contient en fait une note à ce sujet :

Cependant, au moment d’écrire ces lignes, dataLayer.set() n’existe pas. J’ai demandé aux développeurs, et cela semble être une erreur dans le guide. Au lieu de cela, vous devez utiliser la commande suivante pour Positionner valeurs dans la couche de données même pendant la séquence de balises :

// To set a value, use set() with the key as the first parameter, and value as the second google_tag_manager[{{Container ID}}].dataLayer.set('someKey', 'someValue'); 

Une fois que vous l’utilisez, toute balise qui se déclenche après celle-ci (dans le même ordre) aura sa référence de variable de couche de données à uneClé mis à jour pour revenir uneValeur.

Si vous souhaitez récupérer cette valeur modifiée dans le même balise dans laquelle elle a été modifiée, vous ne pouvez pas utiliser une variable de couche de données, car elle est résolue avant l’exécution de la balise (et le set() commande est exécutée). Vous devrez utiliser cette syntaxe à la place :

// To get a value, use get() with the key as the parameter google_tag_manager[{{Container ID}}].dataLayer.get('someKey'); 

N’oubliez pas d’activer le Identifiant du conteneur Variable intégrée !

Ce sont des cas d’utilisation assez avancés, mais il est très bon de garder cela à l’esprit lorsque vous travaillez avec des séquences de balises limitées à un seul événement de couche de données.

6. Pourquoi utiliser le séquençage des balises ?

Le chargement asynchrone de JavaScript est pris pour acquis de nos jours. C’est un bon moyen pour les navigateurs d’assurer une expérience de navigation décente, même avec des ressources liées volumineuses et volumineuses.

Cependant, JavaScript asynchrone rend difficile l’établissement ordre, car vous ne pouvez pas prédire la fin du chargement d’un script ou d’une bibliothèque. La commande est introduite avec rappels ou alors promessesmais ce sont des concepts difficiles à contourner, et l’interface utilisateur de Google Tag Manager ne vous permet pas nécessairement d’en tirer parti, surtout si vous utilisez des modèles.

Le séquençage vous permet d’exploiter les rappels que GTM établit par défaut (les modèles de balises) ou que vous créez manuellement (balises HTML personnalisées). Il vous permet de chaîner des balises, ce qui est particulièrement utile si vous souhaitez établir des dépendances.