Do A/B tests in Webflow using UTM parameters

Tools:

Introduction

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, the Webflow agency Gemeos has 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

A/B Test 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:

  1. Initializing a variable: The variable UTMCampaign is declared to have no initial value.
  2. 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.
  3. 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.

Version A
Version B

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:

  1. “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.
  2. Conditions:
    The script checks whether the variable UTMCampaign is equal to “idf_nacelle”.
  3. 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.

Then all you have to do is duplicate the line:

  • document.querySelector (“.sticky-header-article-wrapper-lp”) .style.display = “block”;

And to put the class of your new element in place of “.sticky-header-article-wrapper-lp”

Publish and test the result

Author photo
Sandro D.
Updated on
6/7/2024
Growth Marketer, Webflow expert and a jack of all trades. I take care of commercial operations, ensure the smooth running of projects and take care of issues related to marketing (SEO, Tracking, Copywriting, etc.)
Are you stuck with your current site?
Let's talk ?
Welcome
>
Gemeos Academy
>
Do A/B tests in Webflow using UTM parameters
These tutorials might interest you

Our tutorials in the same category

See all our tutorials
Illustration traits
We use the best tools

Your site is developed using the best tools and best practices

Gemeos doesn't just offer you a website, but expertise in the best tools to guarantee you the best possible return on your investment.

Figma

To design your custom website and optimize its conversion rate

Webflow

For pixel-perfect, optimized integration of your website

Client-first

Organizing your project to perfection

Wized

To add advanced features to your project

Make

Automate your workflows and save maximum time