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:
Assuming your Google Analytics is in place and tracking properly, let's proceed.
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.
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.
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:
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:
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:
Still more to do inside GTM:
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:
And I ask you again...
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?
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.
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:
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.