Informations pratiques (pour les formations Cegos)
Accès à un conteneur de test, associé au site sandbox.formation.dibenn.com
Dans le cadre de cette formation, vous avez accès au compte GTM-MV5J63T associé au site sandbox.formation.dibenn.com.
L’objectif est de vous permettre de réaliser les différentes exercices de manipulation et d’observation in situ.
Vous pourrez créer vos variables, que vous associerez aux tags et aux déclencheurs, et observer le résultat à l’aide du module de prévisualisation.
Accès aux solutions
un dossier partagé est mis à votre disposition, dans lequel vous trouverez les résutats des exercices : le conteneur téléchargeable vous présente les solutions des exercices.
Affichage de l'extrait du support relatif à chaque module
📌 Pour faire apparaître les slides encapsulées dans les pages, il faut ajouter un paramètre à l’url utilisée : https://www.formation.dibenn.com/formation-google-tag-manager/?cegos.
Ceci a pour effet de stocker l’information en session storage (Key = « intra », value = »Cegos »). la présence de ces éléments va déclencher l’affichage.
Attention : le stockage ne dure que le temps d’une session : dès que votre session sera terminée, il faudra à nouveau vous rendre sur les pages en utilisant ce paramètre : /?cegos.
Quelles variables peut-on créer dans GTM ?
Nous ne listons pas ci-dessous l’ensemble des variables, mais présentons une sélection de celles qui peuvent vous être le plus utilies pour commencer à suivre les interractions clés avec GTM.
variables intégrées (built-in variables)
GTM permet de créer des variables, basées sur la détection de certains éléments html du site. Cette fonctionnalité est particulièrement intéréssante pour suivre les interractions clés qui sont en général les clics, atteinte de certaines pages, remplissage de formulaires, visionnage de videos.
👉 Il suffit, pour créer ces variables, de cocher la case en face de celles que l’on souhaite utiliser, depuis l’interface utilisateuir GTM, sur le module ‘Built-in variables’.
Ces variables sont classées par thématique : page, clics, formulaires, vidéos, etc…
Nous pourrons ensuite les récupérer pour alimenter nos tags, déclencher un événement, etc…
Quelques exemples courants
variables associées aux clics
Si un élément cliquable comporte un ID, une classe, etc… GTM va automatiquement détecter la présence des attributs associés (si la variable a été activée), et les ‘pousser’ dans le dataLayer.
variables associées aux visionnage de vidéos encapsulées sur YouTube
GTM et Youtube sont deux produits de l’écosystème Google.
Les ‘signaux’ des vidéos Youtube (titre, url, durée totale, poyrcetage de visionnage par rapport à la durée totale).. peuvent être transmis à GTM, et ‘poussés dans le dataLayer, pour une utilisation dans les tags, comme déclencheur, etc…
variables associées aux formulaires
La présence de formulaire est détectée si une une balise <form> </form> se trouve dans le code html du site. GTM propose une série de variables relatives au formulaire, pour suivre précisément les interractions sur le site.
Ainsi, la variable ‘Form ID’ va détecter et stocker l’attribut ‘ID’ de l’élément html <form>. Dans le cas où l’élément n’en comporte pas, la valeur remontée sera ‘null’.
variables associées aux pages
A chaque chargement de page, GTM va détecter l’url complète de la page affichée, et les éléments qui la composent : nom de domaine (hostname) et chemin de la page (page path).
L’url d’où l’on provient (referrer) est également collectée.
👉 Exercice pratique :
i) observez, dans l’interface GTM, le type de variable créé (ex : Data Layer variable, URL, etc…)
ii) Pour les variables de type ‘Data Layer( (les clics par exemple), observez, à l’aide de l’outil de prévisualisation GTM, ou simplement en ouvrant la console de votre navigateur, les informations qui remontent, lorsque vous effectuez l’action correspondante (ici, un clic).
variables définies par l’utilisateur (user-defined variables)
Comme leur nom l’indique, ces variables ne sont pas automatiquement renseignées par GTM dès qu’elles sont créées, à la différence des variables pré-construites, mais nécessitent que l’utilisateur renseigne certains éléments.
Certaines variables ne requièrent qu’une information courte, par exemple, un identifiant de mesure; et d’autres permettent de créer les variables ex-niholo, en les codant intégralement en javascript.
Notez qu’en sus des variables proposées par défaut par GTM (cf film ci-dessous) …
… Il est également possible d’utiliser les variables de la galerie, proposées par la communauté des utilisateur GTM, et par des sociétés spécialisées dans le suivi des sites web.
A l’instar des plugins ou des adds on, vous pouvez décider de les installer dans GTM. Attention toutefois à l’entité émettrice de ces templates : privilégiez la prudence au confort.
Enfin, gardez à l’esprit que les variables issues de la galerie sont moins paramétrables et adaptables que celles que vous pouvez créer sur-mesure.
Voici ci-après une sélection des principales variables dont vous aurez besoin pour le suivi des interractions sur votre site
variable ‘Constante’ pour créer une ‘Variable ‘ID de mesure’
Définition :
C’est la variable qui contiendra l’identifiant du flux de données dans lequel les informations de navigation seront enregistrées.
Intérêts
- Permettre la ré-utilisation de cette information, en évitant toute éventuelle faute de frappe
- Donner un nom parlant à cette variable, plus explicite que G-XXXXX
Illustration
Cliquez sur l’image ci-dessous pour l’agrandir 
Comment trouver l’ID de mesure ? Exemple ci-dessous, pour l’ID de mesure GA4 du site de démonstration de Google (Google Merchandise Store.
Cliquez sur l’image ci-dessous pour l’agrandir 
variable ‘configuration Settings’
Définition :
C’est la variable qui contiendra tous les paramètres communs aux tags GA que l’on va utiliser. Elle peut contenir par exemple :
- l’ID de mesure (qui peut être contenu dans une variable, comme vu ci-dessus)
- Les éventuelles dimensions personnalisées (custom dimensions) que l’on souhaite attacher à chaque enregistrement de page vue.
Intérêts
- mutualisation de la configuration : réutiliser ce paramétrage pour tous les tags concernés (ex : tous les tags GA4 de e-commerce).
- maintenance facilitée : s’il faut modifier quelquechose, il n’y a qu’une seule variable à modifier, pour que ce changement soit ‘distribué’ à tous les tags.
Illustration
Cliquez sur l’image ci-dessous pour l’agrandir 
variable 'custom js' (javascript personnalisé)
Définition
C’est une variable que l’on va créer de toutes pièces, ex-nihilo, directement en javascript. Vous devez donc maîtriser un minimum ce language pour créer vos variables.
Intérêt
Quelquefois, on souhaite enrichir les informations collectées par défaut par l’outil de tracking avec des informations spécifiques à notre activité. , comme par exemple le statut d’un visiteur en ligne, le sujet du bouton cliqué, une valeur choisie dans un menu déroulant, le prix d’un produit mis au panier, etc….
On peut vouloir aussi adapter le contenu d’un site en fonction de la valeur d’une variable (c’est le cas par exemple pour les supports de formation de ce site, qui ne s’affichent que lorsque l’existence d’une variable personnalisée a été détectée).
Illustration
Cliquez sur l’image ci-dessous pour l’agrandir 
variable issue du Data Layer
Définition
On peut penser au dataLayer comme à un espace de stockage temporaire où sont déposées des informations, mises à disposition pour ‘nourrir’ les différents tags (site centrics, media, etc…).
Lorsque l’on sait de quelles informations on souhaitera disposer (plan de taggage), ou de quels paramètres les différents tags devront être alimentés (documentation des régies), on sait ce qu’il faut faire figurer dans le dataLayer (à faire idéalement réaliser par les développeurs du site).
Le dataLayer est un objet Javascript, et peut être consulté et manipulé en utilisant ce language.
On peut ‘pousser’ une information dans le dataLayer, et la récupérer.
Une fois qu’une information est présente dans le dataLayer, GTM offre une fonctionnalité de récupération de cette valeur via une interface de création de variable dédiée, ce qui permet une création en ‘no code’.
Mise en garde
⚠️ Attention toutefois, ceci ne fonctionne que pour les variables de premier niveau. Si l’on souhaite récupérer une valeur contenue dans un objet, lui-même contenu dans un array (tableau), il faudra passer par une création de variable personnaliséee (en js).
⚠️ De la qualité des informations contenues dans le dataLayer dépendra la qualité des données collectées.
Utilisation
Les données du dataLayer sont massivement utilisées pour tout types de suivi, mais cette fonction est particulièrement utilisée pour le suivi des sites e-commerce.
Notons que chaque outil de suivi et chaque régie va demander, pour ‘nourrir ses tags, des données dans un format spécifique. Il sera alors nécessaire de ‘retravailler’ le dataLayer, pour créer des variables (objets) dans le format attendu.
Vous pouvez avoir un aperçu de ce qui est demandé par les principaux outils et régies en consultant l’article dédié.
📌 Sur ce site, lorsque des interractions importantes sont observées, des couples clé-valeurs sont poussées dans le dataLayer, pour qualifier l’événement:
- eventcategory
- eventAction
- eventlabel
Elles sont ensuite déclarées en variables GTM, et récupérées pour alimenter les tags site-centrics et ad centric.
Illustration
Cliquez sur l’image ci-dessous pour l’agrandir 
Exercices d’observation :
– créez une variable intégrée relative aux clics, puis observez en prévisualisation ce qui est poussé dans le datalayer lorsque vous cliquez sur certains éléments clés du contenu (listés dans le plan de taggage).
– allez sur un site marchand (le site de la boutique du Centre Pompidou, par exemple), et observez ce qui est poussé dans le dataLayer au fur et à mesure que vous progressez dans le tunnel d’achat.
variables personnalisées
👉 Exemples concrets
1/ Stockage du consentement utilisateur
La valeur de la variable ‘cookieConsent’ lue dans le 1rst party cookie et stockée dans le dataLayer est :
📖 Pour afficher cette valeur, les éléments suivants ont été utilisés (que vous pouvez retrouver dans le container mis à votre disposition le temps de la formation):
- variable : {{cookieConsentValue}}
- tag : demo_cookie_value
- trigger : demo variable trigger
👉 Mise en pratique
Dans cet exemple, nous allons recueillir une variable ‘prénom’ collectée ‘en live’ via un pop-up. Variable qui sera ensuite poussée dans le dataLayer. Cette information est recueillie via un tag personnalisé, dont vous trouverez le script ci-dessous.
<script>
var demoCustomDim= prompt(‘Bonjour n Nous allons aborder le sujet passionnant des custom dim n Pour cela, pouvez-vous renseigner votre prénom ?’)
dataLayer.push({
‘event’:’firstNameEntered’,
‘firstName’:demoCustomDim
});
</script>
📖 Pour afficher cette valeur, les éléments suivants ont été utilisés (que vous pouvez retrouver dans le container mis à votre disposition le temps de la formation):
- tag : Demo_custom_dim
- trigger : demoCustomDimTrigger
👉A vous de jouer :
Dans le container GTM, créez une variable ‘Prénom_xxxx’ (1) à partir de ce qui est poussé dans le dataLayer (illustration ci-dessous)
(1) remplacez xxx par votre prénom, ou votre surnom, pour que vous puissiez facilement retrouver la variable
Puis, observez grâce à la prévisualisation GTM la valeur renseignée (après avoir cliqué sur le bouton « A vous d’observer dans le dataLayer la variable envoyée »).
Exercices d’observation :
– créez une variable intégrée relative aux clics, puis observez en prévisualisation ce qui est poussé dans le datalayer lorsque vous cliquez sur certains éléments clés du contenu (listés dans le plan de taggage).
– allez sur un site marchand (le site de la boutique du Centre Pompidou, par exemple), et observez ce qui est poussé dans le dataLayer au fur et à mesure que vous progressez dans le tunnel d’achat.