Click Element dans GTM : une variable très utile

Voici l’une des variables de clic intégrées de Google Tag Manager qui, à première vue, peut sembler peu utile.

Surtout si tu as essayé de l’utiliser en te basant sur le mode aperçu de GTM et que cela n’a pas fonctionné.

C’est normal, car ce mode peut afficher certaines erreurs de compréhension qui peuvent t’induire en erreur si tu ne te documentes pas correctement.

C’est pourquoi, dans cet article, je veux parler un peu plus de cette variable, qui peut nous sortir d’un mauvais pas à plusieurs reprises.

Cela dit, même s’il existe une partie un peu plus technique -celle liée aux sélecteurs CSS-, je ne vais pas entrer dans les options les plus avancées de la fonctionnalité, mais simplement dans les cas d’usage les plus courants où je lui ai trouvé une utilité.

Mais commençons par le début.

Qu’est-ce que la variable Click Element dans GTM : définition

Eh bien, c’est une variable qui renvoie l’élément sur lequel un utilisateur clique lorsqu’il navigue sur le site.

Tu l’avais probablement déjà deviné rien qu’en voyant son nom, mais autant le confirmer.

Cette variable apparaît lorsqu’un certain auto-listener de GTM est actif, ce qui n’est pas toujours le cas. En fait, lorsque nous commençons avec un nouveau conteneur, il ne l’est pas, mais rassure-toi : tu vas voir qu’il est extrêmement simple de l’activer.

Eh bien, lorsque ce listener est actif et qu’un utilisateur clique sur un lien ou un élément de notre site, des informations relatives à ce clic sont envoyées au Data Layer. Concrètement, ces valeurs :

• gtm.element
• gtm.elementClasses
• gtm.elementTarget
• gtm.elementUrl
• gtm.elementId

Tu peux le vérifier avec l’aperçu :

L’avantage, c’est que tu peux accéder à chacune d’elles au moyen des variables prédéfinies de GTM, comme je vais te l’expliquer.

Une remarque supplémentaire : toutes ces valeurs sont des chaînes de texte, sauf gtm.element, qui est un objet.

Le problème, c’est que, comme je le disais dans l’introduction, lorsque nous observons ses propriétés dans l’aperçu, nous pouvons parfois tomber sur quelque chose comme ceci :

Et non, malgré ce que tu vois ici, ce n’est pas une chaîne, mais un objet.

Un objet qui renvoie tous les attributs de l’élément, par exemple :

• Href : l’URL (s’il s’agit d’un lien, pas d’un autre élément)
• Title
• Texte de l’élément

Ils ne sont pas affichés dans l’aperçu, mais restent accessibles si nous en avons besoin.

Bien, je ne sais pas si ce que je t’ai expliqué jusqu’ici te donne déjà une idée des possibilités de cette variable, mais au cas où ce ne serait pas encore le cas, je vais t’en présenter quelques-unes.

Principaux cas d’usage

À ce jour, il existe deux scénarios principaux dans lesquels Click Element m’a été très utile :

Le premier, c’est lorsque tu veux mesurer les clics sur un ou plusieurs éléments de ton site qui n’ont aucun ID ni aucune classe.

C’est l’usage le plus évident et celui que je vais développer comme exemple dans cet article.

Le second, c’est lorsque tu dois mesurer un clic sur un élément qui contient plusieurs sous-éléments.

Pensez au bouton d’ajout au panier d’un ecommerce, où il est très courant d’avoir un div qui englobe un span avec l’icône et un autre span avec le texte du bouton.

Et bien sûr, ce qui t’intéresse, c’est de mesurer le clic lorsque l’utilisateur appuie sur n’importe lequel d’entre eux.

Sans entrer dans autant de détails que pour le cas précédent, je t’expliquerai ensuite comment faire.

Comment utiliser la variable

Maintenant que nous savons en quoi elle consiste, je vais t’expliquer comment activer cette variable pour que tu puisses commencer à l’utiliser.

Activation de la variable

La première chose à faire est de l’activer dans GTM.

Pour cela, va dans Variables > Variables intégrées et active-la. Tant qu’à faire, active également toutes les autres variables de Clic, car elles sont assez utiles :

Mais cela ne suffit pas, car le listener dont nous parlions au début sera désactivé.

Activation du listener

Mais bon, le mettre en marche est aussi simple que de créer un déclencheur de clic sur un lien ou clic sur n’importe quel élément:

Le simple fait de le créer lancera le listener.

Et pour le vérifier, il suffit de :

1. Activer le mode aperçu.
2. Aller sur le site.
3. Cliquer sur n’importe quel lien ou n’importe quel élément selon le déclencheur que nous avons créé.

Une fois cela fait, tu pourras voir la variable fonctionner comme sur l’image du début :

Bien, maintenant que je t’ai expliqué toute la théorie, passons à la pratique.

Utiliser la variable Click Element de GTM

Voici comment appliquer la variable aux deux cas d’usage que je mentionnais au début.

#1. Liens du menu sans ID ni Class

Dis-moi si ce n’est pas courant : tu veux traquer le nombre de clics sur un ou plusieurs éléments de ton site et, au moment de le faire, tu te rends compte qu’ils n’ont ni ID ni classe que tu puisses exploiter.

Et oui, tu pourrais demander à l’IT de les ajouter et attendre.

Ou tu pourrais utiliser Click Element dès aujourd’hui.

Alors, si tu choisis cette deuxième voie, voici un exemple de la façon dont tu pourrais procéder.

1. Sélectionner le bon attribut CSS pour le déclencheur

Je pars du principe que tu as déjà activé les variables prédéfinies de Clic de GTM et créé au moins un déclencheur Click Element ou Click Link.

Si c’est le cas, la première chose que nous allons faire est de trouver le sélecteur CSS de l’élément dont nous voulons traquer le clic.

Tu as plusieurs possibilités. En voici deux.

1.1 Trouver le sélecteur CSS avec l’inspecteur d’éléments de Chrome

Pour utiliser cette méthode, il est conseillé d’avoir quelques notions minimales de CSS et de HTML.

En réalité, pour l’analytique numérique en général, il est recommandé d’avoir ces connaissances. Plus tôt tu les acquerras, mieux ce sera.

Cela dit, le système est simple :

1. Fais un clic droit avec la souris sur l’élément du menu que nous voulons traquer.
2. Sélectionne "Inspecter" dans le menu contextuel de Chrome pour ouvrir l’Inspecteur.
3. Fais un clic droit sur la balise HTML correspondante (ce sera une balise "a") et sélectionne "Copier le sélecteur".

Voilà, tout est fait.

1.2 Trouver le sélecteur CSS avec une extension Chrome

Si tu n’as aucune base technique et que la solution précédente t’embrouille, tu peux utiliser cette extension Chrome (clique sur l’image pour la télécharger) :

Elle peut t’aider à sélectionner les éléments qui t’intéressent :

C’est une extension freemium, avec des offres payantes et qui exige une inscription via Google. Personnellement, je préfère donc la méthode précédente, mais si tu ne connais rien au HTML, elle peut t’aider.

1.3 Tester

Quelle que soit la méthode suivie, il est intéressant de vérifier que nous avons bien sélectionné ce qui nous intéresse.

Et uniquement ce qui nous intéresse.

Pour le vérifier, j’ajoute une classe dans l’inspecteur d’éléments avec ce que j’ai copié, en cliquant sur l’icône "+" à droite, comme ceci :

Ça peut être quelque chose comme color: red !important ou quelque chose de similaire comme background: red !important.

Quelque chose de voyant qui ressorte beaucoup lorsque je vérifie le site et m’indique ce que j’ai sélectionné. Ainsi, je vois si j’ai sélectionné ce que je veux et uniquement ce que je veux.

Dans ce cas, je vois qu’avec mon sélecteur un seul des trois liens du menu est sélectionné. Je vais donc devoir modifier légèrement le sélecteur pour récupérer les trois.

Ici, il n’y a pas d’astuce, alors c’est peut-être le bon moment d’acquérir ces notions de CSS si tu ne les as pas…

Dans mon cas, je passe de :

#footer-container-main > div > div:nth-child(2) > div.col.col-md.block.block-toggle.block-iqitlinksmanager.block-iqitlinksmanager-1.block-links.js-block-toggle > div > ul > li:nth-child(1) > a

À :

footer-container-main > div > div:nth-child(2) > div.col.col-md.block.block-toggle.block-iqitlinksmanager.block-iqitlinksmanager-1.block-links.js-block-toggle > div > ul > a

Autrement dit, j’ai supprimé la référence au premier élément de la liste, et lors du test j’obtiens ceci :

Ce qui m’indique qu’il s’agit du sélecteur que je cherche et que je peux continuer.

Important: ce sélecteur est très peu optimisé. Il pourrait être affiné et rendu beaucoup, beaucoup plus simple, mais je voulais montrer qu’en obtenir un qui fonctionne n’est pas si compliqué, même si tu n’as que de toutes petites connaissances en HTML.

2. Créer le déclencheur

Une fois le bon sélecteur copié, nous ouvrons GTM et allons dans Déclencheurs > Nouveau et j’en crée un comme ceci :

Explication de chaque champ :

• Nom: comme il est de type Link Click, je commence toujours par "LC -".
• Se déclenche sur: "Certains clics sur les liens". Logique : nous voulons qu’il se déclenche uniquement lorsqu’un utilisateur clique sur les liens du menu du footer.
• Variable: Click Element, celle dont nous parlons.
• Correspondance: il est intéressant de savoir que le type "correspond au sélecteur CSS" n’apparaîtra qu’avec cette variable intégrée ou avec "Form Element". Avec aucune autre variable prédéfinie.
• Valeur: je colle la chaîne de texte que j’ai copiée et testée à l’étape précédente.

Nous enregistrons.

3. Créer la balise GTM

Dans ce cas, puisque nous voulons traquer un événement de clic, nous allons dans Balises > Nouvelle et sélectionnons une "Événement GA4".

Nous la configurons ainsi :

Je te l’explique :

Balise de configuration GA4: je sélectionne la balise générale, où j’ai l’ID de suivi. Si, par hasard, tu ne l’as pas (mais qu’est-ce que tu fais donc à regarder Click Element ?), crée-la d’abord.

Nom de l’événement: celui que tu verras dans ton GA4. Le seul conseil que je peux te donner ici est de soigner la nomenclature et de la garder cohérente avec le reste de ton tableau d’événements.

Paramètres: point important. J’ajoute le "link text", car c’est ainsi que je vais distinguer les clics sur chacun des liens du menu.

Si je ne l’ajoutais pas, j’aurais un événement qui additionnerait les clics sur chacun des liens du menu, mais je ne pourrais pas segmenter et voir les quantités de chacun.

Cela dit, n’oubliez pas de créer la dimension personnalisée correspondante dans GA4 si tu veux exploiter la donnée dans les rapports :

Déclencheur: nous choisissons celui que nous venons de créer :

Une fois la balise enregistrée, il ne reste plus qu’à vérifier qu’elle fonctionne comme prévu.

4. Test

Nous devons nous assurer que tout fonctionne correctement aussi bien au niveau de GTM qu’au niveau d’Analytics, nous vérifierons donc les deux.

Aperçu de GTM

Nous activons le mode aperçu, allons sur le site et cliquons sur les liens.

Si tout s’est bien passé, nous verrons que la balise se déclenche au bon moment :

Important: il est possible que tu voies deux événements Link Click dans l’aperçu pour chaque clic que tu effectues sur les liens, comme cela m’arrive :

Cela est très probablement dû au fait que, comme moi, tu as activé le tracking des clics sortants dans la mesure améliorée de GA4.

En réalité, cela ne pose aucun problème, car la balise ne se déclenche que sur l’un des deux clics jumeaux et, par conséquent, un seul événement est envoyé à Analytics, ce qui est correct.

Ici, tu peux voir qu’elle ne se déclenche pas sur l’autre :

Nous laissons temporairement GTM.

DebugView dans GA4

Nous ouvrons notre propriété GA4 et allons dans Administration > DebugView.

Puis nous cliquons à nouveau sur les éléments du site que je veux traquer.

Nous devrions alors voir quelque chose comme ceci :

Ce qui nous indique que nous collectons les événements correctement.

Pour vérifier que le paramètre est bien envoyé, nous cliquons sur l’événement puis sur le paramètre correspondant. Sa valeur se déplie :

Tout semble correct, mais n’oublie pas : si tu n’as pas de dimension personnalisée qui collecte la valeur de ce paramètre, tu ne pourras pas voir ses données dans les rapports, même si cette vue les affiche.

Compris ?

Il ne nous resterait donc plus qu’à publier le conteneur GTM pour commencer à collecter les clics des utilisateurs.

#2. Clics sur des éléments groupés

Passons au deuxième cas d’usage le plus courant.

Regarde cet exemple de bouton d’ajout au panier :

Voici son code HTML :

Comme on peut le voir, la structure est un button qui regroupe deux i avec l’icône et le texte.

Si j’active l’aperçu de GTM et que je clique sur le bouton, selon l’endroit précis où je clique, j’obtiens ceci (si je clique sur l’icône) :

Ou ceci (si je clique sur le texte) :

Même si tu ne peux pas le lire, on voit que c’est différent.

Mais bien sûr, moi je veux traquer les clics sur n’importe lequel des éléments qui composent le bouton comme un seul.

J’ai donc deux solutions :

• La facile: créer dans GTM trois règles avec trois événements et trois déclencheurs différents, un pour chaque élément.
• La bonne: utiliser Click Element et un déclencheur comme ceci :

En choisissant "Correspond au sélecteur CSS" et en entrant comme valeur le sélecteur :

• La classe du bouton (".add-to-cart").
• Et celle de ses nœuds enfants (".add-to-cart *").

Les clics sur n’importe quelle partie du bouton (icône, texte) seront également collectés.

Pas mal, non ?

Oui, maaaais…

Recommandations

Utiliser des déclencheurs avec des sélecteurs CSS comporte un risque.

Surtout si tu ne gères pas toi-même le code du site.

La raison ?

Simple : à tout moment, l’équipe de développement peut effectuer un changement dans le code qui fera que ton sélecteur cessera de récupérer l’élément voulu. Cela est plus probable sur les sites qui sont continuellement mis à jour.

Dans une moindre mesure, cela peut aussi t’arriver avec une mise à jour du thème ou d’un plugin dans ton CMS.

Alors, Click Element n’est pas utile avec cette configuration ?

Pas du tout, il est très utile, mais je veux que tu sois conscient de son principal inconvénient.

D’un autre côté, pour les plus techies, sachez que la console développeur t’apporte beaucoup plus d’informations sur cette variable de type objet.

Pour les voir, il suffit d’ouvrir la console et d’écrire "dataLayer" :

Tu navigues maintenant jusqu’à l’élément et déplies toutes les valeurs :

L’image ne t’en montre que quelques-unes, mais il y en a énormément.

À partir de là, c’est à toi et à JavaScript d’accéder à quelques possibilités supplémentaires, comme voir le nœud parent :

Et obtenir la classe de son nœud parent avec gtm.element.parentElement.className au moyen d’une variable Data Layer de GTM :

Ou encore utiliser gtm.element.firstChild.id pour accéder à l’ID du premier nœud enfant en suivant la même procédure.

Conclusion

Click Element est probablement la variable de clic prédéfinie la plus puissante de GTM.

C’est aussi la plus difficile à bien utiliser au début.

Mais elle en vaut la peine, car dans certains scénarios elle nous sauvera la vie.

Bon, cette affirmation est peut-être un peu exagérée, mais au moins elle nous fera gagner du temps.

J’espère qu’avec ces quelques notions tu pourras en tirer parti dans tes projets.