#6 Tracking personnalisé dans Webflow & Bilan d’octobre pour Gemeos
Setup d’un dataLayeur dans Webflow pour tracker un maximum de choses, les 100k€ explosé pour Gemeos. Installe toi pour la GemeNews de cette semaine !
Hello
Aujourd’hui, au menu 🥦
Webflow : Sujet un peu technique aujourd’hui mais super utile, le setup d’un dataLayeur dans Webflow pour tracker un maximum de choses.
Gemeos : On fait le bilan du mois d’octobre
N'oublie pas de nous donner ton feedback à la fin de cette lecture. Cela nous aide à améliorer le format.
Co-fondateurs @Gemeos
dataLayer, ou comment faciliter la communication entre votre site web et GTM
Qu’est ce qu’un dataLayer
"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:
window.dataLayer = window.dataLayer || [];
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 :
window.dataLayer.push({
'pageType': 'Quotations',
'pageSubtype': 'Show'
});
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.
Bilan d’octobre pour Gemeos
On a revu le format pour que ce soit plus pertinent et on découpe maintenant nos résultats en 3 points
Montant Signé (€)
Montant Facturé (€)
Montant Encaissé (€)
Cela permet d’éviter de juger la réussite d’un mois sur la réception de paiements provenant de mois précédents mais de regarder le new biz
Le montant signé est donc maintenant le KPI principal que nous regardons month to month
Montant Signé 20 570€
Montant Facturé 14 856€
Montant Encaissé 15 450€
Un mois d’octobre un peu spécial pour Gemeos car on a dépassé les 100k de CA encaissé, notre objectif annuel !
Nous amenant à un total de 105 650€!
J’avoue les 6 chiffres font plaisir !
Toujours à 2 ✌🏼
Toujours sans prospection 📞
Infos qui font plaizzz :
On a un pipe conséquent avec plus de 70 000€ de chiffré, la fin d’année risque d’être plus qu’interessante
On a signé notre 1ere startup Américaine (Gemeos au 🇺🇸)
Sandro - Je quitte le salariat fin novembre ! De quoi me dégager beaucoup de temps pour me consacrer à 100% à Gemeos
Merci de faire partie de cette belle aventure avec nous ! ❤️
Qu'avez-vous pensé de cette édition ?
J’ai adoré 😍 | C’était bien 😎 | Peut mieux faire 😐 | Nulle 🙁
Si vous avez aimé cette édition, pensez à la partager à un(e) ami(e) et à ajouter un like en haut du mail
Ça nous donne de la force et nous booste pour les éditions à venir.
D’ailleurs, la semaine prochaine, Sacha vous partagera la puissance de la méthode Qonto pour cartographier l’UX de votre produit et gagner en efficience !
Qu'est ce que Gemeos ?
Gemeos est une agence Webflow composé de 2 personnes :
Sacha | 🧢 Product Designer & Expert Webflow.
Sandro | 🧢 Growth Manager & Expert Webflow
On accompagne les startups et les PME dans la création et l'optimisation de leur site web pour en faire un véritable actif !
Nos offres :
Site Web - Création d’un site web sur-mesure de zero
Migration - Migration de votre site web ou intégration de vos maquettes dans Webflow
À la demande - Un abonnement mensuel fixe qui vous permet d’étendre vos équipes de design et développement sans le processus de recrutement et d’aller chercher l'extra-mile.
Répondez à cet email si vous souhaitez en savoir plus.
- Sandro & Sacha