Les variables dans Google Tag Manager

Lors de la configuration de vos déclencheurs, nous avons évoqué à plusieurs reprises le concept de variables sans réellement en expliquer le sens et son importance dans la gestion de votre conteneur.

Une variable est un élément qui contient une valeur amenée à changer (d'où son nom variable). Du fait du caractère changeant de sa valeur, il peut être difficile de la manipuler, c'est pour cette raison que l'on attribue un nom aux variables.

On sait que la variable nommée {{Page URL}} contient la valeur correspondant à l'URL de la page, mais on ne connaît pas encore sa valeur, et cette dernière change pour chaque page du site.

Quand utiliser des variables ?

Dans Google Tag Manager, les variables sont indispensables et peuvent être utilisées à plusieurs endroits.

Dans des déclencheurs

Le premier cas d'usage est de se servir des variables pour configurer des déclencheurs. À chaque fois que vous avez sélectionné une valeur dans la liste déroulante du formulaire de configuration d'un déclencheur, vous avez choisi une variable sans le savoir.

La valeur contenue par la variable sélectionnée sera ensuite observée et comparée à la valeur que vous avez saisie dans la configuration de votre déclencheur.

C'est ce mécanisme qui permet à vos déclencheurs de s'adapter au contexte de la page et de réaliser leur rôle à la perfection.

Dans des balises

Le deuxième cas d'usage est d'utiliser les variables au niveau des balises pour remonter des informations dans vos outils tiers.

Par exemple, le module e-commerce de GA4 repose sur ce mécanisme de variables. Pour chaque produit vu, ajouté au panier ou acheté, vous allez devoir envoyer à l'aide de variables, les informations des produits et de la commande vers Google Analytics.

Pour utiliser une variable dans une balise, il suffira de cliquer sur la pièce de "Lego" située à droite du champ souhaité.

On reconnaîtra les variables grâce à cette syntaxe facilement identifiable {{Nom Variable}}.

Les variables intégrées

Votre Tag Manager embarque par défaut un certain nombre de variables préconfigurées, ce sont les variables intégrées (en opposition aux variables personnalisées que nous verrons juste après). Toutes les variables intégrées activées sont disponibles dans le menu "Variables", puis dans la section "Variables intégrées".

Vous pouvez voir la liste des variables disponibles (y compris celles qui ne sont pas encore activées) en cliquant sur le bouton bleu "Configurer".

Vous activerez les variables nécessaires au fur et à mesure que vous configurerez vos balises ou vos déclencheurs via les différents volets proposés à chaque étape. Techniquement, vous n'aurez presque jamais besoin de vous rendre dans cette partie de l'outil, ce sont les variables qui viendront à vous au moment souhaité.

Voici la liste des variables disponibles à ce jour et avec leur signification. Une rapide lecture vous permet de comprendre ce que vous pourrez faire, inutile de l'apprendre par cœur, juste de savoir ce qui est utile pour vous.

Les variables de pages

• Page URL : L'URL complète de votre page
• Page Hostname : Le nom de domaine du site
• Page Path : Le chemin de la page (à partir du premier /)
• Referrer : L'URL de la page précédente (permet de savoir d'où vient l'utilisateur)

Les variables utilitaires

• Event : Le nom de l'événement émis dans le dataLayer pour la clé event
• Environment Name : Le nom de l'environnement (production, préprod, staging, dev, etc.)
• Container ID : L'identifiant du conteneur GTM-XXXXXXX
• Container Version : La version du conteneur (selon ce que vous avez rédigé à la publication)
• Random Number : Génère un nombre aléatoire (plutôt pratique !)
• HTML ID : La valeur de l'attribut id de l'élément HTML ciblé par votre déclencheur

Les variables d'erreurs

• Error Message : Le contenu du message d'erreur JavaScript capturé
• Error URL : L'URL du script qui a généré l'erreur
• Error Line : Le numéro de ligne où l'erreur s'est produite dans le script
• Debug Mode : Retourne true si GTM est en mode Aperçu, false sinon

Les variables de clics

• Click Element : L'élément HTML cliqué (littéralement la balise HTML avec ses attributs)
• Click Classes : La valeur de l'attribut class de l'élément cliqué
• Click ID : La valeur de l'attribut id de l'élément cliqué
• Click Target : La valeur de l'attribut target de l'élément cliqué
• Click URL : La valeur de l'attribut href (ou src) de l'élément cliqué
• Click Text : Le texte compris entre l'ouverture et la fermeture de l'élément cliqué

Les variables de formulaires

• Form Element : L'élément HTML du formulaire (littéralement la balise <form> avec ses attributs)
• Form Classes : La valeur de l'attribut class du formulaire
• Form ID : La valeur de l'attribut id du formulaire
• Form Target : La valeur de l'attribut target du formulaire
• Form URL : La valeur de l'attribut action du formulaire
• Form Text : Le texte compris entre l'ouverture et la fermeture de la balise <form>

Les variables d'historique de navigation

• New History Fragment : Le nouveau hash de l'URL après le # (après changement)
• Old History Fragment : L'ancien hash de l'URL avant le # (avant changement)
• New History State : Le nouvel objet state passé à pushState() ou replaceState()
• Old History State : L'ancien objet state avant le changement d'historique
• History Source : La source du changement (pushState, replaceState, popstate ou hashchange)

Les variables de vidéo

• Video Provider : Le fournisseur de la vidéo (actuellement uniquement youtube)
• Video Status : L'état de la vidéo (start, play, pause, buffering, progress, complete)
• Video URL : L'URL de la vidéo YouTube
• Video Title : Le titre de la vidéo
• Video Duration : La durée totale de la vidéo en secondes
• Video Current Time : Le temps de lecture actuel de la vidéo en secondes
• Video Percent : Le pourcentage de progression de la vidéo (0, 10, 25, 50, 75, 90, 100)
• Video Visible : Retourne true si la vidéo est visible dans le viewport, false sinon

Les variables de défilement (scroll)

• Scroll Depth Threshold : La valeur du seuil de scroll atteint (ex: 25, 50, 75, 100)
• Scroll Depth Units : L'unité de mesure du scroll (percent ou pixels)
• Scroll Direction : La direction du scroll (vertical ou horizontal)

Les variables de visibilité d'un élément

• Percent Visible : La valeur en pourcentage de la partie visible de l'élément ciblé
• On-Screen Duration : La durée d'affichage d'un élément à l'écran en millisecondes

Les variables définies par l'utilisateur (personnalisées)

Maintenant que vous voyez quel est le périmètre couvert par les variables natives de Google Tag Manager, nous allons pouvoir nous pencher sur les variables personnalisées.

Cette fonction nous permet d'étendre considérablement les possibilités de GTM en ajoutant de la logique dans nos configurations.

Les variables constantes

Lorsque vous configurez une balise pour un service tiers, vous aurez très régulièrement besoin de rentrer des identifiants liés à votre compte. Ces identifiants peuvent être réutilisés à plusieurs moments.

Afin de rendre votre identifiant accessible facilement pour vos prochaines configurations, il est préférable de l'enregistrer dans une variable de type "Constante". La valeur d'une variable de type "Constante" a pour propriété de ne jamais changer, peu importe le contexte.

Les variables d'URL

Les variables d'URL vous permettent de récupérer n'importe quelle portion de l'URL comme le protocole (http ou https), le nom de domaine, le chemin de la page ou encore une partie de la requête.

J'utilise fréquemment ces variables pour récupérer des parties de requêtes d'une URL. Par exemple, dans une URL du type : https://example.com/produits?taille=xl&couleur=rouge

On peut simplement configurer une variable d'URL configurée sur "requête" et comme clé de requête couleur. Si l'URL contient couleur=rouge la variable contiendra la valeur rouge. Pratique, non ? Vous pouvez simplement récupérer les valeurs les plus utilisées dans un filtre à facettes de cette manière.

Les variables de cookie first party

Vous avez également la possibilité de lire facilement la valeur d'un cookie de navigateur. Vos cookies servent à stocker des informations sur le navigateur de vos utilisateurs, le Tag Manager peut y avoir accès pour lire leur contenu.

Cette variable est principalement utilisée par les solutions de gestion de consentement qui placent des cookies en fonction du choix des utilisateurs. Vous pourrez ensuite connaître leurs choix à partir de cette variable.

Les variables de couches de données (dataLayer)

Les variables de couches de données permettent à votre Tag Manager d'aller lire des données expressément exposées au préalable par un développeur ou un module de votre site web.

Nous aurons l'occasion de reparler de ces variables dans la suite de la formation. C'est le type de variable que j'utilise le plus ! Si vous êtes développeur, vous pouvez tout faire avec.

Ce sont ces variables qui sont utilisées pour le suivi e-commerce et bien d'autres fonctions de Google Analytics. La plupart des solutions de gestion de consentement utilisateurs utilisent aussi ce procédé pour vous partager les choix réalisés par les utilisateurs.

On reparlera en détail du dataLayer dans un épisode dédié dans la suite de cette formation. Vous ne pourrez pas passer à côté !

Les variables JavaScript

Les variables de type JavaScript vous permettent de lire des informations à partir de "globales". En JavaScript une variable dite "globale" est accessible partout dans votre application. Voici quelques variables globales que vous pouvez facilement manipuler :

• document : Accès à la liste des balises et du DOM
• navigator : Accès aux propriétés de votre navigateur
• window : Accès aux informations d'affichage de la page web

Si vous configurez la variable JavaScript avec, par exemple, la valeur window.innerHeight, elle vous retournera la hauteur d'affichage de l'écran de vos utilisateurs.

Les variables JavaScript personnalisé

Contrairement à la variable JavaScript vue précédemment, cette variable vous permet de travailler avec votre propre logique. Vous allez pouvoir rédiger une fonction JavaScript pour récupérer et modifier une valeur, puis la rendre accessible au travers de cette variable. Par exemple, le code suivant :

function(){
  // On récupère la date du jour dans un format complet
  var today = new Date();

  // On ne conserve que le mois
  return today.getMonth();
}

Vous permet de créer une variable qui contient le mois courant. C'est un exemple un peu basique, mais qui vous permet de comprendre que les possibilités sont infinies si vous maîtrisez le langage JavaScript.

J'utilise cette variable régulièrement pour gérer des cas spéciaux sur les sites de mes clients.

Les variables de tableau de conversion (Lookup Table)

Que ce soit la variable "Tableau de conversion" ou "Tableau d'expressions régulières", ces deux variables sont très utiles pour formater des données avant l'envoi.

Par exemple, vous avez une liste d'icônes de réseaux sociaux sur votre site web, pour chaque clic sur une icône, vous souhaitez remonter le nom du réseau social cliqué. L'une des méthodes consiste à convertir l'URL en un nom facile à lire.

Choisissez dans la liste la variable {{Click URL}}. Vous cliquerez ensuite sur le bouton "Ajouter une ligne". Saisissez ensuite dans le premier champ la valeur exposée sur votre site web (l'URL en question), et dans le second champ, la valeur à retourner.

Convention de nommage des variables personnalisées GTM

Maintenant que vous avez compris comment créer et utiliser des variables personnalisées, nous allons voir comment nous organiser pour conserver un conteneur simple grâce à une convention de nommage des variables.

Chaque variable doit avoir un nom court en anglais, avec des mots commençant toujours par des majuscules et séparés par des espaces (pas de camelCase ou snake_case ici).

Voici des exemples de noms de variables que j'utilise fréquemment :

• GA4 - Measurement ID : Une variable constante qui contient mon ID de flux GA4
• GAds - Conversion ID : Une variable constante qui contient mon ID de conversion Google Ads
• DLV - page_type : Une variable de dataLayer pour la valeur page_type
• URL Query - keyword : Une variable de type URL - Requête qui contient la valeur de &keyword=value
• Axeptio - Project ID : Une variable constante qui contient le numéro du projet Axeptio pour votre bandeau cookie

Vous remarquerez que si ma variable ne sert que pour une solution tierce, je la préfixe par le nom de cette solution.

0 commentaires

Soyez le premier à commenter cet épisode.