Setup dataLayer dans son projet Webflow

outils :

Qu’est ce qu’un dataLayer

L'agence Webflow Gemeos vous partage ici toutes ses connaissances en terme de tracking, notamment avec un cas concret !

Un dataLayer est un élément JavaScript stockant diverses informations, transmissibles à des outils comme Google Tag Manager.

Il peut inclure tout type de données, voici quelques exemples avec leurs cas d'usages

‍

1. Données d'identification de l'utilisateur

Exemple: ID utilisateur, type d'adhésion (par ex. "membre premium").

Cas d'usage: Personnalisation du contenu, segmentation des audiences pour le remarketing.

‍

2. Données e-commerce

Exemple: ID produit, nom du produit, catégorie, prix, quantité, valeur totale du panier.

Cas d'usage: Suivi des conversions, analyse de la performance des produits, optimisation des campagnes publicitaires.

‍

3. Interactions et événements:

Exemple: Clics sur des boutons spécifiques, complétion d'un formulaire, temps passé sur une vidéo.

Cas d'usage: Analyse du comportement des utilisateurs, optimisation de l'expérience utilisateur.

‍

4. Informations sur la session:

Exemple: Source du trafic (organic, paid, referral), type d'appareil (mobile, desktop), résolution d'écran.

Cas d'usage: Analyse des sources de trafic, optimisation du design en fonction des appareils.

Bien que ces informations varient, elles suivent une structure distincte.

Dans le dataLayer, chaque information est représentée par un duo :
un nom associé à sa valeur.

‍

Exemple :

"Site_currency" pourrait avoir pour valeur "EUR"

"Product_brand" pourrait être associé à "Nike”

C'est clair, n'est-ce pas?

‍

Exemple chez Tracktor

Nous avons plusieurs utilisations du dataLayer chez Tracktor

‍

Remonter les conversions et leur valeur associée

On mesure une conversion (génération de devis), lorsque la personne arrive sur la page avec :

pageType = Quotations
pageSubtype = Show

‍

En faisant ça, nous pouvons facilement setup les objectif de conversion dans GTM par exemple (cf screen)

‍

Remonter des infos sur le devis

Exemples :

1 - Le produit - Super utile par exemple pour faire des analyses à l’echelle du produit dans GA, Looker, etc.

2 - Le montant du devis HT - Op une variable à utiliser en valeur dans vos conversions pour vos Ads et piloter au ROAS 😎

‍

Remonter des infos sur le user

Le meilleure moyen d’adapter l’expérience du client en fonction de sa typologie

‍

Comment setup tout ça dans Webflow ?

1. Comprendre le besoin

Avant de mettre en œuvre un dataLayer, déterminez les données que vous souhaitez suivre.

‍

2. Ajouter le code dataLayer à votre site

Placez le code suivant au-dessus de votre code Google Tag Manager (GTM) dans le <head> de chaque page de votre site:

 <script>
window.dataLayer = window.dataLayer || [];
</script>

‍

‍

3. Push des données dans le dataLayer

Lorsqu'un événement spécifique se produit sur votre site, vous pouvez "pusher" (ajouter) des informations dans le dataLayer.

Prenons pour exemple l’action de conversion (génération de devis) présentée présedemment égal à :

pageType = Quotations
pageSubtype = Show

Le code à ajouter sera le suivant :

 <script>
window.dataLayer.push({
	'pageType': 'Quotations',
  'pageSubtype': 'Show
'});
</script>

‍

Vous pouvez ajouter autant de ligne que vous voulez sous pageSubtype si vous souhaitez remonter d’autres données.

‍

4. Publier votre projet et tester le résultat

Utilisez l’extension dataLayer checker pour tester votre intégration (l’outil que j’utilise dans mes screen plus haut)

‍

Tips : Ajouter des variables dans votre intégration lorsque c’est nécessaire

Exemple : Remonter les infos produit

J’utilise les variables présentent dans mon CMS pour remonter les infos en fonctions de la page produit (cf screen)

‍

5. Configurer Google Tag Manager

Une fois que vous avez commencé à pusher des données dans le dataLayer, vous pouvez les utiliser dans GTM.

Connectez-vous à votre compte GTM.
Cliquez sur "Nouvelle balise".
Choisissez le type de balise que vous souhaitez configurer (par exemple, Google Analytics).
Pour accéder aux données du dataLayer, vous pouvez créer des variables dans GTM.
Par exemple, pour accéder au pageTyp que vous avez pushé précédemment, créez une nouvelle variable dataLayer avec le nom de la variable pageType.

Configurez vos déclencheurs pour déterminer quand la balise doit être exécutée en utilisant l'événement que vous avez défini lors du push 😎
Et boom c’est terminé 🔥

‍

Conclusion

Vous l’aurez compris, le dataLayer est un outil puissant qui permet d'intégrer et de gérer efficacement des données dynamiques sur votre site web, en particulier en liaison avec Google Tag Manager.

Sa mise en œuvre permet une plus grande flexibilité et adaptabilité dans le suivi des interactions et des informations des utilisateurs sans avoir à modifier constamment le code source du site.

Pour exploiter pleinement ses avantages, il est essentiel de bien planifier sa mise en place, d'ajouter les données pertinentes et de tester régulièrement sa configuration pour s'assurer de la précision du suivi.

En somme, le dataLayer est une étape cruciale pour une analyse et une optimisation avancées de l'expérience utilisateur sur votre site web.

Sandro D.

Mis à jour le

8/10/2024

Growth Marketer, expert Webflow et touche à tout. Je m'occupe des opérations commerciale, veille au bon déroulement des projets et m’occupe des problématiques liées au marketing (SEO, Tracking, Copywriting, etc)