Suivi automatique des événements dans Google Tag Manager

Il y a une nouvelle version de ce post pour GTM V2 ici.

Le Google Analytics Summit allait et venait, et grâce au Live Stream, tout le monde pouvait y participer. Nous avons eu droit à une sélection rapide des nouvelles fonctionnalités de Google Analytics, et cet article met en lumière l’une d’entre elles en particulier : le suivi automatisé des événements dans Google Tag Manager.

Le suivi automatique des événements introduit une fonctionnalité intéressante, qui fait ce que les gestionnaires de balises devraient faire : il fournit des fonctionnalités sans modification de modèle HTML. Ce n’est pas toujours une bonne chose, car l’automatisation est généralement générique et ne fonctionne que pour quelques scénarios viables, mais surtout pour ces cas d’utilisation génériques, cette nouvelle fonctionnalité est un excellent ajout à la liste de fonctionnalités déjà impressionnante de GTM.

Le suivi automatique des événements a quatre types différents de auditeurs d’événements vous pouvez créer :

• Cliquez sur auditeur
• Cliquez sur le lien auditeur
• Minuteur auditeur
• Soumettre le formulaire auditeur

Un écouteur est une fonction qui opère en arrière-plan. Lors de la création de l’écouteur, vous indiquez les opérations qu’il doit attendre, et une fois ces opérations effectuées, l’écouteur s’active et déclenche tout code qu’il contient.

Dans ce court tutoriel, je regarde les trois premiers auditeurs. Je reviendrai aux auditeurs de Form Submit dès que j’aurai un formulaire fonctionnel avec lequel je pourrai travailler.

Notez que tous ces tutoriels utilisent Universal Analytics, mais il est facile de faire la même chose dans Google Analytics (la seule différence est la balise que vous utilisez pour envoyer l’événement à votre compte).

Écouteur de la minuterie

C’est le plus simple, donc je vais commencer par ça. Si vous avez lu mes articles précédents, cela simplifie beaucoup le concept de «dwell time», sans avoir à utiliser de balises HTML personnalisées (tout l’intérêt du suivi automatique des événements).

Ce qu’il fait, c’est déclencher une minuterie pendant X millisecondes. Une fois le minuteur arrivé à son terme, un événement est transmis à la couche de données, que vous pouvez ensuite utiliser comme règle de déclenchement pour votre événement Analytics.

Pas:

• Créez une nouvelle balise avec les paramètres suivants :

• Créez une nouvelle balise Universal Analytics avec les paramètres suivants ; n’oubliez pas d’ajouter votre code de suivi dans le champ “Identifiant de suivi”, et si vous souhaitez que l’événement compte comme un succès, définissez “Non-interaction” sur Faux :

• Assurez-vous d’avoir une règle en place pour déclencher cette balise UA :

• Enregistrer la version du conteneur
• Conteneur de publication

Ici, vous créez un écouteur de minuterie, qui démarre le compte à rebours lors du chargement du DOM. Dès que le chronomètre atteint 30 secondes, l’événement gtm.timer est transmis à la couche de données.

La balise Universal Analytics que vous avez créée est configurée pour être lancée dès que l’événement gtm.timer est poussé vers la couche de données, de sorte que dès que le minuteur se déclenche, l’événement est envoyé à votre compte Analytics.

Et aucune édition HTML personnalisée n’a été impliquée. Juste quelques balises et règles.

N’oubliez pas de vérifier que l’implémentation fonctionne en regardant, par exemple, l’onglet Réseau dans Firebug :

Link Click écouteur

C’est un peu plus complexe que l’écouteur Timer, mais c’est toujours beaucoup plus simple que ce que vous deviez faire auparavant avec du code HTML personnalisé.

Le scénario ici est que j’ai un lien “Retour en haut” sur mon site, et je veux suivre ses clics. De cette façon, je saurai a) si les gens lisent réellement mes pages jusqu’en bas et b) s’ils ont envie de revenir rapidement en haut de la page.

Cette fonction utilise le Variable d’événement automatiquequi est essentiellement une macro qui peut être utilisée pour faire référence, par exemple, à l’élément DOM où un clic s’est produit.

Pas:

• Créez une nouvelle balise qui écoute les clics sur les liens de votre site :

• Créez une macro qui identifie tous les ID d’éléments sur votre site (en utilisant la variable d’événement automatique) :

• Créer une nouvelle balise Universal Analytics

• Assurez-vous d’avoir la bonne règle en place :

• Enregistrer la version du conteneur
• Conteneur de publication

Ici, vous créez d’abord l’écouteur de clic de lien. Lorsqu’il est configuré pour se déclencher sur toutes les pages, il écoute tout clics sur les liens sur l’ensemble de votre site. Dès qu’un clic sur un lien se produit, il pousse le gtm.linkClick événement dans la couche de données.

Dans la balise Analytics, la partie importante est la règle de déclenchement. Voyez comment vous attendez à la fois le gtm.linkClick un événement et pour le identifiant de l’élément macro pour correspondre à un certain élément DOM ? Cela permet d’éviter que l’événement ne se déclenche lorsque tous les liens sont cliqués. Au lieu de cela, il identifie désormais l’ID de l’élément DOM (à l’aide de la variable d’événement automatique de la macro) où l’événement de clic s’est produit (#lienretourenhaut).

Vous avez donc maintenant un événement envoyé chaque fois que vous cliquez sur le lien Retour en haut. N’oubliez pas, encore une fois, de vérifier les données du réseau :

Cliquez sur écouteur

C’est à peu près la même chose que le didacticiel précédent, mais la différence cruciale est que l’écouteur Click écoute tout cliquez sur les événements de votre page.

Le scénario est l’optimisation classique de la page de destination : j’ai une page d’accueil de blog (fictive), où les titres d’articles ne sont que du texte brut, et non des liens réels vers les articles eux-mêmes. Je veux utiliser l’écouteur de clic pour vérifier combien de personnes essaient de cliquer sur le titre en vain.

Pas:

• Créez un tag d’écouteur de clic :

• Créez une macro pour toutes les classes (nous l’utilisons pour identifier les en-têtes) :

• Créez une règle qui attend un clic sur l’élément DOM .title :

• Créez une balise Universal Analytics :

• Enregistrer la version du conteneur
• Conteneur de publication

Ici, l’important est de créer une règle qui attend le gtm.click événement (ce qui signifie qu’un clic a eu lieu, grâce à l’écouteur Click) et qui nécessite que le clic se produise sur un élément DOM avec la classe de Titrequi se trouve être la classe des titres de la page d’accueil.

Vérifiez l’implémentation dans Firebug :

Conclusions du suivi des événements automatiques

Eh bien, c’est une fonctionnalité intéressante, c’est certain.

Pour le moment, la mise en œuvre des écouteurs nécessite les étapes générales suivantes :

1. Créez une balise qui agit en tant qu’écouteur et envoie l’événement gtm approprié dans la couche de données dès que l’opération se produit
2. Créez une balise qui se déclenche dès que l’événement gtm se produit et envoie les données à Analytics

Si vous voulez être plus précis, c’est-à-dire attendre les clics sur des éléments DOM spécifiques, vous devez créer une macro qui lie la variable d’événement automatique dans la couche de données.

J’aimerais également voir les variables d’événement automatique comme macros par défaut (similaire à {{url}}) dans le système.

Le suivi automatique des événements est un bon ajout à Google Tag Manager, et il supprime beaucoup de tracas avec le code HTML personnalisé. Cependant, ce n’est pas une solution ultime, et il y a encore beaucoup de travail manuel à faire si vous voulez faire quelque chose de plus compliqué (dépendances entre événements, enchaînement complexe d’événements, etc.).