Quelles variables peut-on créer dans GTM ?

Variables intégrées, définies par l'utilisateur et personnalisées.

Informations pratiques (pour les formations Cegos)

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érents 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.

Un dossier partagé est mis à votre disposition, dans lequel vous trouverez les résultats des exercices : le conteneur téléchargeable vous présente les solutions des exercices.

📌 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.

Table des matières

Variables intégrées (built-in)Variables définies par l'utilisateurVariables personnalisées

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 utiles pour commencer à suivre les interactions 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éressante pour suivre les interactions clés qui sont en général les clics, l'atteinte de certaines pages, le remplissage de formulaires, le visionnage de vidéos.

👉 Il suffit, pour créer ces variables, de cocher la case en face de celles que l'on souhaite utiliser, depuis l'interface utilisateur 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.

👉 Dans le cas où cette vidéo ne s'affiche pas correctement (eg : cookies youtube bloqués), vous pouvez la retrouver à cette url : https://youtu.be/oMly5aHgYyE

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 au 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, pourcentage 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 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 interactions 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

À 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

  1. Observez, dans l'interface GTM, le type de variable créé (ex : Data Layer variable, URL, etc.).
  2. 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).
↑ Retour à la table des matières

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 nihilo, en les codant intégralement en JavaScript.

Notez qu'en sus des variables proposées par défaut par GTM (cf. film ci-contre)…

👉 Dans le cas où cette vidéo ne s'affiche pas correctement (eg : cookies youtube bloqués), vous pouvez la retrouver à cette url : https://youtu.be/QVy14H8zpdo

… il est également possible d'utiliser les variables de la galerie, proposées par la communauté des utilisateurs GTM, et par des sociétés spécialisées dans le suivi des sites web.

À l'instar des plugins ou des add-ons, 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.

👉 Dans le cas où cette vidéo ne s'affiche pas correctement (eg : cookies youtube bloqués), vous pouvez la retrouver à cette url : https://youtu.be/Btm-UhLT9Io

Voici ci-après une sélection des principales variables dont vous aurez besoin pour le suivi des interactions 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.

GTM — Variable Constante

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.

GA4 — ID de flux (stream ID) dans l'interface d'administration
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 quelque chose, 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.

GTM — Variable Configuration Settings (paramètres Gtag)
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 langage 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.

GTM — Variable custom JS
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 langage.

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ée (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 type 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 interactions importantes sont observées, des couples clé-valeur 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-centrics.

Illustration

Cliquez sur l'image ci-dessous pour l'agrandir.

Exemple de variable issue du Data Layer dans GTM

Exercices d'observation

↑ Retour à la table des matières

Variables personnalisées

👉 Exemples concrets

1 / Stockage du consentement utilisateur

La valeur de la variable cookieConsent lue dans le 1st party cookie et stockée dans le dataLayer est :

👉 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 une dimension personnalisée, 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>

À vous d'observer dans le dataLayer la variable envoyée

Exercices d'observation

↑ Retour à la table des matières