Start A/B testing your website with Google Optimize in just 5 minutes
Last week Google announced Google Optimize is available for free worldwide. Google Optimize is a free version of the enterprise-class A/B testing and personalization product, Google Optimize 360. In short: it lets you visually make changes to a website and A/B test it with the original.
You can set it up in 5 minutes and it’s free, as in beer. Here I’ll show you how to set up an experiment by setting up one for our website https://we.are.builders. We’re going to serve two different newsletter signup forms to our visitors.
A few notes on our setup
We have Google Tag Manager installed on our website. Google Analytics is loaded by Tag Manager. Why? Just because, and some other reasons.
Setting up an A/B test in 5 minutes
Ok, sit tight, this is going to be intense!
Minute 1: Sign up for Optimize
Go to https://www.google.com/analytics/optimize and hit the Sign up for free button. Make sure to log in with your Google account that has access to Tag Manager and Analytics.
Skip the opening screen with the stuff you already know, hit Get started.
Another screen with stuff you don’t need, answer No thanks (or Yes, please if you need more random announcements in your mailbox) and hit Next.
Omg, another screen with BS. Uncheck everything except the acknowledgement of the TOS and hit Done.
Yay, finally! You see a brand new, empty container Google has created for you. Ready to go.
Minute 2: create an experiment
So like Google already advises us to do in the right column we’re going to create a new experiment.
Hit the Create Experiment button.
Give your experiment a name (I entered Newsletter Form Experiment).
The next field is an important one. You need to type in the url of the page to A/B test. It’s called the editor page. In this example I used https://we.are.builders because the newsletter form is located over there.
Keep the default selected experiment type: A/B test. I’ll leave it to you to learn more about Multivariate and Redirect tests later. No time, we only have 5 minutes!
Hit the Create button.
Baammm! We have created our first draft experiment.
Minute 3: Create a variant
So A/B testing is about comparing a baseline, the Original as Google calls it, to a variant of the baseline. In the next minute we’ll define a new variant.
Hit the + New Variant button.
Enter a name for the variant, I used: More Descriptive Newsletter Form Variant.
Hit the Add button and watch the second variant appear in your experiment.
Hit the new row and save your unsaved changes as asked.
If you haven’t done already, install the Google Optimize extension for Chrome.
After installation succeeds you’re automatically redirected t0 the editor page you entered during minute 2. You see an editor that follows your mouse. I’m scrolling down to the newsletter signup form and select the element I’d like to change.
The editor allows you to change all kinds of stuff, like text color, borders, backgrounds etc. I only want to change the text to make it more appealing to all of our readers. I click the Edit Element button and then pick Edit text.
Now we’re still in the 3rd minute and I was in a hurry so the best I came up with was Get the best shit we wrote and read about startup growth, metrics, analytics and tech delivered monthly, directly in your mailbox. No spam guaranteed! That should do it, hit Done in the lower right corner.
I could have made more changes now, like making the text bold, a larger font-size and give it a fancy background color so it stands out more but I guess you get the point. Hit Save followed by Done in the upper right corner. You get redirected back to the container view.
Minute 4: Select an objective
Oh man, the 4th minute already! And Google still rants about unfinished steps :) It says we haven’t entered a primary objective yet.
In order to setup objectives, we first need to link Optimize to a container. Click the Go to container page link on the right. You’re sent to the experiment overview page.
Hit the Link Property button on the right. Then Select the right property where you want to track the experiment. Also click the views in which you want the Experiment to show up. I check all views just to be sure. Click the Link button to finish.
No, we’re not finished yet! Optimize now asks to add the Optimize snippet to your website. This snippet makes the changes to you editor page, i.e. the changes you just made with the visual editor. Hit the Get Snippet button. Now you get the following instructions:
Add the line to your tracking code. If you use Google Tag Manager: there’s a custom Google Optimize tag to add it. Hit Next if you’re done.
Because Optimize uses javascript to change the baseline page to the variant it might flicker a bit. You could add some css and javascript to minimize the effects. Click Done if you’re ready.
Minute 5: Add the Optimize snippet to your website
Last minute! Let’s go!
Now you’re back at the experiment overview. Click the experiment you just created.
At the objectives in the bottom left corner, click Link To A Google Analaytics View.
Select a view in the last select box, the other fields should be pre-filled if you followed my description. Hit Done.
Now you can select an objective. I choose Bounces. This doesn’t say anything about how many people sign up for the newsletter unfortunately, I hope this will be added by Google in the future.
Now, hit the Save button in the upper right corner.
Final step: hit Start Experiment. And hit the Start button in the modal that follows.
If you have some time left, also check out the Targeting tab which lets you configure the triggers to show A or B.
Feeww, stop the time! Probably not within 5 minutes, but quite fast :)
Bonus minute: test it yourself
Now please go to https://we.are.builders and scroll down to the newsletter signup form. You should either see A or B and Google remembers which one you saw first, because you’ll always be shown that variant.
To test this, open up you developer toolbar (CMD + I on Chrome OSX) and go to Application > Cookies > https://we.are.builders.
Remove the _ga and _gaexp cookies. The _ga cookie gives your browser a unique identifier and the _gaexp links your _ga id to a variant.
After you’ve removed the cookies, reload the page. You might have to remove and reload a few times before you see the other variant.
Reporting
You can track the variant performance in the Google Optimize from the Reporting tab. Unfortunately it takes about a day before statistics show up, just like you’re used to in Google Analytics.
You can also click on the View report in Google Analytics link on the right to open Analytics. From here you can use segments and other stuff to further zoom in on user behaviour.
Great, so now you’re able to start A/B testing without spending a dollar and track your experiments in Analytics!
Let me know if you have some questions about it and of course, sign up for our newsletter or follow We Are Builders on Medium if you want to keep up to date with stuff we write!
Like to receive more content like this? Make sure to sign up for the We Are Builders newsletter!
