Google Analytics et Google Tag Manager

Ces outils de Google n’ont pas la même utilité.

Google Analytics est un agrégateur de données.

• il n’est pas possible de configurer les données envoyées par un site sur GA;
• il vise à collecter, trier, traiter et organiser les données reçues (les évènements) pour pouvoir afficher des informations pertinentes pour le client;
• GA fournit un script s’installant sur un site permettant de récolter un certain nombre d’évènements de base. Cependant si l’utilisateur souhaite des données spécifiques, des évènements non disponibles dans la configuration de base ou des déclencheurs spécifiques, il doit passer soit par le code du site, soit par GTM.

GTM est un manageur de TAG qui permet, dans le cadre d’un Analytics par exemple, de configurer :

• les évènements que l’on souhaite envoyer (balises);
• les données contenus dans ces évènements (variables / data Layers);
• l’envoi de ces évènements (déclencheurs)
• le destinataire de ces évènements (GA4)

GTM peut également être utilisé pour autre chose que Google Analytics : ChatBot, Facebook Pixel, FloodLight, Google Ads, etc.
Le terme TAG désigne tout ce qui se déclenche lors d’une action spécifique sur un site. Ce n’est pas donc pas un terme spécifique à GA.

Comment implémenter Google Analytics et Google Tag Manager ?

Pour GA :

Il vous faut créer une propriété GA4. Cela correspondra à un agrégateur et donc, en règle général, vous pouvez donc mettre l’URL de votre site en tant que nom.

🚨 Si le bouton “Créer une propriété” est grisé, c’est que vous n’êtes pas administrateur de ce compte.

Il nous faut maintenant renseigner d’où proviendront les données : c’est ce qu’on appelle un “flux de données”.

Dans une propriété, il est possible de configurer plusieurs flux de données. Pour recevoir les données d’un site recette en plus de votre site en production, par exemple, ou encore pour des tests.
Attention cependant à gérer ces flux de données dans vos affichages sur Google Analytics derrière pour ne pas les corrompre.

Une fois que vous avez votre flux, vous pouvez cliquer dessus pour avoir accès à la variable qui nous intéresse : l’ID de Mesure.

Il commence forcément par un G- pour GA4. Notez bien cet identifiant dans un coin, nous en aurons besoin plus tard.

Et c’est tout pour la configuration de base !

POUR GTM :

Il suffit de vous rendre sur le site et de créer votre compte.

L’interface de GTM est simple, vous trouverez sur le côté gauche différents onglets et seuls trois d’entre eux vont nous intéresser :

• Variables
• Déclencheurs
• Balises

Variables

Nous pouvons configurer ici des variables utilisables dans nos autres interfaces et récupérer des variables contenus dans nos évènements.
On peut renseigner, par exemple, une URL spécifique pour éviter d’avoir à la réécrire à chaque fois dans nos balises. Nous allons nous en servir pour renseigner votre ID de mesure (celui de GA4).
Choisissez le champ “Constant”, et renseignez l’ID de Suivi.

En jetant un œil aux “paramètres avancés” de certains types de variables, vous apercevrez de nombreuses autres possibilités, mais nous ne rentrerons pas ici dans les détails.

Déclencheurs

C’est ici que l’on va renseigner le moment où un événement doit être envoyé. Nous allons simplement créer un déclencheur sur la page d’accueil du site, en se basant sur l’URL.

Les types les plus utilisés sont généralement “Page vue” et “Clic”. Vous pouvez, par exemple, déclencher un événement lorsque l’utilisateur clique sur un bouton qui possède une certaine classe css.
Ainsi vous avez juste à renseigner la classe sur les éléments souhaités dans votre code HTML.

Balises

Vous allez définir ici le type de tag que vous souhaitez inclure sur le site. Un évènement GA4, un pixel facebook, etc.
De nombreux templates sont disponibles et d’autres téléchargeables.

Dans notre exemple, nous souhaitons un évènement pour GA4. Mais, dans un premier temps, nous allons nous servir de GTM pour injecter notre config GA4 dans l’ensemble des pages de notre site.

Paramétrez bien le déclencheur Initialization. Il est important que cette configuration se charge en premier sur le site. Cette configuration est nécessaire pour l’envoi des mesures automatiques et des événements.

Maintenant vous pouvez Créer votre balise d’évènement : 

• Ajoutez une balise de type GA4 événement,
• Renseignez l’ID de mesure en incluant la variable créée précédemment ou en créant une nouvelle balise de configuration,
• Renseignez le déclencheur que nous avons renseigné.

C’est terminé ! Cet événement remonte à présent dans votre Google Analytics.

Conformité RGPD et cookies

Attention, notre plan de tracking va maintenant être injecté sur notre site sans prendre en compte les préférences cookies de vos utilisateurs. Ce qui n’est pas conforme aux exigences de la RGPD.
Pour pallier cela, rien de plus simple : il nous faut injecter notre Balise de configuration Google Analytics seulement si l’utilisateur a accepté le cookie Analytics.

Au sein de Kernix, nous exploitons principalement “tarteaucitron.js” car c’est un outil puissant, léger et, surtout, recommandé par la CNIL.
Cette Consent Management Platform (CMP), ou Plateforme de Gestion de Consentement, stockera côté utilisateur le cookie nommé “gtag”. Cela nous permettra de savoir si l’utilisateur a accepté le tracking analytics.

Nous allons donc créer un nouveau déclencheur prenant en compte ces cookies :

• Créez une variable “Cookie propriétaire” avec le nom du cookie mis par votre gestionnaire (tarteaucitron pour notre cas)
• Définissez un déclencheur de type “Page vue”, et mettez une condition comme ci-dessous. Cela permet de vérifier, dans la valeur de notre cookie, que l’info « gtag=true » est présente, notifiant ainsi l’acceptation des cookies analytics par l’utilisateur.

• Utilisez ce nouveau déclencheur pour votre balise de configuration GA4, et le tour est joué 👍

Intégration des scripts

Comme notre script GA est intégré automatiquement avec GTM, nous avons seulement besoin d’intégrer les scripts GTM dans le code source de notre site.
Nous n’avons pas besoin de gestion de cookies pour ces scripts : GTM ne traque rien automatiquement. Ce n’est donc pas un sujet pour la CNIL (tant que vos balises sont correctement gérées).

En cliquant sur votre identifiant GTM en haut à droite, vous aurez accès aux deux scripts nécessaires à son intégration, avec les instructions associées.

🚨Attention il est possible que le chargement des scripts soit bloqué à cause de votre Content Securicy Policy. Pensez à la modifier sur votre serveur pour autoriser les js/css venant de googletagmanager.

Data Layers

En plus de la remontée d’évènement, une demande porte fréquemment sur les valeurs associées à cet évènement, par exemple :

• le prix d’un produit quand l’utilisateur l’ajoute à son panier;
• le total de la commande lorsqu’il valide son panier;
• le statut d’un utilisateur lorsqu’il se connecte;
• etc.

La plupart des événements contiennent des data layers de base. Certains plugins WordPress proposent l’intégration de ces variables à des événements e-commerce automatiquement intégrés.
Nous allons voir ici comment nous pouvons l’intégrer nous-même.

🚨Intégrer des data layers personnalisés requiert forcément (à défaut d’un plugin / module faisant parfaitement le travail) des compétences techniques et prend bien plus de temps.

Au niveau du code, un événement ressemble à cela (si codé manuellement) :

gtag(‘event’, <action>, {
‘event_category’: <category>,
‘event_label’: <label>,
‘value’: <value>
});

Vous renseignez le nom de l’événement à la place de la balise <action>, et renseignez également les data layers natifs de Google Analytics.

Lorsque vous créer un évènement dans votre interface GTM, ce bout de code est injecté et sera déclenché lors de l’activation de votre déclencheur, avec les bonnes variables.
Cet événement est directement transmis à Google Analytics.

Notre but est d’obtenir de la visibilité sur les évènements remontés, leur data layers associés et la façon dont ils sont gérés (potentiellement leur laisser la main sur la configuration).
Pour cela, le meilleur moyen est donc d’utiliser notre GTM pour gérer nos data layers.
Voici comment procéder :
Nous modifions le déclencheur de notre évènement précédemment créé, see-home.
Nous ne déclencherons plus ce tag lors d’un clic spécifique, mais seulement lorsque nous recevrons l’évènement see-home.

Pourquoi procéder ainsi ? Parce que dans notre code, nous allons envoyer maintenant un dataLayer au lieu d’un évènement, ce dataLayer contiendra l’évènement “see-home”, ainsi qu’une variable personnalisé, disons, le nom de l’utilisateur actuel.

Voici un exemple intégré sur la homepage du site Kernix :

<script>
dataLayer.push({
« event »: »see-home »,
« user »: »thomas »
});
</script>

Ainsi, GTM déclenchera l’envoi du tag event-home lorsqu’il recevra l’évènement see-home, et il aura accès à toutes ses variables. Il peut ainsi décider de les envoyer ou non à GA, faire des calculs avec, ou toute autre joyeuseté que nous vous laissons découvrir par vous-mêmes !

🚨Maintenant que notre déclencheur est basé sur le nom de l’événement, c’est au développeur de gérer la logique d’envoi du dataLayer dans son code (lors d’un clic, d’une page vue, d’une action spécifique, etc.).

Nous en avons fini !

Voici un schéma récapitulatif de ce que nous venons d’implémenter :

Illustration : Jade KAÏDI