Très souvent, je tombe sur une configuration Google Tag Manager où les propres auditeurs d’événements automatiques de GTM n’effectuent pas la tâche qu’ils étaient censés faire. Les problèmes d’écoute semblent être un sujet brûlant dans Google+ et les forums de produits également.
Il peut y avoir de nombreuses raisons pour lesquelles vos écouteurs ne fonctionnent pas, mais une tendance très courante est que vous avez des bibliothèques ou des scripts JavaScript en conflit en cours d’exécution sur votre page.
Explorons comment les auditeurs fonctionnent avant d’aborder le problème. Vous voyez, lorsque vous attachez un écouteur d’événement à un élément de votre modèle d’objet de document (la collection de tous les éléments de votre page), l’écouteur attend que l’élément produise l’action qu’il écoute.
-
Avec un écouteur de clic de lienle gestionnaire attend un lien (
<a/>) élément pour déclencher un événement de clic. -
Avec un cliquez sur écouteurle gestionnaire attend qu’un élément déclenche un événement click.
-
Avec un formulaire soumettre écouteurle gestionnaire attend un formulaire (
<form/>) pour déclencher un événement submit.
Maintenant, cela devrait toujours être facile à suivre. Vous configurez un écouteur de clic de lien, et quand quelqu’un clique sur un lien, l’écouteur pousse l’événement gtm.linkClick dans l’objet dataLayer. Des trucs banals.
Auditeurs concurrents
Voici l’essentiel. Si vous avez un autre écouteur qui attend AUSSI le même événement, il est possible qu’il interrompe l’événement pour qu’il n’atteigne jamais l’écouteur GTM, ce qui signifie que votre écouteur de clic de lien ne se déclenche jamais.
Comment est-ce possible?
Eh bien, un écouteur de clic de lien GTM, par exemple, n’est pas réellement amorcé sur chaque élément de lien de votre page. Il est plutôt attaché au nœud d’élément DOM le plus élevé possible : le document lui-même. Il utilise une fonctionnalité JavaScript appelée délégation événementielle. Cela signifie que lorsqu’un événement de clic se produit sur un lien, l’événement commence à bulle (oui, c’est un terme officiel) dans l’arborescence DOM, jusqu’à ce qu’il atteigne le nœud le plus haut. Tous les éléments le long de ce chemin bouillonnant auxquels sont attachés des écouteurs se déclencheront lorsque l’événement les atteindra. Cela s’appelle aussi propagation d’événement.
L’image ci-dessous clarifie la différence entre un écouteur sur le nœud de lien et un écouteur sur le nœud de document. Dans l’exemple, j’ai un seul élément de lien avec un classique onClick=”” attribut. En réalité, cet attribut est également un écouteur d’événement. Il attend un événement de clic sur cette balise spécifique. De plus, j’ai le propre écouteur de clics de GTM prêt et prêt. Comme vous pouvez le voir, l’écouteur onClick est attaché au nœud de lien lui-même, tandis que l’écouteur de clic est attaché au nœud de document.
Un exemple pratique
Disons que vous avez une page très simple avec un code source qui ressemble à ceci :
<html> <head> <title>My Page</title> </head> <body> <!-- Google Tag Manager Container here --> <div id="main"> <a href="http://www.google.com">Google</a> </div> </body> </html>Si j’ajoute maintenant un écouteur de clic de lien à mon conteneur GTM, il sera attaché au nœud de document, qui est un parent de niveau supérieur à tous les éléments que vous voyez dans le code ci-dessus.
Désormais, lorsque quelqu’un clique sur le lien, voici ce qui se passe :
-
Tout auditeur attaché au
<a/>l’élément lui-même (par exemple sur clic) sera déclenché en premier, car il est le plus proche de l’occurrence de l’événement -
Tout auditeur attaché au
<div/>l’élément se déclenchera ensuite, car il est le parent immédiat de l’élément où l’événement s’est produit -
Et ainsi de suite jusqu’à l’événement bulles jusqu’au sommet de l’arborescence DOM et atteint le document nœud où l’écouteur de clic de lien GTM attend
Voici la chose. Si à tout moment pendant le voyage pétillant de l’événement vers le sommet de la montagne, son processus est interrompu par un scénario contradictoire, par exemple, l’événement n’atteindra jamais l’auditeur de GTM !
Le coupable le plus courant est un écouteur jQuery concurrent qui contient la ligne de code inquiétante suivante :
return false;
Cela arrête effectivement la progression de l’écouteur d’événement et renvoie l’action à l’élément de lien avec une instruction de type « ne faites pas ce que vous étiez censé faire en premier lieu ».
Un événement très courant est lorsque vous utilisez jQuery pour animer le défilement dans la page vers des liens d’ancrage (c’est-à-dire défilement fluide). J’ai vu un tas de scripts qui détournent l’événement de clic sur le lien, animent la transition vers la bonne partie de la page, et retourner faux ;car, naturellement, ils ne souhaitent pas que le lien effectue son action par défaut consistant à vous transporter instantanément vers la bonne partie de la page.
Quel est le remède ?
Vous devrez en parler à vos développeurs. Dites-leur que vous avez besoin que la propagation des événements fonctionne jusqu’au nœud du document. Habituellement, cela peut être fait en remplaçant
return false;
avec
event.preventDefault();
Bien sûr, vous devrez passer l’événement click à la fonction de gestionnaire en tant que paramètre (un événement dans event.preventDefault();) pour que cela fonctionne. Il peut également y avoir des problèmes entre les navigateurs, alors faites des recherches avant d’apporter des modifications.
.preventDefault() empêche également l’action par défaut de l’événement de clic sur le lien, mais cela n’empêche pas la propagation de l’événement de continuer dans l’arborescence DOM. Vous devrez bien sûr le tester, car le remplacement du code pourrait perturber la fonctionnalité de votre script.
REMARQUE! Si tu utilises event.preventDefault(); OU ALORS retourner faux ;vous devrez décocher Vérifier la validation option dans votre écouteur de clic de lien. Si cette case est cochée, l’écouteur ne se déclenchera pas même si l’événement remonte jusqu’au nœud du document.
conclusion
Comprendre la propagation des événements et le fonctionnement des écouteurs de GTM est l’une des choses que vous ne devrait pas avoir à s’inquiéter lors de l’utilisation de GTM. Après tout, les gestionnaires de balises sont annoncés comme une solution ultime à tous vos problèmes de collecte de données avec des punchlines comme : “Oubliez-le” ou “Plus besoin de développement”.
La dure réalité est qu’un gestionnaire de balises comme GTM n’est qu’une bibliothèque de plus dans la jungle de ressources souvent encombrée du client. Des conflits sont inévitables, en particulier lorsque des ressources externes telles que jQuery sont utilisées pour ajouter des fonctionnalités au site.
D’une part, chaque fois que je travaille avec un site Web complexe, je ne négligerai jamais, JAMAIS, l’unité de développement ou informatique du client. Je vais plutôt leur parler de GTM et travailler avec eux pour élaborer le meilleur plan de mise en œuvre possible, sans compromettre le déploiement frontal actuel.
