Setting up A/B Testing on your Webflow Website

A/B testing is an analytics tool to help you see how two (or more) different designs perform against each other. It enables you to select a page on your website, make changes to that page, and see how the change performs against the original to see if you want to properly implement it.

With A/B testing, every change or potential improvement can be put to the test.

In this way, you're not just guessing that a change in copy will convert more customers, you can test it, and prove it.

You can read more about why A/B testing is so powerful and when you should use it here.

Ready to add A/B testing to your website? Let’s walk through the process for setting it up.

How to set up your first test

There are a couple of different tools that you can use for A/B testing, but I would recommend Google Optimise if you are using other tools from the Google suite such as their analytics.

Set up an account if you haven't done so already, and through the process it will give you a code snippet.

‍

With this code snippet, you can add it to the head section in your Webflow project settings, or add it to Google Tag Manager if you have it set up.

After installation, it will take you through to the Optimise homepage.

‍

We're going to create our first test through what Google likes to call an "experience". Click on the Let's Go button.

Give your test a name, and add in the url of the page you want to change for the A/B test. I've just used my homepage, so feel free to start with your homepage if you don't know where to start.

There are a couple of options for the different types of tests we can run, and I'll explore the other options in other posts. For now, just select A/B test and click create.

With our page selected, we are going to add the variant where we will change elements of that page. Click on "Add variant", and give your variant a name.

With your variant made, you can now edit that page to make all the changes you want to test out through Google Optimizes website editor.

Note: the Optimize editor only works through Google Chrome. If you're using Safari (like I do), you'll have to move over to Google Chrome for this next step.

Through the editor, you can start clicking on and changing elements on the page. The opimizer editor is extremely flexible, so almost any change you might want to make is doable.

Some of the common things that are often changed include:

• The text in a title, paragraph, or button
• The colour of an element
• The font or font size
• The hero image
• The visibility of a section
• Adding in code or new sections

You can always go through all the changes you've implemented, and edit or remove any. You do this by clicking on the text in top right that says how many changes you've made.

Once you're happy with all the changes you've made, save it and go back to the details by clicking on the arrow in the top left. Once you're back at the details, you'll notice your variant now says how many changes you've made to the alternative page design.

With our pages ready to go, the last thing we need to do is measure the pages against a goal. Not surprisingly, having the 2 page designs without measuring it against a goal won't do anything for you.

We're going to add a primary objective (a goal) through the "add experiment objective" button.

Now you can choose a goal that you want to measure your A/B test against. You can either pick a goal that you've set up through Google Analytics, or pick a system goal such as how long the session duration is and how many pages a visitor views.

If you haven't set up a goal in Google Analytics yet, you'll have to do that first.

Once you've picked your goal (in my case, I picked signing up for a call, triggered by visiting a certain page), you're ready to test it.

Now you can move back to the top of the page, hit start, and you're up and running!

The A/B test is now working to show half of the visitors to your website the alternative page design, and will be collecting the numbers on which design is more successful.

The longer you leave it to collect data, the more accurate it will be. Aim to not worry about it for a month or two, and then check back in on it to see if there's an obvious winner, or if it needs more time.

You might also conclude that both designs have an almost identical success rate. In this case, the designs are too similar, and the changes made are not different enough. In this case, feel free to edit the design with further emphasis on the change you were making to the page, and re-run the test.

Summary

Because your website is one of the core parts of your sales cycle and how you convert new customers, it's important that you take the time to reflect on how it performs, and improve it.

Despite the many other analytical tools that you could use, A/B testing is able to give you the concrete evidence that you're always moving forward towards a more effective website; so you don't have to fret that you're making changes that make your website worse without realising it.

Though A/B testing only works successfully at scale, It's still one of the most effective ways to implement new major changes to your website and know that you're always having a positive impact.