Faire des A/B Test dans Webflow grâce aux paramètres UTM
outils :
Introduction
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
<script>
// Récupération de la valeur des paramètres "utm_campaign" dans l'URL et la stock dans la session
var utmCampaign;
if (!sessionStorage.getItem("utmCampaign")) {
utmCampaign = new URL(window.location.href).searchParams.get("utm_campaign");
sessionStorage.setItem("utmCampaign", utmCampaign);
} else {
utmSource = sessionStorage.getItem("utmCampaign");
}
</script>
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
<script>
document.addEventListener("DOMContentLoaded", function() {
// Si le paramètre utmCampaign est "idf_nacelle"
if (utmCampaign === "idf_nacelle") {
document.querySelector(".sticky-header-article-wrapper-lp").style.display = "block";
document.querySelector(".sticky-header-article-wrapper").style.display = "none";
} else {
document.querySelector(".sticky-header-article-wrapper-lp").style.display = "none";
document.querySelector(".sticky-header-article-wrapper").style.display = "block";
}
});
</script>
Veillez à bien modifier la condition pour qu'elle soit adapté à votre besoin, dans mon cas j'utilise "idf_nacelle" mais pensez à bien mettre le nom de votre paramètre à vous
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.
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)
développés avec les meilleurs outils et les meilleures pratiques
Gemeos ne vous propose pas simplement un site web, mais une expertise sur les meilleurs outils pour vous garantir un retour sur investissement optimal.
