Qu'est-ce qu'un data Layer (Google Tag Manager)

1. Définition et rôle du data Layer

Le dataLayer est un "array" javascript, utilisé pour passer des informations d'une page web vers Google Tag Manager. Il s'agit en quelque sorte de champs "cachés" dans la page, qui ne sont pas destinés à être lus par l'internaute, mais uniquement par Google Tag Manager.

Schématiquement :

Au final, on peut voir le dataLayer comme étant une valise qui contient les données que vous souhaitez passer du site web vers Google Tag Manager.

Il permet de bien structurer en amont la donnée ce qui peut éviter des trous dans la raquette ou de créer une multitude de balises GTM en custom HTML pour identifier un clic ou un envoi de formulaire (oui c’est du vécu… 🥸)

2. Structure et fonctionnement du dataLayer

2.1 Construction du dataLayer

Comme expliqué en introduction, le dataLayer est un Array contenant des variables valorisées selon l’action effectuée sur le site. Il y a tout de même des éléments importants à avoir en tête concernant sa structure :

Case

Le plus important ici est que la casse du dataLayer soit homogène sur tout l’environnement web concerné. Il y a tout de même 2 nomenclatures principales que l’on retrouve :

L’utilisation du camelCase

L’utilisation du snake_case

Déclaration du dataLayer

Pour configurer le dataLayer, il doit être initialisé dans l’objet window afin qu’il soit accessible globalement, depuis n’importe quel script de la page, et surtout avant le chargement de Google Tag Manager. Cela passe par la méthode ci-dessous à déclencher au plus tôt (souvent en début de <head>):

javascript
<script>
	window.dataLayer = window.dataLayer || [];
	window.dataLayer.push({'event': 'event'});
</script>

On utilise la méthode dataLayer.push() dans tous les cas, y compris à l’initialisation, car c’est elle qui permet de pousser la donnée.

⚠️

Le dataLayer agit comme un conteneur global d’événements et de données pour GTM. Le réinitialiser à chaque fois effacerait tout ce qui a été précédemment enregistré, ce qui ferait perdre des informations et empêcherait certains déclenchements.

Il faut donc l’initialiser une seule fois, puis simplement y ajouter des événements.

Contenu du dataLayer.push() : events et déclaration des variables

La fonction dataLayer.push() est utilisée pour envoyer des données lors d’une action spécifique. La syntaxe de la fonction dataLayer.push() est la suivante:

javascript
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({'event': 'nom_de_levenement'});

Des variables peuvent également être ajoutées pour ajouter les informations associées à l'événement, par exemple :

javascript
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
  'event': 'purchase'
  'color': 'rouge',
  'conversionValue': 50,
});

3. Mettre en place un dataLayer efficace

Avant toute implémentation, il est essentiel de poser les bases d’un plan de marquage clair et structuré. Ce document définit les événements à suivre, les données à collecter, et la manière dont elles seront envoyées via le dataLayer.

Il est donc primordial qu’il soit synthétisé de manière suffisamment clair pour les développeurs afin qu’ils puissent envoyer les données attendues ! Pour cela il faut :

Identifier les actions clés (page vue, ajout au panier, clic sur un CTA, etc.) pour en faire des événements

Définir les variables associées (produit, valeur, type de page, statut utilisateur…) à chacun de ces événements.

Cette organisation garantit une lecture cohérente et exploitable des données par Google Tag Manager et ainsi pour les outils data en bout de process d’implémentation.

Chez unnest, forts de notre expérience sur des environnements variés (e-commerce, media, environnement web, product, app…), nous avons l’habitude d’accompagner nos clients dans la structuration la plus adaptée à leur écosystème et à leurs objectifs de suivi.

4. Recette du dataLayer

Lorsque les specs techniques et les besoins liés au dataLayer sont implémentés, une recette s’impose. Plusieurs coquilles peuvent toujours être présentes : oublie d’une variable, mauvais format, événement déclenché au mauvais moment, etc.

Il y a 2 méthodes rapides que nous recommandons pour effectuer la recette d’un dataLayer :

Utiliser la Preview GTM si vous y avez accès

Utiliser la console navigateur et/ou des extensions navigateur

4.1 Preview GTM

Le mode Preview de Google Tag Manager permet d’avoir une lisibilité rapide et claire des événements du dataLayer et surtout de directement voir la manière dont GTM les interprète.

C’est un moyen rapide de vérifier :

Que les événements dataLayer.push() sont bien reçus par GTM

Que les variables GTM récupèrent correctement les données

Qu’il n’y a pas de soucis de race-condition et que l’ordonnancement des événements est bien celui attendu (idéalement les événements de CMP rapidement et avant les événements custom)

Que les tags associés se déclenchent correctement

4.2 Console navigateur

Si vous n’avez pas accès à GTM ou si vous souhaitez valider la structure « brute » avant GTM, il est toujours possible de passer directement par la console du navigateur.

Dans un cas plus précis, celui du checkout Shopify, cela va être la mise en place à effectuer. Plus d’informations dans cet article : ‣

Pour cette méthode c’est très simple, on ouvre notre l’inspecteur du navigateur dans l’onglet “Console” et on y écrit dataLayer pour en retrouver l’Array

📢

Cet article vous a plus ? Nous vous invitons à le partager sur Linkedin ou vos réseaux sociaux !

Fabien Maury

Senior Consultant Tracking et Web Analytics chez unnest, Fabien est en charge de l’expertise autour de Piano Analytics et de la gestion des implémentations clients.

Après avoir passé 3 ans au support Piano Analytics où j’aidais les clients dans leur utilisation de l’outil et le respect des consignes de privacy, j'ai rejoins unnest pour relever de nouveaux défis en matière de tracking, en apportant mon expertise pour résoudre des problématiques complexes de collecte et d'analyse des données tout en respectant les meilleures pratiques de confidentialité.

Piano Analytics / GTM / Server-side / GA4 / G.Ads

✉️ Me contacter : fabien.maury@unnest.co

↗️ Me suivre sur LinkedIn

🎓 Références: Alterna Énergie, Pichet, O2, Mapa Assurances, Miko…

⚒️ Outils: Piano Analytics, GTM, GA4, Google Ads, Didomi, Axeptio, Amplitude…