How to do AB testing in Webflow: A step by step guide
August 23, 2021
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:
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, ignore the Settings > "Setup Instructions" and ignore "Install the Optimize snippet."
We are going to use Google Tag Manager code as an umbrella to "push" both Google Analytics and Google Optimize code onto your Webflow site.
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”. You will modify this tag later after you’ve set up a separate Google Optimize tag.
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 a Google Optimize tag. For a more complete set of directions on this, follow the 11 steps documented here by Google. The highlights:
Enter Optimize Container ID (starts with OPT-)
Under Google Analytics — for now, until GA4 is ready for primetime — tie this to your to GA Universal Analytics.
Under Advanced Settings (at the bottom of “Tag Configuration” window) > click Tag Firing Options, and change it to fire “Once per page.”
Set the tag firing priority for your Optimize tag to 999, or a similarly high number above 100. This ensures that this tag fires first when your page loads, per Google's recommendation.
Make sure this Google Optimize tag has no triggers.
Save the tag.
Speaking of saving the tag, this is the most important thing I can teach you about GTM:
Nothing goes live in Google Tag Manager until you click "Submit" and then "Publish."
So, go ahead and do that.
Now, still inside Google Tag Manager, go back to your Google Universal Analytics "page view" tag and:
Click anywhere in the top window (“Tag Configuration”) to edit.
Under “Advanced Settings” (bottom of the “Tag Configuration” window), ensure tag firing options are set to “Once per event” (default).
Under Tag Sequencing: Check “Fire a tag before Google Analytics pageview fires,” and in the “Setup Tag” dropdown, pick “Google Optimize”.
Save the tag. Submit. Publish.
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.
Adjust Webflow project settings
As a Webflow admin, login and go to "Project Settings" in your live site. Now go to the "Custom Code" tab. Paste in 2 code snippets you just grabbed from Google Tag Manager. The first code bit goes in the "Head code" input box, and the second bit goes in the "Footer code" input box.
This next step is critical. Go to Webflow > Project Settings > Integrations. Assuming we are using Google Tag Manager to push both GA and Google Optimize code, then...
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 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.
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).
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:
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
I would tie this to your current Google Analytics Universal Analytics for now. GA4 is still incredibly half-baked as of the latter half of 2021.
Under Objectives > Primary Objective, do not select “Choose from list” because that is simply your GA UA goals. As discussed previously, these are limiting and you can never delete them. Instead, click "Create Custom" and:
Use “Page Views” for form submissions that redirect to a thank you page URL.
Use “Events” as your objective when you need to track in-page actions, like button clicks, form submissions (can include element visibility), video plays, product demo request popups. This approach requires several highly detailed steps inside Google Tag Manager, so that is going to be the topic of another blog post.
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.