Comment suivre les événements sur votre site Web avec Google Tag Manager

Un guide étape par étape, aucun codage requis

Dans le dernier article, nous vous avons expliqué comment configurer Google Analytics via Google Tag Manager pour suivre toutes les visites de page effectuées par les utilisateurs de votre site Web (pages vues).

Toutefois, dans de nombreuses situations, vous souhaitez suivre les comportements des utilisateurs au sein de vos pages, tels que les clics sur les boutons «Ajouter au panier», les soumissions de formulaires ou les vues vidéo.

Tous ces comportements sont appelés «événements». Nous allons maintenant vous montrer comment envoyer ces événements à Google Analytics via Google Tag Manager.

AVERTISSEMENT: ce didacticiel suppose que Google Tag Manager et Google Analytics sont configurés sur votre site Web. Si vous ne l’avez pas déjà fait, veuillez consulter notre dernier article lié au début de cet article pour les configurer.

Le plan de bataille

Comme d’habitude, commençons par un plan de bataille afin que nous sachions exactement dans quoi nous nous engageons:

  • Tout d'abord, nous allons compiler une liste d'événements que nous voulons suivre.
  • Deuxièmement, nous allons configurer les déclencheurs d’événement pour chaque événement que vous souhaitez suivre sur votre site Web à l’aide d’un outil appelé Sélecteurs d’éléments CSS.
  • Troisièmement, nous allons configurer des balises pour chaque événement afin d’envoyer les données relatives à ces événements à Google Analytics.
  • Enfin, nous utiliserons la fonctionnalité "Aperçu" de Google Tag Manager pour nous assurer que tous les événements sont suivis correctement.

Dans ce didacticiel, nous vous recommandons d'utiliser Google Tag Manager pour le suivi des événements pour les trois raisons suivantes:

  • Cette approche ne nécessite pas l’ajout de code sur votre site Web, ce qui facilite considérablement la mise en œuvre si vous n’avez aucun technicien dans votre équipe.
  • Google modifie constamment son mécanisme de suivi et publie sa nouvelle bibliothèque de codes de suivi appelée gtag.js dans les prochains mois. L'utilisation de Google Tag Manager vous aidera à éviter les problèmes liés à la réintégration de votre base de code et à la modification du mécanisme de suivi à chaque mise à jour.
  • Google Tag Manager vous offre une interface plus facile pour afficher les événements suivis. Cette interface vous aidera à rester organisé si vous suivez de nombreux événements sur votre site Web.

Étape 1: Compiler une liste d'événements

La première étape de la configuration du suivi des événements consiste à identifier les événements que nous souhaitons suivre en premier lieu.

J'étais un grand fan de l'approche «tout suivre», qui préconise le suivi de chaque événement qui se produit sur votre site Web.

L'avantage de cette approche est qu'elle vous aide à comprendre le tableau complet de l'expérience utilisateur sur votre site Web. En tant que personne issue de la science des données, j'adore l'idée de disposer de toutes les données.

Cependant, l’inconvénient de cette approche est qu’il est très facile de se laisser submerger par la quantité de données et de surestimer la valeur réelle de votre temps (ou de celui de votre analyste) pour analyser chaque élément de votre page.

Pour les petites et moyennes entreprises, je ne recommanderais pas cette approche lors du suivi de vos événements. Pour les grandes entreprises, je recommanderais quand même d'investir dans des outils de suivi du comportement plus sophistiqués, tels que Hotjar (pour la cartographie de la chaleur des événements) et Heap Analytics (pour le suivi de l'entonnoir d'événement), au lieu d'utiliser Google Analytics.

Récemment, j'ai commencé à devenir un grand fan de l'approche «macro et micro conversion», qui préconise de ne suivre que les événements de macro et de micro conversion sur votre site Web.

Cette approche comprend la surcharge potentielle causée par l'analyse de tous les événements de site Web et apprend aux analystes à enregistrer uniquement une petite liste d'événements qui ont une valeur commerciale pour vous.

Ces événements peuvent être des événements de conversion de macros, c’est-à-dire les événements que vos clients doivent traverser pour effectuer un achat ou soumettre un formulaire principal. Il peut également s'agir d'événements de micro-conversion indiquant un engagement accru de votre public. Celles-ci peuvent inclure des clics sur les boutons tels que l'inscription à un bulletin d'information ou la recherche d'informations sur les produits sur votre site Web.

Compilez une liste restreinte d’événements de conversion macro et micro pour votre site Web (idéalement moins de dix au total) en vous basant sur la description ci-dessus. Ensuite, nous serons prêts à passer à l’étape suivante de la configuration du suivi des événements.

Étape 2: Configuration des déclencheurs d'événement

Commençons par un bref récapitulatif de ce que nous avons discuté des déclencheurs la semaine dernière.

Par défaut, Google Tag Manager suit automatiquement tous les événements et les visites de pages sur votre site Web. Cependant, il n'enregistre aucune de ces données sauf si vous le lui demandez. Les déclencheurs sont le moyen par lequel vous pouvez demander à GTM de suivre les événements et les pages vues spécifiques que vous souhaitez envoyer à Google Analytics ou à d'autres services.

Par conséquent, nous devons indiquer à Google Tag Manager que nous souhaitons envoyer les événements que nous avons compilés à l'étape précédente à Google Analytics. Pour ce faire, nous allons utiliser quelque chose appelé un sélecteur d'élément CSS.

Une brève introduction sur la sélection des événements

Pour identifier les événements que vous souhaitez suivre, il est utile de comprendre conceptuellement comment ces boutons sont codés sur votre site Web et comment nous allons sélectionner ces éléments.

Sur votre site Web, tous les éléments sont codés avec des balises HTML avec la structure illustrée ci-dessous:

Une balise HTML comporte plusieurs composants clés:

  • Le nom de la balise, spécifiant la fonction de cette balise spécifique dans le contexte général de votre site Web. Dans ce cas, «h1» signifie «premier en-tête».
  • Le nom d'attribut, qui spécifie des informations supplémentaires sur l'en-tête, telles que sa classe (utilisée pour regrouper des balises avec des attributs similaires), son identifiant (utilisé comme identificateur unique de balises) et ses styles.
  • Le contenu concerné est le texte qui sera affiché sur le site Web sous forme de bouton ou de paragraphe.

En gardant à l'esprit ces composants de la balise, un sélecteur d'élément CSS est un langage de requête de recherche dans lequel vous pouvez systématiquement identifier des balises HTML spécifiques sur votre site Web.

Par exemple, la balise HTML illustrée dans le graphique peut être sélectionnée à l'aide de la requête simple suivante «h1.primary».

Pour en savoir plus sur la syntaxe du sélecteur CSS, utilisez le lien ci-dessous.

Activer le sélecteur d'élément dans le gestionnaire de balises Google

Maintenant que nous avons conceptuellement compris comment nous pouvons sélectionner nos événements, passons aux choses sérieuses.

Google Tag Manager vous permet d’identifier des événements sur votre site Web en fonction de leurs différents attributs (ces attributs sont appelés «variables»). Vous pouvez obtenir une liste de toutes ses variables intégrées sous le bouton "variable -> configurer" de Google Tag Manager.

Comme vous pouvez le voir sur la capture d'écran ci-dessus, Google Tag Manager propose une liste très complète de variables intégrées permettant d'identifier les événements, du clic à un élément à la soumission d'un formulaire.

Dans ce tutoriel, nous allons nous concentrer sur l'un des événements les plus élémentaires - cliquer sur.

Pour ce faire, nous allons utiliser la variable «Click Element». Vous pouvez l'activer dans l'écran ci-dessus en cochant la case en regard de «Elément de clic» (vous pouvez également activer d'autres cases dans la catégorie Clics pour activer davantage d'options lors de la sélection d'événements).

Identifiez le sélecteur CSS de vos événements

Nous devons maintenant identifier le sélecteur CSS unique de chacun de nos événements.

Pour ce faire, nous allons faire appel à Google Chrome Web Development Tool, une série d’outils auxquels vous avez automatiquement accès si vous utilisez Google Chrome.

Nous allons utiliser le magasin de marchandises Google à titre d'exemple.

Dans le magasin de marchandises Google, lorsqu'un utilisateur clique sur le bouton Ajouter au panier d'un produit spécifique, l'action Ajouter au panier est effectuée sur la page au lieu de diriger les utilisateurs vers une page distincte. Par conséquent, ce clic doit être suivi en tant qu'événement de micro-conversion.

Lorsque vous êtes sur cet écran spécifique (vous pouvez suivre en cliquant sur ce lien), cliquez avec le bouton droit de la souris et sélectionnez «inspecter» dans le menu déroulant. Un panneau latéral de la console s’ouvrira sur le côté droit de l’écran et ressemblera à la capture d’écran ci-dessous.

Comme l'expliquent les instructions sur la capture d'écran, vous devez d'abord cliquer sur l'icône de sélecteur d'élément située dans le coin supérieur gauche de la console. Ensuite, passez votre curseur sur l'élément qui vous intéresse, cliquez dessus, et votre identifiant CSS se trouve sur le côté droit de la console.

Enfin, utilisez la requête de la console document.querySelectorAll pour vous assurer qu'un seul résultat est renvoyé. Le sélecteur CSS est donc unique (ce sera généralement le cas). Ici, vous avez votre sélecteur CSS.

P.S. Si votre sélecteur CSS n'est pas unique, essayez de le rendre plus long en ajoutant plus de paramètres à l'étape 3 (ils restent à gauche de l'annotateur ovale). Si cela ne résout toujours pas le problème, vous devez identifier l'élément qui se chevauche et l'exclure dans le déclenchement de Google Tag Manager (nous vous expliquerons plus tard).

Mise en place du déclencheur

Nous sommes maintenant prêts à créer le déclencheur.

Accédez à la section «Déclenchement» de Google Tag Manager et sélectionnez «Nouveau».

Cliquez sur la boîte de dialogue Configuration du déclencheur et sélectionnez Cliquez sur >> Tous les éléments.

Dans l'écran de configuration suivant, sélectionnez «Quelques clics», ce qui signifie que vous souhaitez uniquement suivre certains clics sur votre site Web.

Dans les options de configuration suivantes, sélectionnez Cliquez sur un élément, faites correspondre le sélecteur CSS et saisissez le sélecteur CSS unique que vous avez identifié à l'étape précédente.

Si votre sélecteur CSS n'était pas unique malgré l'extension des paramètres, vous devez identifier les événements que vous ne souhaitez pas suivre et créer une autre règle dans cet écran avec l'option «n'inclut pas le sélecteur CSS».

Avec tout configuré, il devrait ressembler à l'écran ci-dessous.

Enfin, enregistrez toutes les configurations. Nous sommes maintenant prêts à définir le tag!

Étape 3: Configuration de la balise

Bonne nouvelle, la partie la plus complexe de ce processus est terminée. Maintenant, tout se passe bien, sans technique, à partir d’ici!

Dans cette étape, nous allons configurer une balise qui envoie le déclencheur d'événement à Google Analytics.

Comme je l'ai démontré dans notre message de la semaine dernière, accédez à la section "Tag" de Google Tag Manager à l'aide de la barre de navigation de droite, puis cliquez sur le bouton rouge "Nouveau" en haut de l'écran.

Configurez le tag

Configurez l’étiquette avec exactement les mêmes paramètres Google Analytics que la publication de la semaine dernière, mais cette fois, sélectionnez «Événements» à la place.

En sélectionnant des événements, vous disposerez de quelques options supplémentaires pour indiquer à Google Analytics en quoi consiste cet événement. Voici la méthode recommandée pour organiser vos événements, mais n'hésitez pas à créer votre propre structure:

  • Catégorie: Il s'agit de la catégorie générale de l'événement, qu'il s'agisse d'un événement d'extraction, d'un événement d'engagement, etc.
  • Action: il s'agit de l'action qui s'est produite lors de cet événement, telle que «click_add_to_cart» ou «click_video».
  • Label: C'est ici que vous placez des informations supplémentaires sur l'événement, telles que le produit sur lequel vous cliquez, la vidéo visionnée, etc.
  • Valeur: si vous utilisez une affectation de valeur de micro-conversion sophistiquée dans votre pipeline d'analyse, vous pouvez affecter une valeur à cet événement. Sinon, je recommande de laisser ce champ vide pour le moment.

Après avoir rempli toutes les informations pertinentes sur cette page, cliquez sur Enregistrer. Maintenant, finissons de configurer la gâchette.

Connecter le tag avec le déclencheur

Cette étape est simple. Sélectionnez la case «Déclencheur» sur l'écran de création de balise, puis sélectionnez le déclencheur que nous venons de configurer lors des étapes précédentes. Appuyez sur Enregistrer et vos tags sont officiellement configurés!

Étape 4: Débogage avec la fonctionnalité de prévisualisation de Google Tag Manager

Techniquement, tous vos événements doivent être configurés et activés correctement dans Google Analytics. Cependant, comme toutes les technologies, cela ne se produit presque jamais avec votre premier essai.

C’est pourquoi vous avez besoin d’outils pour vous aider à déterminer si le suivi des événements que vous venez de configurer fonctionne, et c’est là que la fonction d’aperçu de Google Tag Manager entre en jeu.

Une fois que vous avez configuré tous les événements que vous souhaitez suivre, cliquez sur le bouton «Aperçu» dans le coin supérieur droit pour passer en mode aperçu.

Ensuite, ouvrez un nouvel onglet pour votre site Web lorsque l'onglet Google Tag Manager est ouvert. Vous trouverez une section de débogage dans la partie inférieure de votre écran qui ressemble à l'écran ci-dessous

La partie gauche de cette section décrit toutes les actions que vous avez entreprises sur votre site Web, tandis que la partie droite vous indique quelle balise a été déclenchée (ou n'a pas été déclenchée) dans chacune des actions que vous avez effectuées.

Maintenant, revenez à la liste de vos événements et cliquez sur chacun de ceux-ci sur votre site Web pour vérifier si le tag que vous avez configuré se déclenche correctement. Si ce n'est pas le cas, revenez en arrière et revérifiez toutes les étapes pour vous assurer que tout est correctement configuré, puis réessayez jusqu'à ce que cela fonctionne.

Une fois que tout est correctement configuré, revenez à Google Tag Manager, soumettez et publiez toutes les modifications apportées pour le suivi des événements. Félicitations, vous avez terminé!

Si vous êtes bloqué à n'importe quel moment du processus, n'hésitez pas à m'envoyer un email à bill@humanlytics.co. Je suis plus qu'heureux de vous aider à jeter un coup d'œil et à identifier les erreurs potentielles.

En attendant, merci beaucoup d'avoir lu cet article. Si vous avez aimé ce didacticiel, n’oubliez pas de nous suivre dans notre publication Medium de Analytics for Humans et abonnez-vous à notre newsletter ci-dessous. Merci!

Cet article a été produit par Humanlytics. Vous cherchez plus de contenu comme ça? Consultez-nous sur Twitter et Medium et rejoignez notre communauté Facebook Analytics for Humans pour discuter de plus d'idées et de sujets comme celui-ci!