GA4 et GTM : Méthode en 3 étapes pour suivre vos interactions clés

Google Analytics 4 est installé sur votre site ? Well done ! La prochaine mission consiste à configurer les événements nécessaires pour suivre les interactions clés sur votre site : soumissions de formulaires, transactions ecommerce, création de compte, etc.

Si GA4 capte déjà automatiquement certaines interactions – appelées événements – telles que les vues de page et les clics sortants, il est probable que vous souhaitiez aller plus loin en suivant des actions spécifiques propres à votre activité. Pour cela, un outil de gestion de tags (ou balises) comme Google Tag Manager (GTM) devient indispensable. Je vous conseille de lire le tutoriel Les événements dans Google Analytics 4 si besoin.

C’est souvent ici que les choses se compliquent. Certains se sentent perdus face à GTM et ne savent pas par où commencer. D’autres ont quelques bases, mais peinent à structurer leur approche et à connecter les points entre les composants essentiels de GTM. Ce tutoriel est conçu pour vous, que vous soyez novice ou intermédiaire dans l’univers du tracking. En revanche, si vous êtes déjà un Power User de GTM, vous ne trouverez probablement pas ici de nouveautés révolutionnaires.

Pour tracker une interaction sur votre site avec GTM et l’envoyer à Google Analytics 4 en tant qu’événement, il existe trois grandes approches : l’auto-event tracking (ou écouteur d’événement automatique) grâce aux fonctionnalités natives de GTM, le custom auto-event tracking (écouteur d’événement personnalisé) via du JavaScript personnalisé, ou l’ajout d’événements directement dans la couche de données via un développeur (ou un plugin si vous avez de la chance).

Dans chacune de ces méthodes, un élément central revient toujours : la couche de données, ou dataLayer. Elle constitue le cœur du réacteur de Google Tag Manager. Une fois que vous aurez compris son rôle, vos implémentations devraient vous paraître plus claires / fluides.

Les fondamentaux de GTM : ce que vous devez comprendre avant de commencer

Commençons par le commencement. Les éléments fondamentaux d’un conteneur Google Tag Manager - sans trop entrer dans les détails parce que ce n’est pas le sujet ici - sont :

• Les balises (ou tags si vous avez votre interface en anglais) sont le plus souvent un extrait de code JavaScript dont le rôle est d’envoyer des informations à la plateforme tierce dont il dépend : la balise Google envoie des données à Google, la balise Meta envoie des données à Meta. Vous trouverez de nombreux tags pré-configurés dans l’interface et pour les autres, il existe désormais des templates de tags développés par la communauté que vous trouverez dans Modèles, voire la balise HTML personnalisée.

• Les déclencheurs (ou triggers) sont des règles associées aux balises et qui régissent l’activation de ces dernières. Les balises se déclenchent lorsque les conditions du déclencheur sont remplies. Il est possible de déclencher une balise sur un niveau de chargement de page, un clic, l’envoi d’un formulaire, l’affichage d’un message, la lecture d’une vidéo, un scroll, un ajout au panier, etc. Il est pratiquement possible de tout faire.

• Les variables sont des informations provenant de la page pouvant être utilisées pour envoyer de la donnée dans les balises comme valeur à reporter, ou dans les déclencheurs comme valeur de référence. Il existe des variables intégrées, prédéfinies et que vous devez activer pour les utiliser, et des variables utilisateurs, plus avancées.

• Toutes les informations utilisées pour le tracking sont finalement hébergées dans un tableau invisible pour l’utilisateur lambda appelé couche de données ou dataLayer en anglais.

Qu’est-ce que le dataLayer ou couche de données dans Google Tag Manager ?

En termes simples, le dataLayer est une couche intermédiaire entre le site et Google Tag Manager qui a la forme d’un tableau de données virtuel et qui stocke temporairement la donnée dont vous avez besoin pour le tracking, par exemple le détail d’une commande ecommerce (chiffre d’affaires, détail des produits achetés…).

Le dataLayer n’existe pas par défaut sur un site. Il est lié à Google Tag Manager : les sites qui n’ont pas GTM n’ont pas de dataLayer en général. Lorsque GTM se charge, il initie / crée le dataLayer ou couche de données, ou utilise le dataLayer existant si un développeur ou un plugin en a déjà configuré un.

Ce dataLayer peut être alimenté de différentes manières : par Google Tag Manager lui-même, via du JavaScript personnalisé, vos développeurs ou des outils tiers (un plugin de votre CMS par exemple).

Une fois dans le dataLayer, Google Tag Manager peut facilement accéder aux informations qui y sont stockées, les utiliser dans les balises / déclencheurs / variables et les envoyer aux outils: Google Analytics, Google Ads, Facebook / Meta, etc.

Exemple de données qui peuvent être stockées dans un dataLayer : statut utilisateur (loggué / non loggué), ID Utilisateur (identifiant unique crypté correspondant au compte de l’utilisateur loggué), adresse IP, nombre de commandes, chiffre d’affaires de la commande, ID affilié, nom de l’auteur d’un article, nombre de commentaires d’un article, etc…

Pour voir si un site a les données dont vous avez besoin dans le dataLayer, il y a différentes possibilités, dont :

• Utiliser un plugin Chrome comme Datalayer Checker :

Amusez-vous à tester plusieurs sites ecommerce avec ce plugin - rendez vous par exemple sur une page produits - ils ont presque toujours un dataLayer fourni.

• Prévisualiser le site avec tagassistant.google.com, qui est l’outil utilisé lorsque vous prévisualisez votre conteneur GTM :

Dans « Récapitulatif » sur la gauche, les différents messages envoyés dans le dataLayer sont conservés jusqu’au plus récent pour chaque page.

💡 Pour les développeurs, la couche de données est un tableau JavaScript qui contient des propriétés composées d’un nom (exemple : currencyCode) et d’une valeur (exemple : EUR). C’est plus précisément une variable JavaScript globale de type tableau dans lequel il est possible de pousser des informations personnalisées avec la méthode dataLayer.push().

Les 3 façons de stocker des données dans le dataLayer et de tracker les interactions

Il existe donc 3 façons de pousser des données dans le dataLayer :

1. L’auto-event tracking pré intégré à Google Tag Manager, permettant de couvrir facilement de nombreux besoins courants de suivi d’interaction du visiteur avec votre site (clic sur un CTA, défilement de page…) sans ajouter de code supplémentaire.

2. Le custom auto-event tracking avec du JavaScript personnalisé, qui permet de suivre des interactions plus spécifiques non couvertes par l’auto-event tracking de GTM, en utilisant du JavaScript personnalisé. Par exemple, on peut détecter avec du JavaScript quand un utilisateur commence une vidéo Vimeo et envoyer cet événement dans le dataLayer. De nombreuses ressources / blogs, le plus souvent en anglais, offrent des codes déjà « clefs en main » et il suffit de faire une recherche sur le moteur de type « track xxx - Crisp (chatbot) / Vimeo (video) etc. - with Google Tag Manager ».

3. L’injection de données dans le dataLayer, qui peut être géré par un plugin ajouté à votre CMS comme GTM4WP pour WordPress ou un développeur qui utilisera la fonction dataLayer.push(). A utiliser notamment si vous avez besoin de données enrichie, comme les détails d’une transaction e-commerce ou la façon dont un utilisateur s’est loggué (via son compte email ou un réseau social).

L’auto-event tracking intégré à GTM : idéal pour les interactions standards

Dans la majorité des cas, vous pourrez utiliser l’auto-event tracking de GTM pour suivre les interactions des utilisateurs avec vos pages sans ajouter de code supplémentaire. GTM propose en effet et de façon pré-intégrée le tracking des clics, des soumission de formulaire ou encore du pourcentage de scroll de vos pages, pour les interactions les plus communes.

Pour activer l’auto-event tracking, il vous suffit de créer le déclencheur correspondant (sans lui rattacher un tag) qui jouera le rôle d’écouteur d’événement. Google Tag Manager écoutera l’interaction que vous lui indiquez et poussera les données correspondantes dans le dataLayer : il créera un événement lié dans le dataLayer et remplira automatiquement avec les valeurs trouvées sur la page les variables intégrées.

💡 A noter que la Balise Google Analytics - lorsque vous l’avez implémentée dans un conteneur - joue désormais pour toutes les interactions des mesures améliorées le rôle d’écouteur d’événement. Plus besoin dans ce cas de créer le déclencheur correspondant pour voir la valeur des variables.

Les étapes

1. Activer l’écouteur en créant le déclencheur correspondant à l’interaction que vous souhaitez tracker, par exemple pour un clic redirigeant vers une URL (codé en href) : Déclencheur > Nouveau > Choisir Clic - Liens uniquement. Ne rien modifier d’autre à part le titre. Vous pouvez nommer votre déclencheur et enregistrer.

2. S’assurer que les variables intégrées correspondantes sont activées en allant dans Variables > Variables intégrées > Configurer. Il suffit de les cocher pour les activer, pas besoin d’enregistrer.

3. Relancer la prévisualisation en cliquant sur le bouton Prévisualiser en haut à droite de GTM et observer, après avoir fait l’interaction que vous souhaitez tracker sur le site, si l’information apparaît dans Tag Assistant :

Si un événement est poussé dans le dataLayer au moment du clic, les variables pré intégrées se sont automatiquement mises à jour à partir des données du dataLayer :

💡 Les valeurs qui remonteront dans les variables seront évidemment propres au code de chaque site.

4. Reprendre votre déclencheur qui a servi à écouter le clic et l’adapter en utilisant les valeurs pour les variables qui remontent permettant d’identifier précisément l’action que vous souhaitez suivre. Par exemple, le site de démo que j’utilise a une classe unique permettant d’identifier les boutons du menu principal:

💡 Pour Google Analytics 4, se rappeler que de nombreuses interactions sont trackées automatiquement, avec les paramètres correspondants. Par exemple, les clics sortants (clics qui redirigent l’utilisateur vers un autre site que votre nom de domaine) sont déjà collectés, avec comme paramètres link_classes, link_domain, link_id, link_url et outbound que vous trouverez dans l’interface sous les dimensions suivantes : classes des liens, domaine du lien, ID du lien, URL du lien. Ce qui veut dire que vous avez déjà ces informations disponibles dans GA4 et qu’il est inutile d’ajouter un tag d’événement GA4 supplémentaire.

5. Créer votre balise d’événement Google Analytics 4 (Balises > Nouvelle > Google Analytics > Google Analytics : Evénement GA4), pour envoyer l’interaction à l’outil, et la lier à votre déclencheur :

Enregistrer, tester, publier ;)

Avantages de cette méthode :

• Facilité d’utilisation : vous pouvez rapidement configurer un suivi pour les interactions courantes (clic, scroll à 50%, vue d’une vidéo YouTube…) sans dépendre d’un développeur.

Limites :

• Les paramètres capturés peuvent ne pas inclure toutes les informations nécessaires pour vos analyses (ex. : pas de possibilité de capturer un email utilisateur lors de la soumission d’un formulaire). Vous êtes limité aux informations que GTM peut automatiquement détecter sur la page.

Le suivi personnalisé avec du JavaScript : pour des cas plus spécifiques

De nombreux ressources / blogs offrent des codes déjà “clefs en main” pour répondre aux besoins que l’auto-event tracking pré intégré à Google Tag Manager ne peut pas couvrir.

Il faut comprendre au préalable que le tracking des interactions est possible grâce aux event listeners, ou écouteurs d’événements en français.

Les écouteurs d’événements sont des fonctions dont le rôle est d’observer certaines interactions sur la page et de pousser la donnée liée à ces interactions dans le dataLayer.

Ces écouteurs peuvent se voir dans l’onglet Elements des Outils de Développement, en sélectionnant Event Listeners dans la barre de droite :

L’event listener surligné ici est créé par le tag de Google Analytics 4, qui je le rappelle joue désormais pour toutes les interactions des mesures améliorées (scroll, click, etc.) le rôle d’écouteur d’événement. Les autres écouteurs d’événements peuvent être créés par le code du CMS, ou encore par un développeur.

On a vu que dans GTM il existe différents écouteurs d’événement intégrés par défaut et basiquement, dès que vous activez un déclencheur (scroll, soumission de formulaire, lecture de vidéo YouTube), vous activez l’écouteur correspondant sur la page.

Pour les événements autres que ceux proposés par défaut dans Google Tag Manager, comme le tracking des interactions avec les vidéos Vimeo ou un formulaire Calendly, vous aurez besoin d’un écouteur d’événement personnalisé (custom auto-event listener), à condition qu’un écouteur correspondant ait déjà été développé.

Google dans ce cas sera votre meilleur ami ;) Rechercher nom de l’outil + listener google tag manager. La plupart du contenu disponible sera en anglais.

Ces recettes utilisent le tag HTML personnalisé (ou balise HTML personnalisée) avec du JavaScript personnalisé et vont écouter les interactions avec le player / widget qui vous intéresse et pousser l’information dans le dataLayer.

C’est là qu’entrent en jeu les variables de couche de données permettant de récupérer des données du dataLayer en dehors des variables intégrées, et un nouveau type de déclencheur dit Evénement Personnalisé.

Les étapes

J’utilise ici l’exemple des vidéos Vimeo issu du site Analytics Mania (en anglais) sans trop entrer dans les détails : ce sont les grandes étapes de chaque approche que j’aimerais que vous intégriez. L’article d’Analytics Mania vous donne tous les détails nécessaires.

1. Créer l’écouteur en copiant / collant le code dans une balise HTML personnalisée et l’assigner au déclencheur recommandé dans le tutoriel : Balise > Nouvelle > HTML personnalisée :

2. Relancer la prévisualisation en cliquant sur le bouton Prévisualiser en haut à droite de GTM et observer, après avoir fait l’interaction que vous souhaitez tracker sur le site, si l’information correspondante apparaît dans Tag Assistant :

3. Créer les variables de type couche de données dont vous aurez besoin (Variables > Variables définies par l’utilisateur > Nouvelle > Variable de couches de données) à partir de ce qui est poussé dans le dataLayer par le code mis dans la balise HTML personnalisée.

Si vous souhaitez transférer certaines informations de la couche de données vers d’autres outils (comme Google Analytics) avec Google Tag Manager, vous devez en effet "apprendre" à GTM à les récupérer grâce à ces variables. Par exemple pour aller récupérer le titre de la vidéo :

4. Créer votre déclencheur de type événement personnalisé, en utilisant la valeur derrière la clef event du datalayer, video dans notre exemple :

5. Créer votre balise d’événement Google Analytics 4 (Balises > Nouvelle > Google Analytics > Google Analytics : Evénement GA4), pour envoyer l’interaction à l’outil, et la lier à votre déclencheur :

Enregistrer, tester, publier ;)

💡 A noter que vous ne trouverez pas toujours de custom auto-event listener développé pour votre besoin. C’est par exemple assez rare d’en trouver pour les chat bots, sauf Crisp.

💡 Il est fortement recommandé de consulter un développeur du site avant d'ajouter du code comme un écouteur personnalisé GTM. Ils trouveront peut-être des conflits avec le code du site pouvant causer des problèmes.

Avantages de cette méthode :

• Permet de suivre des interactions spécifiques, comme les interactions avec des widgets externes (ex. : chatbots), ou des players non supportés par défaut (ex. : Vimeo).

• Vous trouverez de nombreux scripts / tutoriels "clé en main", souvent partagés sur des blogs ou forums spécialisés.

Limites :

• Une mauvaise implémentation ou un code incompatible peut entraîner des problèmes de tracking ou de performance sur le site.

• Les scripts partagés par la communauté ne couvrent pas toujours vos besoins précis.

• Les scripts personnalisés peuvent devenir obsolètes si la structure de votre site ou des outils externes change.

L’injection manuelle de données dans le dataLayer via un développeur : flexibilité et pérennité.

Si aucune des 2 options citées précédemment ne fonctionne, vous devrez coopérer avec un développeur - à condition bien sûr que vous ayez cette ressource - qui devra mettre à disposition les données dont vous avez besoin dans le dataLayer. L'injection de données dans le dataLayer via un développeur - ou un plugin - est la méthode la plus flexible et pérenne pour tracker des interactions sur votre site.

Cette approche est à privilégier lorsque vous devez suivre des événements complexes ou personnalisés non pris en charge par les fonctionnalités d'écoute automatique de Google Tag Manager (GTM) et que vous souhaitez transmettre des informations enrichies (comme des données utilisateur lors de la soumission d’un formulaire, des catégories de produit, ou des détails de commande).

Le rôle de la méthode dataLayer.push()

Le mieux dans l’option du développeur est de lui préparer l’exemple de code, ou push dataLayer, à déclencher et c'est là que la méthode dataLayer.push joue un rôle important.

Par exemple, si vous souhaitez que votre développeur pousse un événement dans le dataLayer chaque fois qu'un nouvel abonné a saisi avec succès son adresse e-mail lors de son inscription à votre newsletter :

<script>

window.dataLayer = window.dataLayer || [];

window.dataLayer.push({

'event': 'new_subscriber'

});

</script>

Les dataLayer.push nécessaires au tracking ecommerce avec Google Analytics ont des structures un peu plus compliquées : exemple pour le push de confirmation de transaction.

💡 Le dataLayer est sensible à la casse : majuscule / minuscule. Seule la lettre L doit être en majuscule. DataLayer.push ne fonctionnera pas (parce D est en majuscule). datalayer.push ne fonctionnera pas non plus, parce que tout est en minuscule.

💡La méthode dataLayer.push devrait être la seule manière d'ajouter des données dans le dataLayer et ce même si la documentation officielle de Google Tag Manager mentionne / recommande d'utiliser une autre méthode dite de déclaration de couche de données (dataLayer = [{}]).

💡 Remarque : dataLayer.push doit contenir un paramètre "event" pour pouvoir l'utiliser avec le déclencheur d'événement personnalisé.

Une fois que les données sont disponibles dans le dataLayer, vous pourrez travailler avec elles via Google Tag Manager :

• Pour récupérer les données, vous utiliserez une variable de type couche de données.

• Pour déclencher une balise sur un événement dayaLayer (clé event: xxxx), vous utiliserez le déclencheur de type événement personnalisé.

💡Lorsque vous travaillez sur un CMS, notamment pour le tracking ecommerce, pensez toujours à aller jeter un œil du côté des plugins existants, qui peuvent vous faciliter la tâche en poussant la donnée dont vous avez besoin correctement dans le dataLayer. Prendre le temps de lire les avis avant de faire un choix, installer le plugin (vous aurez parfois besoin de l’aide d’un développeur) et le paramétrer. Certains plugins proposent également des conteneurs GTM à importer déjà configurés (avec les bonnes balises, déclencheurs, etc.). Pour WordPress, il y a par exemple le plugin de Thomas Geiger, GTM4WP, qui a une intégration WooCommerce et vous pousse dans le dataLayer les données ecommerce dont vous avez besoin. Il a aussi une intégration pour le suivi des soumissions de formulaire ContactForm7 avec des données enrichies (email, nom, prénom…) pour faciliter la mise en place du suivi avancé des conversions Google Ads notamment.

A partir de là, les étapes restent les mêmes que pour les autres méthodes :

1. Observer, après avoir fait l’interaction que vous souhaitez tracker sur le site, si l’information correspondante apparaît dans Tag Assistant.

2. Créer les variables dataLayer dont vous aurez besoin.

3. Créer un déclencheur de type événement personnalisé (event:xxxx).

Avantages de cette méthode :

• Une flexibilité totale pour transmettre des données spécifiques.

• Un contrôle précis sur le contenu et le moment où les données sont injectées.

• Une compatibilité avec presque tous les outils tiers via GTM.

Limites :

• Nécessite un développeur ou l’existence de plugins adaptés.

• Les erreurs de syntaxe ou de placement du code peuvent provoquer des dysfonctionnements.

Comment choisir la meilleure méthode : un framework pour guider vos décisions

Ce framework est là pour aider les débutants à choisir la meilleure option quand ils souhaitent tracker une interaction :

En résumé, vous devez toujours d’abord récupérer les données dans la couche de données ou dataLayer à l'aide d'un écouteur d'événement automatique standard, d'un écouteur personnalisé, d'un développeur ou d'un plugin. C’est la BASE à partir de laquelle vous allez pouvoir déclencher votre balise.

1. Commencer par l’auto-event tracking standard (colonne de gauche).

2. Si vous ne parvenez à obtenir les données dans le dataLayer de cette manière, passez à la colonne du milieu : essayer de trouver un écouteur d'événement automatique personnalisé. Google est votre ami.

3. Si vous ne trouvez toujours pas ce dont vous avez besoin, se déplacer vers la colonne de droite - vous aurez besoin de l'aide du développeur, ou d’un plugin qui pourrait éviter des heures (jours, semaines…) de développement.

Une fois les données à disposition dans le dataLayer, les étapes sont toujours les mêmes :

1. Configurer les variables (activer les variables intégrées ou créer des variables de couche de données).

2. Mettre à jour ou créer le déclencheur.

3. Configurer la balise, la lier au déclencheur précédemment créé. Si nécessaire, utiliser également certaines variables dans la balise comme paramètres. Lire les dimensions personnalisées dans GA4.

Conclusion

Le suivi des interactions dans Google Analytics 4 via Google Tag Manager peut sembler complexe, mais avec une bonne méthodologie et une compréhension du rôle central de la couche de données aka dataLayer, il devient un outil puissant et flexible pour répondre à vos besoins de suivi.

Si tout n’est pas limpide pour le moment, c’est e normal. Google Tag Manager n’est pas un outil aisé à appréhender et il faut du temps pour bien le maîtriser. Mon conseil : pratiquer encore et encore et à un moment vous serez en mesure de rejoindre les points entre les différents concepts abordés… 

Dans cet article, nous avons exploré les trois principales façons de tracker des interactions via GTM :

1. L’auto-event tracking intégré : idéal pour des cas courants comme les clics sur des liens, le tracking des niveaux de scroll de vos pages ou le suivi des vidéos YouTube. C’est la méthode la plus simple à mettre en place et elle couvre de nombreux besoins standards.

2. Le custom auto-event tracking : une option à investiguer pour les interactions plus spécifiques (comme les vidéos Vimeo ou les widgets externes), nécessitant un peu de JavaScript via des recettes déjà disponibles sur le web. Attention à ne pas utiliser n’importe quelle source et vérifier idéalement avec un développeur du site qu’il n’y aura pas de conflit.

3. L’injection manuelle dans le dataLayer : la méthode la plus personnalisable et pérenne, souvent via un développeur (voire un plugin), pour suivre des scénarios complexes et / ou envoyer des données enrichies.

Votre choix dépendra de trois facteurs : la complexité de l’interaction à suivre, les ressources disponibles (si vous avez accès à un développeur, l’injection dans le dataLayer est une option puissante) et vos objectifs métier : assurez-vous que les données collectées répondent vraiment à vos besoins d’analyse et d’optimisation.

Prenez le temps de bien structurer vos configurations, testez systématiquement vos implémentations et, si nécessaire, n’hésitez pas à collaborer avec des experts ou des développeurs.

Besoin de maîtriser GA4 ou GTM ?

Que vous partiez de zéro ou cherchiez à optimiser une configuration existante, je vous accompagne à chaque étape :

• Audit GA4 : état des lieux de votre configuration

• Implémentation : setup sur mesure GA4 + GTM

• Formation : montée en compétences de vos équipes (note : 9,45/10 – +100 professionnels)

• Coaching : accompagnement régulier ou ponctuel sur l’analyse de données

On en parle ? Réservez un créneau ici pour parler de votre contexte et de vos enjeux.

Besoin d'un coup de main ponctuel ? Une question bloquante ou un point technique à résoudre sur GA4 ou GTM ? Réservez un appel ici.