How to run A/B tests on a Webflow site
A/B testing is a powerful way to improve your site. I’m going to show you how to set them up and run them on your Webflow site using Google Optimize.
This is one of my longer tutorials, so please if you get stuck just write a comment below. I promise to help anyone who comments!
Finally, if you think want more tutorials like this, please subscribe below!
Step 1: Create a Google Optimize Account
Head over to Google Optimize and create an account. Moving on …
Step 2: Create an Experiment
Give your experiment a name. We are going to run an experiment on your homepage, so just paste your website address. Finally select the option A/B test.
Step 3: Create a Variant & Install Chrome Extension
Create a variant and give it a name describing the change you will make. My example site is about becoming a Vegan, and I’m going to change the headline on my homepage, so I’ve called my variant “vegan in a month”.
You’ll see 50% — you can leave it like that, it means 50% of visitors will see the variant you create.
Click edit and follow the prompt to install the Google Optimize chrome extension, then click edit again.
Step 4: Make your Variant’s Change
When you have the extension installed and click edit, it will open up your site in a sort of edit mode. This is where you will make the changes that 50% of your users will see instead of the original page.
We want to change the headline (“H1”) element, so click on it, then click the open editor palette icon in the top-right.
If you don’t have an H1 or don’t want to change it, pick another prominent piece of text on your homepage and follow the same step.
Click edit element then edit text.
You’ll be able to type your new text in, click done, then click save.
And that’s all it takes to create your variant! You can change more, but it’s best practice to change one thing at a time — otherwise you won’t know which change made the difference.
Step 5: Connect to Google Analytics
Back in the experience setup page, click to connect your Google Analytics property.
You must use the old universal analytics, not GA4 which is annoyingly not supported by Google Optimize.
Step 6: Set Objectives
In my case I want to optimize for users clicking the green download call-to-action button on my homepage, so I choose custom objective, and put in the name of the action “download-clicked” in my corresponding event in Google Analytics.
For a simpler set up, you could just choose the option to optimize for pageviews — so the winner will be the variant that encourages users to explore more pages on your site. Another common objective would be to optimize for pageviews on another page further down your funnel e.g. your signup page.
Step 7: Install the Optimize Snippet
Click the back button in the top left to exit your experiment for a moment — it will already be saved. From there, go to the settings in the top right, and you’ll see your container details, including an ID.
Make a copy of the code snippet below and paste in your id.
<script src="https://www.googleoptimize.com/optimize.js?id=OPT-A1ABCDE"></script>Now head over to your Webflow dashboard. Go to your site’s project settings, then the custom code tab. Paste the code snippet in the “Head Code” text box and hit save. Remember to publish your site afterwards.
Step 8: Check Installation
Back in your experiment, scroll to the bottom and click “check installation” to make sure everything is set up correctly.
Step 9: Start the Experiment
Click the start button — your experiment is live! 🎉
Then head over to the reporting tab — this is where your results will come in, and once Google decides there is enough data you’ll be able to see which variant is the winner.
That’s it for a brief introduction to getting your first A/B test set up!
Step 10: Bonus Material
If you’d like 5 tailored suggestions for what to A/B test on your site, or help setting up a more advanced experiment, get in touch! Be sure to mention a bit about your business goals and how much traffic you have on your site each day.
