Datalayer : Tout savoir pour mieux l’utiliser !

Qu’est-ce qu’un DataLayer ?

Dans le monde complexe de Google Tag Manager, il est souvent question de « DataLayer » (ou de « couche de données » en français). D’un point de vue technique, le DataLayer est un objet JavaScript qui contient des variables qui peuvent être transmises vers Google Tag Manager, puis vers d’autres outils tel que Google Analytics.

Schématiquement, c’est une sorte de couche « virtuelle » d’un site Internet qui contient différents types de données dans le but de les communiquer à Google Tag Manager.

Source : Tealium.com

La couche de données (ou DataLayer) peut être très simple en étant composée d’une seule variable, ou complexe, en étant composée de plusieurs variables imbriquées. Tout dépend de quelles données nous avons besoin.

Rappel des définitions de base … avant de commencer !

• Balise : Une balise est un extrait de code placé dans le code HTML d’une page permettant d’envoyer des informations et données provenant de votre site à un système tiers. Google Analytics et le suivi des conversions AdWords sont des exemples de balises. Les balises sont souvent appelées « Tag »
• Déclencheur : Un déclencheur est une condition qui active ou non la balise. En général, les déclencheurs renvoient une valeur « vrai » ou « faux » au moment de l’exécution d’un événement.
• Variable : Une variable est une association entre un nom et une valeur.
• Evènement : Un événement est une action / une interaction réalisée sur une page ou lors de son chargement : page vue, clic, téléchargement, lecture d’une vidéo, …

Comment fonctionne le DataLayer ?

Comme expliqué précédemment, le DataLayer est une couche virtuelle qui va venir se positionner entre le site Internet (ou l’application mobile) et l’outil de traitement des datas (Google Analytics par exemple). L’objectif du DataLayer est de récupérer des données sur le site Internet et de les transmettre à Google Tag Manager qui se chargera de les transmettre à son tour à un outil tiers (outil d’analyse, outil de monitoring…)

Source : Analyticsmania.com

Pourquoi mettre en place un DataLayer ?

L’utilisation d’un gestionnaire de balises tel que Google Tag Manager permet de simplifier l’ajout de balise au sein d’un site internet ou d’une application mobile mais également d’ajouter et mettre à jour certaines variables à ces balises.

Pour pouvoir exploiter la totalité du potentiel de certains outils tels que Google Analytics, il peut être nécessaire de collecter des données complémentaires qui ne le sont pas nativement par les outils d’analyse d’audience. C’est à ce moment qu’intervient la couche de données.

Le DataLayer en mode Analogique !

Bien que certains experts considèrent finalement le DataLayer comme relativement simple, pour la grande majorité des « non-experts », la conceptualisation du DataLayer pourrait être complexe…

Voici donc une analogie permettant de mieux comprendre le DataLayer.

Imaginons que notre site web est un restaurant :

• Les balises sont le repas
• Les données sont la nourriture
• Le DataLayer est une table de buffet
• Et Google Analytics est le serveur

Deux solutions s’offrent au client : se faire servir ou aller chercher la nourriture directement sur le buffet.

• Si le client est pressé ou qu’il souhaite varier la nourriture dans son repas, il sera plus intéressant pour lui d’aller directement au buffet et de choisir ce qu’il souhaite manger… DataLayer !
• Si le client n’est pas pressé et que le menu par défaut lui convient, il pourra donc attendre de se faire servir … Google Analytics !

Les différents types de DataLayer

La couche de données est dynamique et le nombre de variables qu’elle contient change en fonction de la page que vous consultez.

Par exemple, la page de confirmation d’un site E-Commerce qui s’affiche uniquement si un utilisateur a passé une commande aura accès aux données relatives à la transaction, telles que l’ID de transaction, les produits, l’adresse de livraison, … A contrario, sur une page « produit », il serait probablement plus utile de renseigner le DataLayer avec des informations sur le produit : Prix, disponibilité, …

Il existe plusieurs types de DataLayer répartis dans deux « familles » :

Les DataLayer « d’impression » qui contiennent des variables et des valeurs accessibles immédiatement lors du chargement de la page :

• Le DataLayer Ecommerce Enhanced : Données relatives au E-Commerce
• Le DataLayer Header (DLH) : Données relatives à l’environnement (Pays, Région,), l’utilisateur (Données démographiques) ou le contenu (titres, descriptions, types de pages…)
• Les DataLayer « d’action » qui contiennent des variables relatives à des interactions d’utilisateurs sur la page : inscription à une newsletter, ajout d’un produit dans le panier, …

Comment sont transmises les données entre le Data Layer et Google Tag Manager ?

Il existe deux méthodes permettant de transmettre les données entre le Data Layer et Google Tag Manager

• Méthode 1 : en ajoutant un Data Layer au-dessus de la balise GTM et en utilisant les données collectées lors du chargement de la page. Cette méthode est très souvent utilisée lors de l’utilisation de DataLayer d’impressions et particulièrement les DataLayer E-Commerce.
• Méthode 2 : en poussant des données à l’aide de l’appel de l’API datalayer.push (à partir de Google Tag Manager). Cette méthode est conseillée pour des DataLayer d’actions dans le but de collecter les informations en temps réel.

La première méthode peut être particulièrement utile s’il est nécessaire de collecter et de remonter des données personnalisées lors du chargement d’une page telles que des données de transactions : ID de transaction, montant de la transaction, nombre de produits inclus dans la transaction, références des produits, … Ces données seront collectées et remontées vers Google Tag Manager puis vers Google Analytics.

La deuxième méthode permet de pousser des données (Push) lorsqu’un évènement est effectué sur le site Internet ou l’application mobile : inscription à une newsletter, ajout d’un produit dans le panier, … dans ce cas, il n’est pas nécessaire de positionner le Data Layer au-dessus de la balise GTM.

Comment mettre en place un Data Layer ?

Dans un premier temps, il est indispensable de mettre en place la balise GTM sur l’ensemble des pages d’un site internet !

Exemple d’une balise GTM :

• Extrait de code entre les balises <head>

<!– Google Tag Manager –>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({‘gtm.start’:
new Date().getTime(),event:’gtm.js’});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!=’dataLayer’?’&l=’+l:”;j.async=true;j.src=
‘https://www.googletagmanager.com/gtm.js?id=’+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,’script’,’dataLayer’,’GTM-MXCHSNC’);</script>
<!– End Google Tag Manager –>

• Extrait de code entre les balises <body>

<!– Google Tag Manager (noscript) –>

<noscript><iframe src=https://www.googletagmanager.com/ns.html?id=GTM-MXCHSNC
height=”0″ width=”0″ style=”display:none;visibility:hidden”></iframe></noscript>

<!– End Google Tag Manager (noscript) –>

Comme on peut le constater dans le code ci-dessus, un DataLayer a déjà été automatiquement créé afin de pouvoir y pousser des variables de couche de données à partir de Google Tag Manager.

Il est également possible de l’implémenter directement dans le code source des pages Web concernées. (Réservé aux développeurs !) Ce DataLayer sera composé de variables de couche de données paramétrées dans Google Tag Manager.

ATTENTION : dans certains cas (voir ci-dessous), il est nécessaire de positionner le DataLayer AVANT la balise GTM afin de collecter les données avant de les transmettre à Google Tag Manager (dans le sens inverse, les données ne remonteront pas correctement

Comment créer une variable de couche de données dans Google Tag Manager ?

Pour créer une variable de couche de données, il faut se rendre sur Google Tag Manager :

• Onglet du menu « Variables »
• Variables définies par l’utilisateur : NOUVELLE
• Ajouter un nom de variable
• Puis sélectionner dans les types de variables : Variable de couche de données

Les variables seront toujours affichées sous la forme :

‘VarName1’ : ‘VarValue1’ et séparées par des virgules : ‘VarName 1’ : ‘VarValue1’, ‘VarName2’ : ‘VarValue 2’

Par exemple :

Dans le code source :

<script>
var datalayer =[]
datalayer.push({
‘nomproduit’ : ‘iphone 8 noir 64gb’
})
</script>

Comment créer une dimension personnalisée dans Google Analytics ?

L’exemple précédent de variable personnalisée « Nom du produit », qui a été créée dans Google Tag Manager n’est pas reconnue pour le moment par Google Analytics. Il est nécessaire de créer une dimension personnalisée directement dans Google Analytics pour pouvoir déclarer cette nouvelle variable.

Dans Google Analytics :

Administration > Puis dans Propriété > Définitions personnalisées > Dimensions personnalisées -> Nouvelle dimension personnalisée

Il faut ensuite compléter le nom, choisir Produit comme portée et cliquer sur Créer.

Lorsque la dimension personnalisée est créée, un extrait de code court s’affiche :

Si l’on regarde de plus près la deuxième ligne du code, il y a « dimension1 ». Le numéro 1 est l’index de la dimension personnalisée « Nom du produit ». A retenir !

Comment transmettre les données d’une variable personnalisée de Google Tag Manager vers Google Analytics ?

La variable de la couche de donnée a été créée dans Google Tag Manager puis déclarée dans Google Analytics. Il est maintenant indispensable de lier les deux afin de permettre le transfert des données du DataLayer vers Google Tag Manager puis vers Google Analytics.

Dans Google Tag Manager : – Balise > Sélectionnez la balise Google Analytics > Configuration > Plus de paramètres > Dimensions personnalisées -> Ajouter une dimension personnalisée

• Il faut entrer le numéro de l’index de la dimension personnalisée (Obtenu lors de la déclaration de la dimension personnalisée dans Google Analytics)
• Puis la variable Data Layer sous le format dans le champ Valeur de la dimension
• Il ne reste plus qu’à sélectionner un déclencheur puis valider.

Comment utiliser une variable de couche de données personnalisée comme déclencheur ?

Il est possible d’utiliser le Data Layer pour mettre en place des règles de déclenchement d’une balise plus avancée que celles par défaut (Page vue par exemple)

Pour cela, il faut se rendre dans le compte Google Tag Manager :

– Déclencheurs > Nouveau > Configuration du déclencheur > Type de déclencheur = Page vue

• Il faut compléter les informations du déclencheur en prenant en compte la variable personnalisée (ici « Nom du produit »), puis spécifier une règle de déclenchement (ici « si nom du produit contient iPhone 8 »)
• Enregistrer

Ce déclencheur pourra ensuite être utilisé dans les balises. Très utile par exemple dans le cas des balises de remarketing !

Le Data Layer offre donc des possibilités étendues qui nécessitent des connaissances techniques relativement élevées. Bien construite et intégrée au cœur de la stratégie complète de traitement des datas, la couche de données permet d’exploiter tout le potentiel de Google Tag Manager et de Google Analytics afin de mesurer et de gérer ses actions marketing.

N’hésitez pas à faire appel à SLAP digital afin de vous accompagner de la définition du plan de taggage jusqu’à la mise en place de DataLayer !