Webflow does not allow A/B Testing natively and specialized tools are expensive. Especially since Google announced the end of Optimize.
But don't panic I found a solution to A/B test your pages using UTM parameters.
Super useful for A/B testing the landing pages of your advertising campaigns!
Especially since by using different UTM values for your different A/B test variations, you can easily see which versions perform best.
Tutorial for doing A/B Tests in Webflow
1. Get and store your UTM parameter in a variable
The first step consists in retrieving the UTM parameter that interests us, in my example I will retrieve utm_campaign in order to do an A/B Test on my product page according to my Google Ads campaign
<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>
The purpose of this JavaScript code is to retrieve and store the value of the “utm_campaign” parameter from the current URL of the page.
Here is a detailed explanation:
Initializing a variable: The variable UTMCampaign is declared to have no initial value.
Verification in the SessionStorage: The script first checks if a value for “UTMCampaign” is not already stored in the SessionStorage.
a. If it is not not stored :
a.1. It attempts to retrieve the value of the parameter utm_campaign in the current URL thanks to new URL (window.location.href) .searchParams.get (“utm_campaign”).
a.2. Then, it stores that value (whether it's from the URL or whether it's the default) in the SessionStorage for the user's current session.
b. If she is already stored :
b.1. It simply retrieves the value of “UTMCampaign” Since the SessionStorage and stores it in the variable UTMCampaign.
Purpose of SessionStorage: The SessionStorage is a way to store data locally in a browser for the duration of a page session. This means that if the user closes the tab or browser and reopens it, the data stored in the SessionStorage will be lost. It is different from LocalStorage, which persists even after the browser is closed.
Tips: check that your script is running well by doing a test in your console
2. Implement the elements you want to A/B test on your page
In my case I want to A/B test the right block and see if the conversion is better when I use a form directly on my page compared to a more traditional funnel.
Give distinct classes to the items you want to A/B test.
In my case I use:
“sticky-header-article-wrapper” For my version A
“sticky-header-article-wrapper-lp” For my B version
3. Add this script to the <body>of your 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>
Be sure to modify the condition so that it is adapted to your needs, in my case I use “idf_nacelle” but remember to enter the name of your own parameter
This JavaScript code is designed to manage the display of certain elements on a web page based on certain conditions. Here is a detailed explanation of how it works:
“DOMContentLoaded” event listener: The script starts by adding an event listener for the event “DOMContentLoaded”. This means that the code inside the function will be executed once the content of the document (HTML) has been fully loaded.
Conditions: The script checks whether the variable UTMCampaign is equal to “idf_nacelle”.
Change of style according to conditions:
a. If the variable UTMCampaign is equal to “idf_nacelle”, the script:
a.1. Display the element with the CSS class .sticky-header-article-wrapper-lp (by changing its ownership Display unto “block”). b.1. Hide the element with the CSS class .sticky-header-article-wrapper (by changing its ownership Display unto “none”).
b. Si at least one of the conditions is not filled in:
b.1. Hide the element with the CSS class .sticky-header-article-wrapper-lp. b.2. Display the element with the CSS class .sticky-header-article-wrapper.
Of course, you are free to add as many elements as you want to show/hide in your different 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)
