How to do AB testing in Webflow: A step by step guide

NOTE: With Google Optimize sunsetting, I will be updating this blog post soon. I am moving several of my clients onto Convert.com for AB testing.

[small updates made July 2023; note that Google Optimize is sunsetting September 2023]

A/B testing can be a game-changing, affordable, and effective strategy to drive more conversions from your website. More broadly known as conversion rate optimization (CRO), AB testing is most effective for websites with 5,000 visitors or more per month.

In this article, I'm going to show you the correct way — yes, it is painstaking — to do website testing on your Webflow website. Are there faster, easier ways to accomplish this? Yes. But for mid-sized companies who are serious about testing and measurement, I have found the following coding and setup approach to be the most viable long-term.

It would take thousands of words to explain why certain things in Google should be done in the following order or in such and such a way, so I'm going to focus purely on the nuts and bolts in this piece. If you have questions, contact me anytime! In a nutshell, you'll need to:

Set up or adjust Google Analytics (related blog: How to install the new GA4 in Webflow)
Set up Google Optimize
Set up or adjust Google Tag Manager
Update Webflow project settings
Start testing!

Assuming your Google Analytics is in place and tracking properly, let's proceed.

Set up Google Optimize for A/B website testing

Google Optimize is a free tool that allows you to set up multiple tests on your site. For the vast majority of mid-sized companies, Google Optimize is more than sufficient for their testing needs.

Log into your existing Google Analytics account. This will ensure that you tie your new Google Optimize account to your existing Google properties.
Go to optimize.google.com and click "Create account."
Add a container — I recommend naming this "www.[your-site].com"
Now you'll see the “Create your first experience” screen:

Instead of clicking "Let's Go," click on the "Settings" gear in the upper right.
First, note your new Google Optimize container ID (it starts with OPT-) — we'll need this later.
Now click "Link to Analytics" — because you can't run any experiences (aka experiments aka tests) without a Google Analytics account.
Finally, note in Settings > "Setup Instructions" and copy the code snippet under "Install the Optimize snippet." We'll need this later.

Set up or adjust Google Tag Manager

Why are we using Tag Manager? Because without it, we're quite limited on the user actions we can track in our website tests. Google Optimize has a default list of goals, or you can use Google Analytics goals, but I find them to be archaic — you can only define up to 20 GA goals, and they can never be deleted. With Tag Manager, we can create all kinds of tags and triggers to measure virtually any user behavior important to your business:

User clicks (on certain elements or buttons)
Element visibility (this is key if you have invisible elements that you want to measure — for example, a success message that pops up after a user fills out a form)
Page views (typically, a user fills out a form and arrives on a thank you page URL)
... and dozens more

Once you've logged into tagmanager.google.com, click "Tags" on the left, and then click "New" on the top right. We're going to create three tags:

1. Create a “Google Analytics: Universal Analytics" pageview tag if it doesn’t already exist. The tag should look similar to the below screenshot for now. “Google Analytics Settings” must tie to your GA account — choose the view that best filters out your unwanted traffic. Under ”Triggering,” it should say “all pages”.

2. Create a “Google Analytics: GA4 Configuration” pageview tag if you have Google Analytics 4 installed. Note this tag will not have a variable like your GA UA tag did, because GA4 is fundamentally different. Your GA4 measurement ID can be found under GA4 > “Data Streams." Set the trigger to “All pages”.

3. Create GA4 events that you can lateruse as Google Optimize test goals. This will need to be covered in a separate blog post.

Still more to do inside GTM:

To enable built-in click variables in GTM, click on “Variables” > “Configure” (top right button). Confirm that ALL “Clicks” and ALL “Forms” variables are checked. This ensures you're set up for long-term measurement success.
Submit & publish your GTM container.
Now click on the “Admin” tab > “Install Google Tag Manager” > grab the 2 code bits. We'll need these for Webflow.

Nothing goes live in Google Tag Manager until you click "Submit" and then "Publish."

Update Webflow project settings

As a Webflow admin, login and go to "Project Settings" in your live site.

Within the "Custom Code" tab

In the "Head Code" field, paste in the Optimize snippet. (Previously I housed this within GTM, but no more. It's best to load this code on its own.)
In the "Head Code" field, paste in the first half of your Google Tag Manager code.
In the "Footer Code" field, paste in the second half of your Google Tag Manager code.

Within the "Integrations" tab

This step is critical.

Remove any Google Universal Analytics Tracking IDs and Google Optimize container IDs in Webflow's "Integrations" tab IF you're using Google Tag Manager.

Most blogs and videos online will tell you to simply add your tracking and container IDs in this "Integrations" tab in Webflow. But if you do this AND you are using Google Tag Manager in Webflow's "Custom Code" tab (as we just did above), then you're duplicating your tracking efforts. This will lead to bad data in Google Analytics and/or in Google Optimize. For example:

Your GA tracking will be redundant, so you’ll have duplicate page views and your website's bounce rate will plummet to near zero.
Your Google Optimize container ID will appear twice in your website's code, which will cause active test pages to have a 2-second "white screen of death" delay, which confuses and frustrates users.

So...

‍

Set up your Google Optimize test — finally

Go back to your optimize.google.com account. Click "Create experience" and name your test.

For me, I almost always do redirect tests instead of simpler A/B tests for my clients. Why?

True A/B tests are effective for huge websites with 100,000+ in traffic. A small headline change or a swapping out an image could yield vastly different outcomes.
My clients are mid-sized companies. To make the biggest website testing impact, we send users to 2 different URLs and test them against each other. The two pages often have significantly different messaging, structure, and/or design.
Thanks to Webflow being a fantastic CMS and designer, building alternate pages to test is relatively easy.

Targeting and variants

Within Google Optimize, enter your Editor page (the original, existing URL) and your Variant page (the new URL that we suspect will perform better).

Page targeting

To ensure that the most amount of users are exposed to your test, make sure this area says "When URL matches any of" and enter these 4 combinations of your original URL:

https://www. format
https:// format
http://www. format‍
http:// format

Audience Targeting

This one you can ignore as long as you've tied your Google Optimize account to a Google Analytics view that filters out traffic you don't want to be exposed to your tests. For example, if you have a "Google Analytics internal IP addresses" view that filters out traffic from your main office, then your Google Optimize tests will follow that same audience profile.

Measurement and objectives

Each test you run will have 1-3 goals. Here, you can choose from any GA4 conversion events that you've created. Note that these events must be marked as a conversion in GA4. Contact me if you have questions about how to set up custom events through Google Tag Manager and GA4.

Finally, you can click on the clock in the gray bar up top to schedule the test. Or click ‘Start’ to activate the test immediately.

Happy testing!