Suivi des Événements

La configuration du suivi des événements dans Google Analytics est essentielle pour l'analyse des données, car elle permet de suivre les interactions des utilisateurs. L'analyse des pages vues, des sessions et des visiteurs ne donne pas suffisamment de contexte sur l'engagement des visiteurs du site.

Cela est résolu en collectant des données supplémentaires à partir d'événements personnalisés qui capturent les interactions des utilisateurs, comme les clics sur les liens, par exemple.

Les événements représentent des interactions ou des occurrences utilisateur.
Généralement, les interactions les plus importantes sont liées à l'objectif du site web.
Par conséquent, nous configurons le suivi des événements personnalisés pour les utiliser comme indicateur de performance afin de voir si nos objectifs sont atteints.

Les événements peuvent être regroupés en conversions dures et conversions douces pour tenir compte de leur relation avec l'objectif global du site.

Étant donné que les événements sont souvent la base pour surveiller les conversions dans un contexte de commerce électronique ou de remarketing, on parle parfois de suivi des conversions.
Je fais la distinction entre le suivi des conversions et le suivi des événements, car une conversion pourrait également être une page vue ou une occurrence passive, comme par exemple passer un certain temps sur une page de destination.

Pour illustrer ce que signifie le suivi des événements, je vais vous montrer comment configurer le suivi des clics sur un bouton de soumission. Ensuite, vous devriez être en mesure de configurer vos propres événements de clics uniques sur n'importe quel élément que vous souhaitez - alors commençons!

Qu'est-ce que le suivi des événements dans Google Analytics?

Un événement peut être soit une interaction utilisateur active, soit une occurrence passive. Les suivre signifie observer ou compter les occurrences et les mettre en relation avec les utilisateurs, les visites et d'autres dimensions pour une analyse ultérieure.

Étant donné que vous êtes libre de configurer les événements comme vous le souhaitez, ils peuvent prendre de nombreuses formes différentes.

Exemples

• ajouter un produit à un panier d'achat
• s'inscrire à une liste de diffusion
• faire défiler jusqu'au bas d'un article
• cliquer sur play dans une vidéo
• connexion utilisateur
• cliquer sur une image pour zoomer
• soumission d'un formulaire de contact
• clic sur un lien sortant
• imprimer un article
• télécharger un fichier

Comme vous pouvez le voir, les événements sont généralement liés à quelque chose que l'utilisateur fait, basé sur la surveillance de...

• clics de souris
• mouvements de souris
• défilement
• navigation du navigateur
• entrées du clavier

Les événements peuvent également être passifs, sans que l'utilisateur ne fasse quoi que ce soit activement.
Par exemple, lorsque l'utilisateur passe un certain temps sur une page ou lorsqu'un formulaire renvoie une erreur. Aussi, lorsqu'une fenêtre de chatbot s'ouvre pour parler au visiteur, il n'y a pas d'activité de la part de l'utilisateur.

Bien qu'une page vue soit techniquement aussi une interaction, la version Universal de Google Analytics la plus couramment utilisée ne compte pas une page vue comme un événement. Cependant, le nouveau Google Analytics App + Web (actuellement en version bêta) utilise un modèle de données différent qui suit également les visites de pages en tant qu'événements.

Types d'événements

Nous pouvons distinguer deux types d'événements:

Événements actifs (avec interaction utilisateur)

• clics de souris, suivi du défilement et mouvement de la souris
• toucher d'écran
• entrées du clavier

Événements passifs

• atteindre un seuil de temps prédéfini
• réponses du serveur
• validations programmatiques
• exécution de scripts tiers

Notez qu'avec le suivi des événements actifs et passifs, vous pouvez reconstituer une grande partie du parcours client.
Ces données vous permettent de tirer des conclusions sur l'expérience utilisateur du début à la fin. Si vous trouvez des défauts dans le parcours, vous pouvez maintenant agir pour réduire ces expériences négatives.

Structure des événements Google Analytics

Chaque événement dans Google Analytics contient des champs d'événement, ou des informations sur l'événement, que nous pouvons utiliser pour décrire l'occurrence :

• catégorie d'événement - pour catégoriser les événements en groupes. Dans le contexte d'un formulaire de contact, par exemple, vous voudriez regrouper tous les événements dans une catégorie d'événement formulaire de contact
• action d'événement - pour décrire l'interaction, par exemple soumission de formulaire
• étiquette d'événement - pour ajouter des informations supplémentaires sur l'interaction. Par exemple, si l'utilisateur envoie l'adresse de son site web avec le formulaire, vous l'utilisez pour distinguer les formulaires reçus
• valeur de l'événement - (optionnel) pour ajouter une valeur numérique à l'information. Par exemple, si en moyenne chaque 25e contact conduit à une conversion de 100$, nous pourrions attribuer une valeur de 4 à chaque événement.
• non-interaction d'événement - pour distinguer une interaction utilisateur active ou passive.
  Par défaut, il est réglé sur false, ce qui signifie que l'événement est considéré comme actif. Important : Les événements actifs affectent le calcul du  taux de rebond d'une page en le réduisant. Donc, si vous avez du mal avec un taux de rebond irréaliste, il est possible que certains événements soient considérés comme une interaction utilisateur true par erreur.

Mettre en œuvre le suivi des événements Google Analytics

Il existe deux manières de mettre en œuvre le suivi des événements personnalisés :

1. Implémentez-le avec des extraits de code javascript sur tous les éléments HTML pertinents avec un gestionnaire d'événements onclick - Je ne recommande pas cette approche, car elle est sujette aux erreurs et non évolutive. Si vous voulez le faire de toute façon, vous pouvez trouver des exemples de code dans la documentation de suivi des événements de Google :

• documentation des événements analytics.js (legacy)
• documentation des événements gtag.js

2. Configurez-le avec Google Tag Manager ou un autre système de gestion des balises de votre choix.
   La facilité et la flexibilité lors de la mise en œuvre des changements, ainsi que l'évolutivité et la facilité d'intégration avec les services tiers en font la méthode de mise en œuvre préférée.

Je vais expliquer comment suivre les événements avec Google Tag Manager, car c'est le système de gestion de balises le plus utilisé et accessible à tous.

Si vous souhaitez en savoir plus sur GTM, comme comment le configurer et suivre des éléments tels que les liens sortants et les téléchargements, lisez mon tutoriel Google Tag Manager.

Guide pour suivre les événements avec Google Tag Manager

La configuration du suivi des événements personnalisés peut être décomposée en créant un déclencheur pour l'événement, ainsi qu'en créant une balise d'événement, qui remplit les propriétés de l'événement (catégorie, action, étiquette, etc.).
Les valeurs des propriétés de l'événement peuvent être attribuées de manière statique ou dynamique - cette dernière étant préférée pour étendre la configuration sur des sites plus vastes.

À titre d'exemple, nous allons implémenter le suivi Google Analytics pour un clic de bouton. Le suivi des clics est la forme la plus courante de suivi du comportement des utilisateurs, donc l'exemple devrait être applicable à de nombreux autres cas d'utilisation.

À ce stade, je suppose que vous avez déjà créé un ID de suivi et que le code de suivi a été implémenté sur l'ensemble du site lorsque vous avez configuré Google Analytics avec GTM.

Configurer le déclencheur d'événement dans Google Tag Manager

• Tout d'abord, nous devons nous connecter à notre conteneur Google Tag Manager et créer un nouveau déclencheur.

• Donnez un nom à votre déclencheur, par exemple Clic - Bouton, et cliquez sur le champ de configuration du déclencheur pour sélectionner un type de déclencheur. Une liste de types de déclencheurs apparaîtra depuis la droite.
• Choisissez Tous les éléments comme type et sélectionnez que le déclencheur ne se déclenche que sur certains clics.
• Ensuite, dans le premier menu déroulant, choisissez Élément de clic. Si ce n'est pas listé, cliquez simplement sur Choisir une variable intégrée… et activez-la.

• Dans le deuxième menu déroulant, choisissez correspond au sélecteur CSS.
  Maintenant, laissez-moi expliquer ce que nous faisons :
  Nous essayons de générer un déclencheur de clic pour un élément HTML spécifique sur votre site - celui sur lequel vous souhaitez suivre les clics. Dans mon exemple, c'est un bouton, mais cela pourrait aussi être une image ou une balise <div>, ou n'importe quelle autre balise HTML - alors la question est : Comment indiquer à Google Tag Manager (GTM) quel élément observer ?
  La réponse est : sélecteurs CSS - Vous ne savez pas ce que c'est ? C'est juste une manière programmatique de spécifier des éléments HTML sur la page et je vais vous montrer une manière d'obtenir le sélecteur CSS pour n'importe quel élément avec quelques clics de souris.
• Dans le navigateur Google Chrome, cliquez droit sur n'importe quel élément sur lequel vous souhaitez suivre les clics et sélectionnez inspecter. Les outils de développement de Chrome s'ouvriront et par défaut, l'élément HTML sera présélectionné.
• Ensuite, il vous suffit de cliquer droit sur l'élément et de choisir Copier > Copier le chemin JS (évitez copier le sélecteur - il retourne parfois des sélecteurs erronés).

• Si vous collez le contenu de votre presse-papiers dans un éditeur de texte, vous verrez que vous avez copié quelque chose comme :
  
  document.querySelector("body > ul > button")
  
  Nous voulons prendre la partie qui est à l'intérieur des crochets, sans les guillemets. Donc, cette partie :
  
  body > ul > button
• C'est le sélecteur CSS que nous devons coller dans le dernier champ de notre configuration de déclencheur dans GTM (voir ci-dessous).
  Copiez cette valeur et collez-la. Cliquez sur enregistrer.

Remarquez que vous pourriez faire cela avec n'importe quel élément et configurer n'importe quel déclencheur d'événement dans GTM comme vous le souhaitez.

Nous n'avons pas encore terminé. Après avoir configuré les conditions de déclenchement pour notre événement, nous devons configurer la balise d'événement Google Analytics pour nous assurer que les bonnes données sont envoyées à la propriété Google Analytics.

Créer une balise d'événement personnalisée

Maintenant que nous avons un déclencheur, nous devons le combiner avec une véritable balise d'événement. Vous pouvez considérer les déclencheurs et les balises comme le quand et le quoi dans notre exemple :
Le déclencheur définit quand nous voulons suivre un événement (quand notre bouton est cliqué), et maintenant nous allons définir un événement GA, qui décrit quoi nous faisons : Envoyer un événement à GA incluant toutes les bonnes valeurs pour les propriétés de l'événement.

Commençons.

• Dans Google Tag Manager, allez dans le menu des balises et créez une nouvelle balise.

• Donnez un nom à la balise comme Événement Bouton et cliquez sur configuration de la balise.
• Un panneau va glisser depuis le côté droit avec une liste de types de balises possibles à choisir. Sélectionnez Google Analytics - Universal Analytics.
• De retour dans la configuration de la balise, réglez le type de suivi sur événement. Vous verrez maintenant plus de champs apparaître pour les données de l'événement.
• Attribuons des valeurs statiques pour catégorie d'événement et action et rendons l'étiquette d'événement dynamique.
  Appelez la catégorie événements de clic, par exemple, l'action est simplement clic et pour l'étiquette, cliquez sur le symbole de la brique Lego à côté.
• Nous voulons que l'étiquette contienne toujours le texte écrit sur l'élément HTML cliqué, donc si nous suivons plusieurs boutons, nous pourrions les distinguer.
  Après avoir cliqué sur la brique Lego, un panneau va glisser pour choisir une variable. Cliquez sur variables intégrées dans le coin supérieur droit, sauf si vous voyez déjà texte du clic dans la liste des variables (alors sélectionnez-le simplement et sautez l'étape suivante).

• Dans la liste des variables intégrées, activez texte du clic et GTM ajoutera cette variable dans le champ de l'étiquette entre accolades, comme ceci : {{Click Text}} - Les doubles accolades sont la manière interne dans GTM de référencer les variables.
• Le champ valeur dans la configuration de la balise peut être rempli avec une valeur que le clic de l'événement peut représenter.
  Dans mon exemple, je laisse le champ vide car je n'ai aucune valeur monétaire significative pour le clic du bouton.
• Si l'événement est interactif, sélectionnez false pour le coup non-interactif. Si c'est un événement passif, sélectionnez true.
• Dans la variable paramètres Google Analytics, sélectionnez la variable que vous avez configurée lorsque vous avez configuré Google Analytics.
• Si vous n'avez pas configuré de variable de paramètres, cochez simplement la case pour Activer le remplacement des paramètres dans cette balise et ajoutez l'ID de suivi (par exemple UA-12345678-91) de votre code de suivi Google Analytics.
• Enfin, faites défiler vers le bas jusqu'à la configuration du déclenchement, cliquez dessus et sélectionnez le déclencheur que nous avons configuré peu avant : Clic - Bouton

La configuration complète de la balise d'événement en une seule fois :

• Maintenant, cliquez sur enregistrer dans le coin supérieur droit et vous avez terminé la configuration de l'événement GA.

Super ! L'étape suivante consiste à vérifier si notre configuration de suivi des clics fonctionne.

Débogage des événements

Pour déboguer la configuration, entrez en mode aperçu depuis l'aperçu de Google Tag Manager :

Ensuite, nous visitons la page qui contient le bouton de soumission. Grâce au mode aperçu de Google Tag Manager, certains cookies sont définis dans notre navigateur, ce qui ouvrira une fenêtre de débogage en bas de la page :

Si vous cliquez maintenant sur le bouton pour tester le suivi des événements, vous devriez voir un clic apparaître dans le panneau récapitulatif de gauche, et la fenêtre principale de débogage devrait montrer que notre événement s'est déclenché :

Si vous cliquez sur l'événement du bouton, vous pouvez vérifier les champs de l'événement qui ont été envoyés avec l'événement :

Vous voyez comment l'étiquette d'événement a été automatiquement remplie avec “OK” ? C'est parce que nous avons utilisé la variable intégrée texte du clic dans Google Tag Manager, qui contient toujours le texte de l'élément cliqué.

Plus important encore, si vous faites défiler vers le bas, vous pouvez vérifier les règles du déclencheur d'événement :

ASTUCE : Pour vérifier que votre compte Google Analytics a bien reçu toutes les données, nous pouvons visiter le rapport en temps réel pour les événements dans Google Analytics. Si quelques minutes se sont écoulées depuis le dernier clic sur le bouton, la vue des 30 dernières minutes devrait aider.

Validation du sélecteur CSS

Au cas où le débogueur n'aurait pas détecté vos clics de bouton et n'aurait montré aucun événement de clic, il y a probablement un problème avec le sélecteur CSS.
ASTUCE : vous pouvez ouvrir les outils de développement Chrome sur la page avec l'élément que vous souhaitez suivre en appuyant sur F12 ou clic droit > inspecter et visiter l'onglet éléments. Si vous appuyez maintenant sur CTRL+F ou CMD+F sur Mac pour rechercher un élément, vous pouvez simplement coller votre sélecteur CSS dans le champ de recherche et les outils de développement sauteront automatiquement à l'élément :

De cette façon, vous pouvez vérifier si votre sélecteur CSS fonctionne. Si les outils de développement ne sélectionnent aucun élément dans le code, il y a un problème avec le sélecteur. Il existe également des extensions de navigateur qui peuvent vous aider à obtenir le bon sélecteur.

Après avoir débogué et corrigé les sélecteurs, nous devrions enfin avoir le suivi des clics en cours d'exécution et pouvons retourner à Google Tag Manager pour quitter le mode aperçu et soumettre les modifications.

Félicitations jusqu'ici ! Vous avez configuré la surveillance des événements pour cliquer sur un bouton basé sur un sélecteur CSS !

Avec la configuration maintenant opérationnelle, vous pouvez configurer des objectifs d'événements dans GA ! Les objectifs de Google Analytics sont une fonctionnalité utile, car vous pouvez décomposer les rapports et voir combien de conversions ont eu lieu pour un sous-segment donné.

Pour le configurer, vous devez simplement définir un objectif personnalisé de Google Analytics avec les champs catégorie, action et étiquette correspondant à votre événement, et il sera compté comme un objectif d'événement.

Avantages et inconvénients du suivi avec des sélecteurs CSS

Il est important de mentionner que la configuration du suivi des événements basée sur les sélecteurs CSS n'est pas la méthode la plus robuste.

Toute la configuration de l'événement sera rompue si le sélecteur CSS ne fonctionne pas. C'est une dépendance critique, ce qui représente une faiblesse dans cette approche de configuration.

Mais pourquoi le sélecteur cesserait-il de fonctionner ?

Parce que plus le site Web est grand, plus il y a de changements sur un site, et plus il y a de personnes impliquées - peut-être simultanément dans différentes équipes.
Dès qu'un changement affecte la structure de notre sélecteur, il cessera de fonctionner.

Un développeur frontend peut bien ajouter des modifications à la page un jour dans le futur, ce qui pourrait faire en sorte que le sélecteur se casse. Par conséquent, il serait plus robuste d'ajouter un gestionnaire d'événements onclick à l'élément, qui pousse toutes les propriétés de l'événement vers une couche de données. C'est l'approche recommandée pour les indicateurs clés de performance (KPI) importants et pour les grandes organisations, où les changements ne sont pas surveillés.

Les implémentations avancées d'analyses Web qui intègrent des bases de données et des sources de données tierces utilisent une couche de données pour suivre les événements. Veuillez lire cet article pour le code de suivi des événements requis.

Utiliser une couche de données est plus sécurisé et fiable, mais nécessite une implémentation approfondie.

Au lieu de se fier aux sélecteurs CSS, vous utilisez des écouteurs d'événements pour les événements du navigateur comme déclencheur. GTM utilise également des écouteurs d'événements de clic en arrière-plan lorsque vous configurez un déclencheur de clic, mais en basant le suivi sur une couche de données, vous pouvez choisir plus librement quels événements du navigateur doivent être suivis.

En particulier pour une application à page unique (SPA) sans chargements de page entre la navigation, une couche de données peut être bien utilisée pour suivre les pages vues virtuelles comme des événements et les faire compter comme des pages vues régulières dans Google Analytics.

Pour les petits sites Web, l'effort d'implémentation d'une couche de données n'est pas toujours justifiable. Dans de tels cas, le suivi des événements basé sur les sélecteurs CSS est une approche valable.

L'avantage de l'utilisation des sélecteurs CSS est clairement la facilité d'implémentation et la rapidité avec laquelle vous pouvez commencer à collecter des données. Cela peut également être utile si une implémentation de couche de données peut prendre du temps, en raison d'un manque de ressources, car vous pouvez déjà collecter certaines des données uniquement avec des sélecteurs CSS.

L'inconvénient est que cette méthode est presque sujette à des pannes un jour, en fonction du nombre de modifications mises en œuvre et du nombre d'équipes travaillant sur le site Web.

Mais si vous configurez le suivi Web pour votre propre site et que vous contrôlez les modifications, n'hésitez pas à suivre cette méthode. Soyez simplement conscient que les modifications de la structure HTML de la page peuvent casser le sélecteur CSS.

Cependant, les entreprises disposant d'un budget et ayant des exigences élevées en matière de qualité des données devraient choisir une couche de données comme fondement de leur configuration de suivi des événements.

Rapports d'événements dans Google Analytics

Maintenant que nous avons configuré le suivi des interactions utilisateur, nous devons nous assurer de suivre les quantités d'événements envoyés au compte Google Analytics.

La meilleure façon de le faire est soit avec le rapport d'événements intégré, soit avec un rapport personnalisé ou un tableau de bord Google Analytics.

Dans Google Analytics, vous pouvez aller dans Comportement > Événements > Événements principaux pour trouver les données d'événements que vous avez suivies :

Étant donné qu'il n'y a pas de nom d'événement par défaut disponible dans GA, vous verrez d'abord vos catégories d'événements. Vous pouvez également choisir la dimension principale pour être action d'événement ou étiquette d'événement pour approfondir le rapport.

Notez que le rapport d'événements nous donne une colonne avec Valeur moyenne, ce qui est pratique si nous avons besoin de la valeur moyenne de nos événements de clics. Cela peut être pertinent pour une application Web qui calcule les prix, où le résultat final est suivi par un événement. De cette façon, vous pourriez facilement trouver la valeur moyenne des calculs des utilisateurs.

D'autres exemples courants de valeurs moyennes utiles sont, par exemple, les paramètres de filtre pour les prix ou les tailles dans une boutique de commerce électronique.

Gardez donc à l'esprit qu'une valeur d'événement peut sembler non liée au début, mais il peut bien y avoir une valeur liée à attribuer à l'événement de toute façon, car il serait utile de vérifier les valeurs moyennes dans l'ensemble.