Qweri

Le
Data
Layer

Temps de lecture estimé : 4’30 minutes

Bienvenue dans le monde merveilleux de l’omnicanalité ! Car oui, le DataLayer est bien souvent votre porte d’entrée vers un tracking 360° : un suivi “online” et “offline”. Vous vous posez des questions sur ce terme qui sonne barbare dans la bouche des experts en Web Analytics ? Qweri, votre agence Google Tag Manager préférée vous explique tout…

Qu’est-ce que le DataLayer ?

Le mot DataLayer nous vient tout droit de nos amis anglophones : en français on appellera ça plutôt couche de données.

Le DataLayer est un objet JavaScript (ça, c’est pour les techniciens), que l’on peut traduire dans un jargon plus accessible par “une espèce de couche de données virtuelle qui est ajoutée à votre site web pour permettre d’en extraire de la donnée à envoyer dans vos différents outils Analytics mais aussi de Marketing Digital”.

Pour faire simple, le DataLayer est donc une structure de données qui contient idéalement toutes les données que l’on souhaite traiter et transmettre d’un site site web à d’autres applications intégrant votre écosystème digital.

Il existe deux types de DataLayer :

  • Le DataLayer “statique” qui pousse des valeurs au chargement d’une page, qui peuvent être liées à la page en elle-même ou bien directement à l’utilisateur (exemples : type de page, ID de l’utilisateur, valeur du client…)

  • Le DataLayer “d’interaction” qui pousse des valeurs suite à une interaction de l’utilisateur (exemple : remplissage d’un formulaire, création d’un compte…). Le DataLayer e-commerce est aussi une forme de DataLayer « d’interaction » dans la mesure où il va intervenir lors de la réalisation des événements e-commerce comme l’ajout d’un produit au panier ou la vue d’un article.

Zoom sur le DataLayer “statique”

C’est donc celui qu’on glisse dans le DOM juste après la balise <body> et avant le code GTM (ben oui, sinon GTM ne peut pas embarquer la valeur du DataLayer !). 

Un DataLayer est toujours construit de la même façon, par paire : il contient un nom et une variable. 

Le DataLayer est en réalité un tableau JavaScript qui contient les données par paires clé-valeur. La clé est un nom de variable au format String et les valeurs peuvent être n’importe quel type JavaScript autorisé. On retrouve toujours un nom et sa variable : « env_country » est le nom, « FR » est sa variable par exemple.

Exemple de Data Layer « statique »:

DataLayer =

    ‘products’: [{

            ‘name’: ‘T-Shirt Qweri’,

            ‘size’: ‘S,

            ‘price’: 29.99

}]

Dans cet exemple, le dataLayer permet de récupérer, le nom du produit, sa taille et son prix.

Zoom sur le DataLayer “d’interaction”

benjamin le berre web analyste

Le DataLayer initié par un plan de taggage est un bon moyen de mesurer les différentes interactions des utilisateurs, et d’identifier ainsi les éventuels points bloquants sur un site internet, une application métier, ou encore une application mobile, afin d’en améliorer l’expérience utilisateur.

Contrairement au DataLayer statique, on “push” donc ce code au moment où l’utilisateur interagit avec l’élément tracké.

Exemple : à l’envoi d’un formulaire de contact, vous souhaitez identifier via le DataLayer quel est l’objet du formulaire de contact. Pratique quand on souhaite mesurer la qualité du trafic 😉

Et le DataLayer e-commerce, alors ?

Le dataLayer e-commerce se caractérise par le fait qu’il va venir préciser un événement e-commerce avec différents paramètres sous la forme de clé:valeur. De plus, presque tous les événements e-commerce définis dans le dataLayer doivent avoir une devise et une valeur. C’est cette dimension monétaire qui définit votre événement comme e-commerce.

En effet, certains paramètres d’événements sont obligatoires dans le dataLayer e-commerce. Ces paramètres varient en fonction des événements concernés mais pour le e-commerce de base vous devrez donc préciser la devise, la valeur et l’élément associé à l’événement sous la forme d’une liste appelée items.

Dans le cas du tracking d’un site e-commerce, un dataLayer adapté est vivement recommandé car cela permettra de correctement enrichir les rapports Monétisation de Google Analytics 4 (vue de produit, ajout au panier, achat de produit).

Exemple de Data Layer « d’interaction » e-commerce :

gtag(« event », « add_to_cart », {
  currency: « EUR »,
  value: 7,
  items: [
    {
      item_id: « T12345 »,
      item_name: « T-Shirt Qweri »

    }

  ]

}); 

Dans cet exemple, le dataLayer e-commerce permet de récupérer un événement d’ajout au panier, sa valeur et sa devise avec le nom et id d’article.

DataLayer : coeur du réacteur de votre vision client 360°

 

Le DataLayer a pour vocation de contenir des informations qui pourront être extraites et réinjectées au sein de tous vos outils de Marketing Digital.

Par exemple, pour exploiter sa puissance au sein de Google Analytics, les données sont collectées via Google Tag Manager sous forme de “variables de couche de données”. 

Si vous utilisez un outil de réengagement client du type LiveIntercept, vous pouvez contextualiser la réponse apportée par l’outil en fonction de la valeur des variables présentes dans le DataLayer (exemple : valeur du panier client supérieure à un montant clef = déclenchement d’une fenêtre de chat pour accompagner l’utilisateur lors de son parcours afin de le pousser à transformer).

Note : l’utilisation d’un DataLayer pour collecter les données dans Google Analytics est un déploiement plus long et plus important (puisque vous devrez faire intervenir les équipes de développement Front), mais il vous assure d’avoir des données fiables, même si le DOM est amené à être modifié avec le temps.

Le plugin dataslayer, votre espion et allié…

On vous recommande d’installer le plugin dataslayer pour Google Chrome, c’est un formidable outil qui vous permet d’analyser en un clin d’oeil votre DataLayer, et même celui de vos concurrents. Il est gratuit, on en profite !

Pour l’utiliser c’est très simple : une fois installé, vous ouvrez votre console de développement (Ctrl Maj i), et vous cliquez sur l’onglet dataslayer, puis observez…

Vous l’avez compris, le DataLayer est (ou sera après avoir lu cet article 😉 ) donc une pièce maîtresse dans votre stratégie Data Driven : il garantit un mode de collecte pérenne, ainsi qu’un potentiel de réconciliation de données important. A vos push !

Vous souhaitez discuter DataLayer avec nous ?

C'est par ici !

Et hop, tous les conseils de votre agence Google Google Tag Manager préférée, c’est par ici :

Les déclencheurs Google Tag Manager

Les balises Google Tag Manager

Les Variables Google Tag Manager

Les plugins pour installer Google Tag Manager