Les déclencheurs

Pour que le code d’une balise s’exécute sur les pages de votre site web, il faut l’associer à un déclencheur. Nous allons donc nous pencher sur le fonctionnement et les différents types de déclencheurs qui existent dans Google Tag Manager.

Un déclencheur est une condition

Il faut bien comprendre qu’un déclencheur est une condition qui, si elle est respectée, permettra à votre balise d’être envoyée sur votre site web. Chaque condition se base sur un élément de contexte (L’URL de la page, un bouton cliqué, un formulaire envoyé) que l’on vient comparer avec une valeur définie par nos soins.

On découpera la condition en trois partie :

• L’élément à comparer (l’URL d’une page, un identifiant de formulaire, une classe d’un lien, etc.)
• Un opérateur de comparaison (est égal, contient, est plus grand que, etc.)
• Une valeur fixe (qui nous sert à délimiter la condition à un usage précis)

Voici des exemples avec une syntaxe édulcorée pour vous aider à mieux comprendre de quoi il s’agit:

“URL de la page” “contient” “/blog”
(La balise s’exécutera sur la page /blog mais aussi sur des pages comme /blog/mon-article)

“Identifiant du formulaire” “est égale à” “contact-form"
(La balise s’exécutera à la soumission d’un formulaire ayant pour identifiant contact-form)

“Classe du lien” “contient” “btn-action“
(La balise s’exécutera pour tous les clics sur des liens avec une classe btn-action)

Cibler un élément dans une page

Certains déclencheurs nécessiteront de fournir des informations sur l’élément de la page que vous souhaitez suivre (un lien ou un formulaire par exemple).

Pour localiser l’élément concerné dans le code de la page, faites un clic droit dessus, puis cliquez sur “inspecter”. Un panneau s’ouvre à gauche (ou en bas) de votre navigateur et expose le code source de la page, tout en affichant la balise HTML correspondant à l’élément en surbrillance bleue.

Si vous lisez attentivement le code de la balise mise en évidence, vous remarquerez qu’elle possède normalement des attributs.

Si vous avez ciblé un élément standard, je vous invite à localiser la balise HTML en question et à identifier les attributs id et class qu’il pourrait y avoir dessus.

Si vous avez ciblé un formulaire, je vous invite à localiser la balise <form> et à identifier les attributs id, class et action.

Si vous avez ciblé un lien, je vous invite à localiser la balise <a> et à identifier les attributs id, class et href.

Comprenez globalement que nous sommes à la recherche de valeur d’attributs relativement uniques pour éviter que notre condition de déclenchement ne soit trop générale et n’englobe des éléments non désirés, ce qui fausserait nos rapports de données.

Pour choisir sur quel attribut de ma balise HTML je dois me focaliser, voici une liste par ordre d’importance (et de facilité). Si vous ne trouvez pas le premier élément sur votre balise HTML, passez au second et ainsi de suite.

1. Attribut id (forcément unique sur la page, s'il y en a un, c’est gagné !)
2. Attribut class (Lisez les différentes valeurs et regardez si elles semblent propres à l’élément)
3. Attribut href (uniquement pour les liens)
4. Attribut action(uniquement pour les formulaires)
5. Le texte de l’élément situé entre l’ouverture et la fermeture de la balise HTML

Ces attributs font partie du contexte de l’élément et seront accessibles simplement via l’interface du Tag Manager au travers de “variables” (que nous détaillerons dans le prochain épisode) pour vous aider dans la confection de votre déclencheur. Même si ce passage est encore flou dans votre esprit, dès votre première manipulation, tout devrait se mettre en ordre.

Les différents types de déclencheurs

Pour couvrir un maximum de cas d’usage, Google Tag Manager propose une variété de types de déclencheurs pour vous aider à suivre ce qui vous intéresse vraiment. Nous allons passer en revue chaque type de déclencheur, et expliquer leur cas d’usage réel et les limitations associées.

Les déclencheurs liés aux états de chargement d’une page

Lorsqu’une page se charge, votre navigateur passe par plein d’états successifs qui peuvent être utiles à vos balises.

• Le déclencheur “Initialisation du consentement” sera utilisé pour déclencher une balise contenant votre bandeau cookie.
• Le déclencheur “Page vue” sera utile pour détecter une simple vue d’une page, comme une page de succès ou une page spécifique de votre site (très pratique).
• Le déclencheur “DOM prêt” sera plus utile pour les profils techniques qui veulent déclencher une balise dès que la liste des balises HTML de la page est prête, sans avoir à attendre la fin de chargement complet de la page (cas d’usage plutôt rare).
• Quant au déclencheurs “Initialisation” et “Fenêtre chargée”, je ne les utilise presque jamais.

Ce type de déclencheur vous propose deux configurations possibles :

• Toutes les occurrences (utile pour envoyer une balise Google Analytics sur toutes vos pages)
• Certaines occurrences (utile pour cibler une page ou un groupe de pages en particulier)

Si vous avez choisi “certaines occurrences” un petit formulaire en trois champs apparaitra pour vous permettre de configurer une condition.

Vous pourrez définir dans le premier champ la variable {{Page URL}} pour comparer une URL entière ou la variable {{Page path}} pour comparer simplement le chemin de la page.

Il faudra ensuite définir l’opérateur sur “est égal à”, ou si nécessaire “contient”. Et dans le dernier champ, saisissez la valeur correspondant à l’URL ou au chemin de votre page en fonction de la variable saisie dans le premier champ.

Détecter un clic sur un élément

Dans la plupart des cas, les éléments que vous souhaitez suivre et qui vous poussent à faire cette formation GTM sont cliquables, soit sous forme de boutons d’action, soit de liens de navigation.

Pour suivre les clics sur un élément (qui n’est pas un lien), nous allons devoir utiliser le déclencheur “Clic - Tous les éléments”, sélectionnez-le dans la liste.

Plus bas, vous retrouverez un choix :

• Tous les clics (Oui, TOUS, vous n’aurez jamais a choisir cette option pour ce type de déclencheur, sauf si vous souhaitez vous spammer vous-même).
• Certains clics (L’option à privilégier, bien entendu).

Cette deuxième option aura pour effet d’afficher l’interface de configuration de votre condition. Comme évoqué précédemment, vous devrez cibler un élément en particulier à partir de ses attributs HTML. Pour l’exemple, imaginez une balise <button> comme celle-ci, qui, au clic, affiche un popup) :

<button class="btn btn-primary" id="open-popup">
    Afficher le popup
</button> 

Dans ce cas de figure, je dispose de deux attributs, j’ai donc du choix. Si je reprends la check-list, je dois me baser sur l’attribut id de la balise, mais nous allons quand même nous intéresser aux autres attributs, histoire de comprendre pourquoi id reste la meilleure option.

Si on regarde les deux class listées ici (btn et btn-primary), on peut imaginer qu’elles soient très probablement réutilisées sur le site à chaque occurrence d’un bouton à l’apparence similaire. Ces class ne sont donc probablement pas uniques sur le site.

Le texte du bouton peut être amené à changer (site multilingue, changement par l'éditeur, etc..) De manière générale, je n’utiliserai le texte que si je ne dispose pas d’id ou de class.

Maintenant que nous avons déterminé l’attribut à cibler, il faut choisir la variable correspondante pour terminer notre configuration. Par défaut, GTM n’affiche pas la variable qui nous intéresse ici. Pour y accéder, cliquez dans le premier champ (sélecteur) et cliquez ensuite sur “Choisir une variable intégrée…”, puis sélectionnez “Click ID” dans la liste.

Une fois la variable Click ID sélectionnée, il vous suffira de définir l’opérateur sur “est égal à”, et enfin, saisir la valeur exacte open-popup dans le dernier champ (qui correspond à la valeur de l’attribut id sur la balise HTML).

Si vous avez tout compris, le reste, c’est du gâteau ! (Un Paris-Brest pour moi, merci).

Détecter un clic sur un lien

Après avoir lu comment suivre un clic sur un élément de la page, qui m’a permis de poser la logique globale pour beaucoup de types de déclencheurs à venir, tout devient plus simple.

Pour suivre un clic sur un lien, il faudra appliquer exactement la même logique. Alors, pourquoi Google Tag Manager dispose de deux types de déclencheurs ? Un lien, c’est bien un “élément” aussi, non ? Et vous avez raison, mais laissez-moi vous expliquer un petit détail qui change tout.

Lorsque vous utilisez le déclencheur “Clic - Tous les éléments”, l’élément ciblé sera forcément la balise HTML la plus profonde cliquée par l’utilisateur (par profonde, comprenez “qui n’a pas/plus de balise HTML à l’intérieur”).

Je m'explique : si vous souhaitez cibler un élément construit à partir de plusieurs balises HTML insérées (par exemple, un élément qui présente votre dernier article avec une image, un titre, un petit texte, le tout cliquable pour accéder à l’article en question).

<a class="carte-cliquable-article"><!-- STOP déclencheur clic lien (ce que l'on souhaite) -->
    <img src="/images/mon-super-article.png" alt=""><!-- STOP déclencheur clic élément 1 (pas bien)-->
    <div>
        <h3>Le titre de mon article</h3><!-- STOP déclencheur clic élément 2 (pas bien) -->
	<p>Description de l'article</p><!-- STOP déclencheur clic élément 3 (pas bien) -->
    </div>
</a>

Au moment ou l’utilisateur clique dessus, vous ne pourrez pas prédire s'il va cliquer sur l’image, le titre ou le petit texte. C’est problématique car il faudrait créer trois déclencheurs distincts pour couvrir tous les cas de figure.

A l’inverse, le type de déclencheur “Clic - Liens uniquement” s’arrêtera toujours au niveau de la balise HTML <a>, même si cette dernière contient d’autres balises HTML. Cette petite différence de comportement entre ces deux types de déclencheurs est cruciale et va vous faire gagner du temps (et garder votre santé mentale également).

Retournons à notre configuration. Une fois le choix du déclencheur fait, nous avons cette fois-ci, deux options supplémentaires :

• Attendre les balises permet de définir si votre balise doit se déclencher explicitement après une autre balise que vous avez déjà configurée (pour des cas spéciaux)
• Vérifier la validation permet de s’assurer que le lien cliqué est un lien valide, mais consomme des ressources et n’apporte pas une grande plus value, je la laisse systématiquement décochée.

Vous trouverez ensuite le choix entre tous les liens ou certains liens (vous choisirez certains liens) et compléterez le formulaire comme évoqué pour le déclencheur de clics sur des éléments).

Détecter la soumission d’un formulaire

Pour suivre un formulaire depuis votre site web, nous allons de nouveau devoir cibler une balise HTML dans votre page et lui appliquer une condition.

Pour cibler le formulaire dans votre page, cliquez sur le premier champ visible et faites un clic droit puis “Inspecter”. Dans le volet qui s’est ouvert, remontez de quelques lignes la structure HTML et localisez la balise <form>.

Je pars du constat que votre site est bien développé et que vous avez localisé la balise <form>, essayez ensuite de trouver les attributs id, class et action sur cette même balise.

Une fois localisés, vous pouvez créer votre déclencheur de type “Envoi de formulaire” et débuter la configuration.

Sélectionnez “Certains formulaires” et complétez le sélecteur de manière à cibler votre balise <form> le plus efficacement possible. Pour afficher les variables de formulaires, cliquez sur “Choisir une variable intégré…” dans le premier champ. Choisissez ensuite la variable la plus adaptée entre Form ID, Form Classes et Form URL.

Votre configuration devrait ressembler à une de ces options:

• “Form ID” - “est égal à” - “valeur de l’attribut id de la balise <form>”
• “Form Classes” - “contient” - “valeur de l’attribut class de la balise <form>”
• “Form URL” - “est égal à (ou contient)” - “valeur de l’attribut action de la balise <form>”

Suivre la profondeur de scroll dans une page

Pour suivre la profondeur de défilement dans la page, vous pouvez sélectionner le déclencheur “Profondeur de défilement”. Ce déclencheur peut être utile pour déterminer si vos utilisateurs lisent vos contenus longs jusqu’au bout.

Vous aurez le choix dans la direction du scroll (aujourd’hui, la grande majorité des sites scrollent de manière verticale, à l’exception de certains sites jugés plus créatifs).

Cochez “Profondeur de défilement vertical”. Vous avez ensuite le choix entre une mesure en pourcentage ou en pixels. On utilise généralement une mesure exprimée en pourcentage pour sa faible variation en fonction des appareils. À l’inverse, une profondeur exprimée en pixels va beaucoup varier en fonction de la largeur des écrans et du contenu du site web.

Dans cet exemple, je vais saisir 75 % de profondeur de défilement vertical.

Vous aurez la possibilité de définir à partir de quand le déclencheur doit s’activer, mais encore une fois, je vous recommande de laisser la configuration initiale. Changer cette configuration peut provoquer des erreurs de calcul de profondeur de la page tant que cette dernière n’est pas complètement chargée.

Vous pouvez ensuite limiter l’exécution de ce déclencheur à certaines URL de votre site, comme par exemple aux articles de votre blog uniquement. Il faudra cocher l’option “Certaines pages” puis renseigner une condition comme celle-ci :

• “Page Path” - “correspond à l’expression régulière” - “/blog/*"

Suivre les états de lecture d’une vidéo YouTube

Si vous disposez de vidéos YouTube embarquées dans votre site web, vous avez la possibilité de suivre avec précision la manière dont les utilisateurs interagissent avec le lecteur.

Localisez la balise <iframe> servant à afficher la vidéo YouTube dans votre page.

Voici à quoi devrait ressembler le code de votre vidéo YouTube :

<iframe src="https://www.youtube.com/embed/XXXXXXXXX"
width="560
height="315"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin"
allowfullscreen></iframe>

Par défaut, le code partagé par YouTube ne contient pas d’attribut id ou class. Si vous avez la main sur le code, n’hésitez pas à en rajouter un vous-même pour simplifier le ciblage de la balise.

Dans l’interface de GTM, saisissez le déclencheur de type “Vidéo YouTube” pour commencer la configuration. Vous aurez alors la possibilité de détecter les comportements utilisateurs suivants :

• Lancement de la vidéo
• Vidéo terminée
• Vidéo en pause, utilisateur avançant/reculant la vidéo et mise en mémoire tampon
• Progression de la vidéo

Il vous suffira de cocher le ou les comportements souhaités. Pour plus de précision dans votre collecte de données, ne cochez qu’un comportement et créez autant de déclencheurs que nécessaire.

Pour fonctionner correctement, votre balise <iframe> doit être modifiée afin d’ajouter à l’attribut src le paramètre d’URL enablejsapi=1. L’ajout de ce paramètre aura pour effet de rendre toutes les actions de l’utilisateur sur les boutons du lecteur détectables par votre navigateur, et donc par Google Tag Manager. (Plus d’explications sur la documentation officielle de YouTube).

L’attribut src de votre balise <iframe> devrait finalement ressembler à ça :

src="https://www.youtube.com/embed/XXXXXXXXX?enablejsapi=1"

Si vous n’êtes pas en capacité de modifier le code de votre page web, il vous suffira simplement de cocher la case “Activer la compatibilité avec l'API JavaScript pour toutes les vidéos YouTube”, mais je ne le recommande qu’en dernier recours (pour des raisons de performance web).

Vous pourrez modifier à partir de quelle étape du chargement de votre page le déclencheur va se mettre à observer les comportements utilisateurs sur votre lecteur YouTube, je vous invite à laisser la configuration initiale.

Il ne vous restera plus qu’à cibler la balise <iframe> en cochant la case “Certaines vidéos” puis en complétant la condition à partir des attributs HTML présents sur la balise.

Détecter l’apparition d’un élément à l’écran

Ce déclencheur est plus rarement utilisé mais dispose de plusieurs cas d’usage assez pratiques.

Le premier est pour détecter si un élément de la page est apparu à l’écran de l’utilisateur. On pourra par exemple cibler un bandeau promotionnel ou une section importante située sous la ligne de flottaison de votre site web. Vous pourrez enfin savoir quel est le pourcentage de vos utilisateurs qui voient réellement cette section.

Je m’en sers également pour comptabiliser le nombre de fois qu’une slide d’un slider (carrousel) passe à l’écran. Vous pourrez facilement remarquer que personne ne consulte les slides les plus éloignées. C’est en parti pour cette raison que les carrousels sont de moins en moins présents sur les sites de nos jours.

Pour configurer ce type de déclencheur, sélectionnez “Visibilité de l’élément”. Vous pourrez alors choisir comment cibler l’élément en question.

Si vous sélectionnez “ID”, vous devez vous assurer que l’élément possède un attribut id, c’est le mode de ciblage le plus simple.

Si vous sélectionnez “Sélecteur CSS”, vous devrez rédiger en utilisant la syntaxe CSS pour cibler l’élément. Par exemple div.ma-section pour une div avec une classe CSS ma-section.

Une fois votre élément ciblé, vous devez définir la sensibilité du déclencheur :

• Une fois par page (même si l’élément est affiché plusieurs fois sur la même page)
• Une fois par élément (à la première occurrence affichée de la page)
• Chaque fois qu’un élément apparait à l’écran (risque de SPAM)

Vous devrez ensuite définir quelle est la proportion de l’élément qui doit être visible sur la page pour que le déclencheur considère que l’élément à été visualisé par l’utilisateur. Vous pouvez également définir un temps minimal d’affichage nécessaire (en milliseconde).

La case à cocher “Observer les modifications du DOM” permet à votre Tag Manager de rester aux aguets en cas de mise à jour de la structure de la page depuis un code JavaScript (comme un scroll infini qui rajoute des éléments au fur et à mesure que vous scrollez). Sauf si vous êtes dans un cas spécifique, laissez cette case décochée.

Pour terminer, vous avez la possibilité de rajouter une condition complémentaire, permettant par exemple de limiter la détection à certaines URL de page. Si vous souhaitez cibler l’élément sur tout le site, laissez la première option “Tous les événements de visibilité” cochée.

Détecter des erreurs JavaScript

Afin de couvrir tous les types de déclencheurs, je me dois de vous parler du déclencheur “Erreur JavaScript” qui ne m’est pas vraiment très utile et je vais vous expliquer pourquoi.

Ce déclencheur sera actif dès qu’une erreur JavaScript sera affichée dans la console (F12 si vous voulez accéder à la console). Vous pouvez vous dire que c’est une bonne idée, si il y a des erreurs, vous souhaitez en être informé pour réagir au plus vite, non ? Alors oui, mais en réalité, c’est plutôt le rôle d’outils comme Sentry.

Le souci, c’est que sur une page web, il n’y a pas que le code de votre site qui est exécuté, il y’a aussi celui de vos extensions de navigateur, et c’est ça le souci ! Les extensions de navigateurs génèrent beaucoup d’erreurs de JavaScript (soit intentionnellement comme votre AdBlocker qui bloque les publicités et génère une erreur pour celle-ci, soit de manière involontaire à cause d’un développement trop amateur).

Vous ne voulez pas relever toutes les erreurs des extensions de navigateur de vos visiteurs. C’est pour cette raison que je n’utilise plus ce déclencheur.

Si vous souhaitez tout de même vous en servir (dans un environnement contrôlé, type intranet d'entreprise, etc…) vous pouvez définir une condition pour limiter la détection à certaines pages de votre site web, par exemple. La logique reste la même que pour les déclencheurs habituels.

Déclencher une action après un temps donné

Lorsque vous souhaitez mesurer un minimum de temps passé par vos visiteurs sur votre site web ou une partie, vous pouvez utiliser un déclencheur de type “Minuteur”. Ce déclencheur dispose de deux champs de configuration assez simples :

• L’intervalle, à définir en milliseconde avant le déclenchement
• La limite (limitez à 1 pour un seul déclenchement, laissez vide pour un déclenchement récurrent à chaque intervalle).

Vous aurez par la suite la possibilité de limiter les déclencheurs de différentes manières, toujours en configurant une condition de déclenchement.

Détecter des modifications de l’historique

Ce déclencheur peut sembler inutile à première vue mais permet de régler des soucis liés au chargement des pages dans une application dite SPA (Single Page Application).

Dans un site web réalisé avec des technologies “réactives” (développées avec React, Vue ou Angular par exemple), les pages de votre site web ne se rechargent pas vraiment lorsque vous cliquez sur un lien interne, c’est plutôt le contenu de la page suivante qui vient et remplace le contenu de la page actuelle.

Ce comportement très fluide pour l’utilisateur final ne respecte pas la logique de fonctionnement de votre navigateur qui n’émettra alors pas d’information de changement de page. Sans cette information de changement de page, impossible pour vos balises GA4 ou autres de savoir qu’un utilisateur a changé de page.

Par chance, ces technologies “réactives” poussent une information de changement d’historique afin de permettre à l’utilisateur de revenir en arrière si il le souhaite. C’est ce mécanisme que nous allons utiliser pour combler le manque d’information de votre navigateur.

En clair, pour déclencher une balise sur chaque page de votre application “réactive” SPA, il faudra deux types de déclencheurs :

• Page vue : pour la première page qui se charge sur votre site.
• Changement d’historique : pour toutes les pages qui se chargeront depuis un clic sur un lien interne.

C’est un cas d’usage spécifique, qu’il vaut mieux comprendre et maitriser si vous disposez d’un site réalisé sous forme d’une SPA.

Détecter des événements de dataLayer

Pour comprendre comment fonctionne un déclencheur d’événement de dataLayer, il faut comprendre ce qu’est un dataLayer. Un épisode complet de cette formation est dédié au concept et à la manipulation du dataLayer de Google Tag Manager.

Mais ici et pour faire simple, le dataLayer (ou couche de données en français) est un morceau de code JavaScript permettant à votre site web de communiquer directement avec GTM.

Dans ce code JavaScript, vous ajouterez une valeur à la clé event comme dans le code suivant :

dataLayer.push({
    event: 'demo',
});

Le but étant d’ajouter ce code à votre site de manière à ce qu’il s’exécute à un moment précis de la navigation de vos utilisateurs. Les navigateurs de vos utilisateurs enverront alors l’information demo au Tag Manager.

En l’état rien ne se passe, mais si vous créez un déclencheur d’événement de dataLayer pour intercepter cette information, vous serez en capacité de déclencher une balise associée. Il vous suffit de saisir le nom de l’événement (ici demo) dans le champ prévu à cet effet de l’interface de configuration du déclencheur.

Cette technique est la plus précise de toute, elle peut remplacer tous les déclencheurs vus jusqu’à présent, mais nécessite des compétences techniques et un accès complet au code source.

Si vous disposez d’une équipe technique, ce type de déclencheur est à privilégier ! C’est un mode de détection passif, qui sera le plus économe en termes de ressources pour votre Tag Manager. En clair, c’est votre site web qui dit au Tag Manager quand il se passe quelque chose et non votre Tag Manager qui reste constamment en alerte pour surveiller.

On en reparle plus en détail dans un article dédié au sujet dans la suite de cette formation !

Regrouper plusieurs types de déclencheurs ensemble

Maintenant que nous avons parcouru tous les types de déclencheurs, nous allons nous intéresser aux groupes de déclencheurs. Vous avez la possibilité de créer un déclencheur qui se base sur plusieurs déclencheurs déjà créés. Votre nouveau déclencheur devra respecter les conditions de chacun des déclencheurs sélectionnés, c’est une condition “ET” qui s’applique.

Cette technique est souvent utilisée pour gérer les états de consentement de votre bandeau cookie et ne déclencher des balises que si vous avez le consentement (déclencheur 1) et qu’un changement de page se produit (déclencheur 2).

Pour cela, sélectionnez le déclencheur de type “Groupe de déclencheurs” et choisissez les déclencheurs à combiner (vous pouvez créer vos déclencheurs à la volée depuis l’overlay qui s’ouvre en cliquant sur le petit “plus” bleu en haut à droite).

Optimiser les configurations des déclencheurs

Vous l’aurez remarqué, pour chaque condition, il existe une multitude de combinaisons possibles, comment choisir ? Et surtout, quelles sont les combinaisons à favoriser ? Voici quelques astuces pour gagner du temps et rendre votre configuration solide et efficace :

Lorsque vous ciblez un attribut id, l’opérateur sera toujours “est égal à”. Un id est normalement forcément unique sur la page (sinon c’est considéré comme une erreur de développement), pas besoin de laisser votre opérateur sur “contient”.

Lorsque vous ciblez un attribut class, l’opérateur sera toujours “contient” car un attribut class est une liste (qui ne peut contenir qu’une valeur), mais une liste quand même. Cette liste peut être amenée à évoluer avec le temps, en y ajoutant d’autres valeurs. Si vous aviez sélectionné “est égal à”, votre déclencheur ne fonctionnera plus.

Si vous avez la main sur le code source de votre page et que vous avez envie de rajouter des class ou des id dans votre structure, préfixez les toujours par tms-.

Pourquoi tms-mon-element et pas gtm-mon-element alors ? C’est une approche agnostique, vous ne saurez pas toujours quel Tag Manager sera utilisé, utiliser un préfixe générique qui ne contient pas le nom d’un Tag Manager en particulier permet de ne pas acter les choses. (Sur ce site, j’ai Google Tag Manager et Matomo Tag Manager, ça me permet de rester cohérent).

Convention de nommage des déclencheurs

A force de créer des balises et des déclencheurs, nommer les choses efficacement deviendra de plus en plus compliqué. Je vous invite donc à suivre une convention de nommage pour vos déclencheurs.

Habituellement, je préfixe tous mes déclencheurs par un mot clé reprenant le type de déclencheur en anglais, voici un exemple pour les plus communs :

• Page pour “Page vue”
• Click pour “Clic - Tous les éléments“
• Link pour “Clic - Liens uniquement”
• Form pour “Envoi de formulaire”
• Custom Event pour les événements personnalisés de dataLayer

Ensuite, j’ajoute un tiret (-) puis la configuration du déclencheur, et si besoin, un libellé entre parenthèses. Par exemple, pour un déclencheur de soumission d’un formulaire avec un id égal à contact-form sera :

Form - #contact-form (Formulaire de contact)

Je retrouve mon préfixe “Form”, ma configuration #contact-form (# pour dire “id égale à” en CSS) et entre parenthèse un descriptif. Cette approche est un peu technique, mais couvre beaucoup de cas de figure et à l’avantage d’être très explicite, en lisant le nom, je n’ai pas besoin d’ouvrir le déclencheur pour en comprendre sa configuration.

C’est une convention, libre à vous de l’adapter selon vos besoins, mais au minimum, préfixez vos déclencheurs par leur type, ça vous aidera à vous y retrouver.

Supprimer les déclencheurs inutilisés

Lorsque l’on supprime une balise que l’on ne souhaite plus conserver, le déclencheur associé n’est pas automatiquement supprimé. Au bout d’un certain temps, votre conteneur peut avoir une multitude de déclencheurs créés auparavant mais aujourd’hui inutilisés, il est donc préférable de les supprimer pour garder un environnement simple et ordonné.

Pour cela, rendez-vous dans la page de gestion des déclencheurs, filtrez les déclencheurs par nombre de balises associées en cliquant sur l’entête du tableau nommé “Balises” (cliquez une seconde fois pour filtrer par ordre décroissant). Identifiez et sélectionnez les déclencheurs ayant 0 balises associées et supprimez-les tous d’un coup en cliquant sur la petite poubelle (qui n’apparait que lorsqu’au moins un déclencheur est sélectionné).

0 commentaires

Soyez le premier à commenter cet épisode.