Les
Variables
Google Tag Manager

Temps de lecture estimé : 5’30 minutes

Élément stratégique de tous les Tag Management System (TMS), la variable est le support de l’information envoyée à vos outils Web Analytics. Ne bougez pas, votre agence Google Tag Manager Qweri vous explique tout !

Tout d’abord qu’est-ce qu’une variable ?

En plus de permettre le déclenchement d’un événement (via la condition à remplir, par exemple : la variable “click URL” doit être égale à https://www.pasvotresite.com), les variables sont en effet utilisées pour collecter des informations contenues sur une page de votre site (ou de votre application mobile) : du clic sur un bouton (collecte du nom du CTA) à l’ajout du produit au panier (collecte du nom et de la valeur du produit) en passant par le partage sur les réseaux sociaux (collecte du nom du réseau social), etc.

En outre, les balises de Google Tag Manager ont besoin d’être alimentées ! Elles sont à l’affût des informations provenant de votre site web ou encore de votre application mobile.

Quels sont les différents types de variables ?

Comme pour les balises GTM, il existe deux types de variables sur Google Tag Manager : les variables intégrées (celles disponibles nativement dans GTM, elles ne sont pas personnalisables) et celles définies par l’utilisateur (celles que l’on peut totalement personnaliser, un peu les DIY de GTM).

Les variables de Pages

Page URL : remontée de l’URL complète (exemple : https://www.qweri.fr)
Page Hostname : remontée ici de la partie nom d’hôte de l’URL (ex : www.qweri.fr)
Page path : remontée du chemin d’accès de l’URL (ex : )
Referrer : remontée de l’URL complète de la page de provenance.

Les variables de Clics

Click Element : remontée de l’élément DOM sur lequel a eu lieu le clic.
Click Classes : remontée de la “Class” associée dans le DOM.
Click ID : remontée de l’ID dans le DOM.
Click Target : remontée de l’élément target.
Click URL : remontée de l’URL du clic (ex : un bouton Contact qui redirige vers la page Contact)
Click Text : remontée du texte sur lequel a eu lieu le clic.

Les variables d’Erreurs

Error message : remontée de la clé gtm.errorMessage du dataLayer.
Error URL : remontée de la clé gtm.errorUrl du dataLayer.
Error Line : remontée de la clé gtm.errorLine du dataLayer.
Debug Mode : la valeur “true” s’affiche le conteneur est en mode aperçu.

Les variables de Vidéos (1/2)

Video Provider : accède à la clé gtm.videoCurrentTime de la couche de données et remonte le nom du fournisseur de la vidéo (YouTube pour une vidéo provenant de la plateforme du même nom).
Video Status : accède à la clé gtm.videoStatus de la couche de données et remonte l’état de la vidéo au moment de l’événement, si elle était en lecture ou en pause.
Video URL : accède à la clé gtm.videoUrl de la couche de données et remonte l’URL de la vidéo.
Video Title : accède à la clé gtm.videoTitle de la couche de données et remonte le titre de la vidéo.

Les variables de Vidéos (2/2)

Video Duration : accède à la clé gtm.videoDuration de la couche de données et remonte la durée en seconde de la vidéo.
Video Current Time : accède à la clé gtm.videoCurrentTime de la couche de données et remonte l’heure à laquelle l’événement s’est produit.
Video Percent : accède à la clé gtm.videoPercent de la couche de données et remonte le pourcentage visionné de la vidéo lors de l’événement.
Video Visible : accède à la clé gtm.videoVisible de la couche de données et remonte “true” si la vidéo est visible ou “false” si elle ne l’est pas au moment de l’événement.

Les variables d’Historique

NewHistoryFragment : accède à la clé gtm.newUrlFragment de la couche de données.
OldHistoryFragment : accède à la clé gtm.oldUrlFragment de la couche de données.
NewHistoryState : accède à la clé gtm.newUrlState de la couche de données.
OldHistoryState : accède à la clé gtm.oldHistoryState de la couche de données.
HistorySource : accède à la clé gtm.historyChangeSource de la couche de données.

Les variables de Formulaires

Form Element : remontée de l’élément ayant été cliqué.
Form Classes : remontée des valeurs trouvées dans l’attribut Class du formulaire.
Form ID : remontée de l’ID de l’élément du formulaire.
Form Target : remontée de l’attribut “target” de l’élément du formulaire.
Form URL : remontée de l’URL de l’élément du formulaire.
Form Text : remontée du texte de l’élément du formulaire.

Les variables de Défilement

Scroll Depth Threshold : accède à la clé gtm.scrollThreshold de la couche de données, qui remonte la profondeur du défilement dans une page.
Scroll Depth Units : accède à la clé gtm.scrollUnits de la couche de données, qui remonte la valeur “pixels” ou pourcentage.
Scroll Direction : accède à la clé gtm.scrollDirection de la couche de données, qui remonte le sens du scroll, verticale ou horizontale.

Les variables de Visibilité

Percent Visible : accède à la clé gtm.visibleRatio de la couche de données et remonte le pourcentage de visibilité de l’élément sélectionné.
On-Screen Duration : accède à la clé gtm.visibleTime de la couche de données et remonte la durée de visibilité de l’élément sélectionné avant l’exécution du déclencheur.

Les variables GTM définies par l’utilisateur

Les variables définies par l’utilisateur sont des variables que l’on peut créer et modifier en fonction de vos besoins si vous ne trouvez pas votre bonheur dans la liste des variables intégrées. Ces variables personnalisées sont réparties dans 5 catégories : navigation, variables de page, éléments de la page, utilitaires et données relatives au conteneur. Voyons cela plus en détails…

Navigation

On va s’intéresser ici principalement à l’URL sur laquelle se trouve ou provient l’internaute.

URL de provenance HTTP : la valeur de cette variable correspond à la page précédemment visitée par l’internaute (referral).
URL : la valeur de cette variable est l’URL de la page sur laquelle se trouve l’internaute. Il est toutefois possible d’affiner cette URL par section : l’URL complète, le protocole, le nom d’hôte, le port, le chemin, l’extension de fichier, la requête ou le fragment de celle-ci (pratique quand on a des URLs du type https://www.votresite.fr/recherche/la-recherche-effectuee, pour isoler les termes de recherche !)

Données relatives au conteneur

On ne peut pas être plus précis. Cette catégorie englobe toutes les informations de votre conteneur Google Tag Manager.

ID du conteneur : cette variable affiche l’ID du conteneur Google Tag Manager.
Mode débogage : la valeur de cette variable est true si le conteneur est en mode Aperçu et débogage sinon false.
Numéro de version du conteneur : cette variable affiche le numéro de la version de l’aperçu utilisé lorsque l’on est en mode Aperçu.

Eléments de la page

Élément DOM : la valeur de cette variable récupère l’élément voulu dans le DOM (vous devez indiquer à GTM comment récupérer cet élément, soit par un ID, soit pas CSS Selector).
Variable d’événement automatique : la valeur de cette variable récupère l’élément source du déclenchement d’un événement.
Visibilité de l’élément : la valeur de cette variable est l’élément qui doit être visible en précisant son pourcentage de visibilité (une phrase de remerciement après avoir rempli un formulaire par exemple).

Utilitaires (1/2)

Constant : la valeur est une valeur fixe comme un code de suivi Google Analytics qui pourrait être régulièrement appelée dans les balises ou déclencheurs…
Événement personnalisé : la valeur de cette variable correspond au nom de l’événement personnalisé dans la couche de données. On parle par exemple d’un événement que l’on “push” avec le dataLayer (dataLayer.push) : dataLayer.push({‘event’: ‘Qweri’}) ici la valeur de l’événement personnalisé serait Qweri.
Paramètres Google Analytics : cette variable est essentielle pour centraliser et récupérer les données des balises paramétrées en indiquant l’UA de suivi de votre Google Analytics. C’est notamment cette variable qui permet de mettre en place l’anonymisation des IPs, la restriction de durée de conservation du cookie Google Analytics, ou encore les dimensions personnalisées et le content grouping…

Utilitaires (2/2)

Tableau d’expressions régulières : cette variable permet de modifier le format d’une valeur (par exemple : “facebook.fr” devient “Facebook”, “twitter.fr” devient “Twitter”) pour afficher des données uniformes (et donc exploitables !)
Tableau de conversion : que l’on appelle aussi tableau de correspondance ici. Cette variable permet de créer un tableau avec une variable dépendant d’une autre variable (par exemple : mon site A correspond à l’ID de suivi 1 et mon site B à l’ID de suivi 2). Cette variable est très utile lorsque vous avez une version DEV et une version PROD.
Nom de l’environnement : cette variable affiche le nom de l’environnement en mode aperçu.
Nombre aléatoire : cette variable correspond à un nombre aléatoire qui est compris entre 0 et 2 147 483 674.

Variables de page

Toutes les données disponibles au sein d’une page que l’on peut récupérer et qui se trouvent dans le dataLayer.

Cookie propriétaire : la valeur de cette variable prend le nom du cookie propriétaire associée au nom de domaine sur lequel se trouve l’internaute (le cookie “_ga” de Google Analytics est associé à votre domaine et ne peut être lu que par celui-ci).
JavaScript personnalisé : la valeur de cette variable correspond au résultat de votre fonction JavaScript. Si la valeur souhaitée n’est pas définie dans la couche de données et pas visible dans l’élément DOM, cette variable permet de l’obtenir avec une fonction JavaScript (très pratique quand on cherche par exemple à remonter des valeurs de champs de formulaires).
Valeur non définie : la valeur de cette variable est “undefined” provenant du JavaScript.
Variable de couche données : la valeur de cette variable est celle définie dans la couche de données (oui, le fameux DataLayer…)

Vous souhaitez discuter Variable Google Tag Manager avec nous ?

C'est par ici !

Les
Variables
Google Tag Manager

Tout d’abord qu’est-ce qu’une variable ?