Setup dataLayer dans son projet Webflow
Qu’est ce qu’un dataLayer
| Type de données | Exemple | Cas d'usage GTM |
|---|---|---|
| Identification utilisateur | userId, memberType | Segmentation, remarketing |
| E-commerce | productId, price, category | Suivi conversions, ROAS |
| Événements | buttonClick, formSubmit | Analyse comportementale |
| Session | source, device | Analyse sources de trafic |
L'agence Webflow Gemeos vous partage ici toutes ses connaissances en terme de tracking, notamment avec un cas concret !
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:
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 :
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.
bon à savoir
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
.avif)
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
