Faire des A/B Test dans Webflow grâce aux paramètres UTM
Introduction
| Version | Classe CSS | UTM Campaign | Affichage |
|---|---|---|---|
| Version A | sticky-header-article-wrapper | Autre valeur | Affichée par défaut |
| Version B | sticky-header-article-wrapper-lp | idf_nacelle (exemple) | Affichée si UTM correspond |
Webflow ne permet pas de faire des A/B Test nativement et les outils spécialisés coûtent cher. D'autant plus que Google ont annoncé l'arrêt de Optimize.
Mais pas de panique, l'agence Webflow Gemeos a trouvé une solution pour A/B tester vos pages grâce aux paramètres UTM.
Super utile pour A/B tester les pages de redirection de vos campagnes publicitaires !
D'autant plus qu'en utilisant différentes valeurs UTM pour vos différentes variations d'A/B tests, vous pouvez voir quelles versions performent le mieux facilement.
Tutoriel pour faire des A/B Tests dans Webflow
1. Récupérez et stockez votre paramètre UTM dans une variable
La 1ère étape consiste à récupérer le paramètre UTM qui nous intéresse, dans mon exemple je vais récupérer utm_campaign afin de faire un A/B Test sur ma page produit en fonction de ma campagne Google Ads
Ce code JavaScript a pour objectif de récupérer et stocker la valeur du paramètre "utm_campaign" depuis l'URL actuelle de la page.
Voici une explication détaillée :
- Initialisation d'une variable: La variable utmCampaign est déclarée sans valeur initiale.
- Vérification dans le sessionStorage: Le script vérifie d'abord si une valeur pour "utmCampaign" n'est pas déjà stockée dans le sessionStorage.
a. Si elle n'est pas stockée :
a.1. Il tente de récupérer la valeur du paramètre utm_campaign dans l'URL actuelle grâce à new URL(window.location.href).searchParams.get("utm_campaign").
a.2. Ensuite, il stocke cette valeur (qu'elle provienne de l'URL ou qu'il s'agisse de la valeur par défaut) dans le sessionStorage pour la session actuelle de l'utilisateur.
b. Si elle est déjà stockée :
b.1. Il récupère simplement la valeur de "utmCampaign" depuis le sessionStorage et la stocke dans la variable utmCampaign.
- Utilité du sessionStorage: Le sessionStorage est un moyen de stocker des données localement dans un navigateur pour la durée d'une session de page.
Cela signifie que si l'utilisateur ferme l'onglet ou le navigateur et le rouvre, les données stockées dans le sessionStorage seront perdues. C'est différent du localStorage, qui persiste même après la fermeture du navigateur.
Tips : vérifiez que votre script s'exécute bien en faisant un test dans votre console
2. Implémentez les éléments que vous voulez A/B tester dans votre page
Dans mon cas je veux A/B tester le block de droite et voir si la conversion est meilleure lorsque j'utilise un formulaire directement sur ma page vs un funnel plus classique.
Donnez bien des classes distinctes aux éléments que vous voulez A/B tester.
Dans mon cas j'utilise :
- "sticky-header-article-wrapper" pour ma version A
- "sticky-header-article-wrapper-lp" pour ma version B
3. Aoutez ce script dans le <body> de votre page
Ce code JavaScript est conçu pour gérer l'affichage de certains éléments sur une page Web en fonction de certaines conditions. Voici une explication détaillée de son fonctionnement :
- Écouteur d'événement "DOMContentLoaded": Le script commence par ajouter un écouteur d'événement pour l'événement "DOMContentLoaded".
Cela signifie que le code à l'intérieur de la fonction sera exécuté une fois que le contenu du document (HTML) aura été complètement chargé. - Conditions:
Le script vérifie si la variable utmCampaign est égale à "idf_nacelle". - Changement de style en fonction des conditions:
a. Si la variable utmCampaign est égale à "idf_nacelle", le script :
a.1. Affiche l'élément avec la classe CSS .sticky-header-article-wrapper-lp (en changeant sa propriété display à "block").
b.1. Cache l'élément avec la classe CSS .sticky-header-article-wrapper (en changeant sa propriété display à "none").
b. Si au moins l'une des conditions n'est pas remplie :
b.1. Cache l'élément avec la classe CSS .sticky-header-article-wrapper-lp.
b.2. Affiche l'élément avec la classe CSS .sticky-header-article-wrapper.
Bien sûr, libre à vous d'ajouter autant d'éléments que vous souhaitez afficher/cacher dans vos différentes versions.
Il vous suffit alors de dupliquer la ligne :
- document.querySelector(".sticky-header-article-wrapper-lp").style.display = "block";
Et de mettre la classe de votre nouvel élément à la place de ".sticky-header-article-wrapper-lp"
Publiez et testez le résultat
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.
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.
