Parce que je m’ennuyais, j’ai fait un test rapide pour trier l’ordre de tir des auditeurs GTM concurrents. Si vous avez fait vos devoirs (par exemple, lisez mon article sur les écouteurs GTM), vous vous souviendrez que les écouteurs GTM sont configurés sur le document nœud du modèle d’objet de document (DOM). Je voulais tester quel est l’ordre de tir si vous avez plusieurs auditeurs concurrents sur la même page.
J’ai testé avec les auditeurs suivants (assurez-vous de lire sur le suivi automatique des événements si vous êtes complètement déconcerté à ce stade):
-
Écouteur de soumission de formulaire – écoute un événement de soumission sur un formulaire
-
Click Listener – écoute un événement de clic sur n’importe quel élément
-
Link Click Listener – écoute un événement de clic sur un élément de lien
-
History Listener – écoute les changements dans l’historique du navigateur
La prémisse
J’ai eu un très page HTML simple, avec seulement deux boutons. L’un était le bouton d’envoi d’un formulaire vide, l’autre un élément de bouton HTML5, enveloppé dans un lien.
Pour rendre les choses plus intéressantes, j’ai également enveloppé le bouton d’envoi du formulaire dans un lien, car je voulais voir ce qui se passait. Ce n’est pas comme si vous rencontriez un jour une implémentation idiote comme celle-là dans la vraie vie. J’espère.
Voici à quoi ressemblait le code :
<!DOCTYPE html> <html> <head> <title>Just testing</title> </head> <body> <!-- GOOGLE TAG MANAGER CONTAINER WAS HERE --> <form action="#form"> <a href="?formlink"> <input type="submit" value="Form test"/> </a> </form> <a href="?buttonlink"> <button>Link test</button> </a> </body> </html>Très simple, non ? J’ai utilisé des paramètres de requête dans les liens simplement parce que je voulais voir ce qu’il advenait du {{URL}} macro lorsque différents auditeurs ont tiré.
J’ai créé une balise HTML personnalisée pour chaque auditeur, avec juste un simple dialogue d’alerte. Voici à quoi ressemblait mon tag de clic :
<script> alert("Click occurred on " + {{url}}); </script>
Et idem pour tous les autres auditeurs. Ainsi, chaque fois qu’un écouteur se déclenche, une alerte est affichée. Juste en suivant la séquence de ces alertes, je devrais toujours voir quel est l’ordre de tir.
Résultat
Voici ce qui s’est passé Chrome et Safari:
Cliquez sur “Test de formulaire”
-
Alerte: Cliquez sur le lien s’est produit sur (URL actuelle)
-
Alerte: Cliquez sur s’est produit sur (URL actuelle)
-
Alerte: Soumettre le formulaire s’est produit sur (URL actuelle)
-
Alerte: Événement historique s’est produit le (URL actuelle + ?#formulaire)
Donc la commande est :
Cliquez sur le lien -> Cliquez sur -> Soumettre le formulaire
L’écouteur d’historique se déclenche parce que le formulaire me transporte vers l’URL ?#form (c’est dans le action attribut de l’élément de formulaire), et dans Chrome et Safari cela déclenche un état pop un événement.
Cliquez sur “Tester le lien”
-
Alerte: Cliquez sur le lien s’est produit sur (URL actuelle)
-
Alerte: Cliquez sur s’est produit sur (URL actuelle)
-
Alerte: Événement historique s’est produit le (URL actuelle + ?boutonlien)
Et la commande est :
Cliquez sur le lien -> Cliquez
L’écouteur d’histoire tire cette fois aussi sur état popcar l’entrée d’historique active est changée en ?buttonlink grâce à l’action par défaut du lien.
Avec Firefox, l’écouteur d’historique ne se déclenche pas lors du chargement de la page, vous ne recevrez donc pas d’alerte pour les changements d’événements d’historique. Sinon, la séquence est la même.
conclusion
Le résultat de ce test simple est que vos écouteurs GTM se déclenchent dans l’ordre suivant :
Cliquez sur le lien -> Cliquez sur -> Soumettre le formulaire
N’oubliez pas que tous les autres écouteurs que vous pourriez avoir configurés sur les nœuds d’élément eux-mêmes (par exemple onClick) seront déclenchés en premier. Par exemple, si vous avez un pushState() appel envoyé lors du clic sur un lien de navigation, cela changera l’URL (si vous la passez en paramètre) avant que votre écouteur de clic de lien se déclenche. Ceci, à son tour, signifie que si vous avez un événement envoyé à GA avec gtm.linkClick comme règle de déclenchement d’événement, vous verrez l’URL définie dans pushState() comme la page où le clic sur le lien s’est produit !
Assurez-vous que vous comprenez comment les auditeurs se font concurrence. Les écouteurs GMT sont les derniers de la ligne car ils sont configurés sur le nœud du document, pas sur les éléments eux-mêmes.
Je n’ai pas encore rencontré un seul cas où le fait d’avoir plusieurs écouteurs GTM actifs en même temps causerait des problèmes dans la collecte de données. Cependant, ce n’est pas inconcevable, et vous devriez vraiment essayer de garder les choses simples avec vos balises d’écoute (entre autres).
