In our previous Google Optimize: A Beginner’s Guide post, we looked at the 3 different types of tests available on Google’s split testing CRO software, how to decide what to test and which to choose. In this post, we’ll be going through setting up your first A/B test, how to use the visual editor and analysing the results.
Step 0: Hypothesis
As we mentioned in our last post, make sure you know what page is underperforming and have an idea as to how you could improve it, and what specifically about it you’re improving it for.
An example of this could be:
“My contact page has a low bounce rate. I think that by changing the background colour of the form, it will stand out more and more people will be tempted to get in touch.”
So, our goal here is to increase enquiry conversions by redesigning the contact form. Let’s take a look at how that would look step-by-step:
Step 1: Creating The Test
As discussed in the previous post in this series, choosing which test depends on how easy it is to change elements and text on your website. For this example, we’ll be using Google Optimize’s A/B test option. To create an A/B test, you don’t need access to your website’s backend (assuming Google Optimize is already installed).
To get started, first (making sure you are using the Google Chrome browser), install the Google Optimize browser extension. This will allow you to use the visual page editor when setting up A/B tests. Once this is installed, navigate to your Google Optimize property, click the blue ‘CREATE EXPERIMENT’ button, name your experiment and click the ‘CREATE’ button (A/B test should already be selected, so there’s no need to change the experiment type).
Step 2: Setting The Test Up
Before we dive into changing our page, we first need to fill out a bit of info about our hypothesis, define our audience and set our objective(s).
On the ‘OBJECTIVES’ tab, we need to first write our experiment hypothesis in the ‘Description and hypothesis’ text box (as shown in the screenshot below). Next, we need to select the goals we are hoping to improve by running this experiment. In the example below, we want to increase enquiries by experimenting with the background colour of the form on the contact us page. Click the ‘ADD EXPERIMENT OBJECTIVE’ link and choose the ‘Choose from list’ option, this will bring up your goals from your Google Analytics view as well as site interaction metrics like Bounce Rate and Page Views. In this example, I have selected the ‘Contact Page Enquiry’ goal as my main objective. Feel free to set up to 3 objectives for your experiment.
Next, we need to define our targeting. Navigate to the ‘TARGETING’ tab – In this example, we will be targeting everyone who visits the website, splitting the audience equally across each of our page variations. Here, you can create rules about who to target, an example of this might be targeting users who first visited a given landing page, then navigated to the contact us page; or users who visited from a specific Facebook page.
Step 3: Creating Page Variations
Now we need to think about how many different variations we’d like to run. Think of each variation as a different colour for this example. I’m going to run 1 different variation that will be tested against the original page.
To create a new page variation, click the blue ‘CREATE VARIANT’ link under ‘Variants’ and give it a name. For this example, I’ll call the first one ‘Orange’. Once this has been done, click the ‘ADD’ button. Now, we need to go into the visual editor to change the background of the contact form to orange. To do this, click the red ‘0 changes’ on the row of your new variant
This will take you to your webpage with red and white bars at the top. This means your visual editor is working (if you can’t see this, please install the Google Optimize extension in the Google Chrome browser as per step 1). What we can do from here is find the element you’d like to change by hovering over it so that the blue outline is around it (see example below for selecting the contact form element):
From here, what I will do is scroll down in the hovering box on the right to where it reads ‘BACKGROUND’ and paste my chosen colour in the ‘rgba(0, 0, 0, 0)’ field:
Looks ugly, doesn’ it? You’ll probably want to make more artistic choices when setting up your variant pages, but for the sake of this example, we’ll keep it how it is (just imagine it looks better than it does!).
If this is the only thing I want to change on this page, I would then click the white ‘SAVE’ button in the top left-hand corner, then ‘FINISHED’ to return to the Optimize interface. You’ll notice on the targeting page that the ‘Weighting of visitors to target’ percentage has changed to 50%/50%.
This means that half of all traffic to that page will see the original while the other half will see the new variant. Feel free to change this percentage if required. If not, then set up your other variants as per the instructions above. Don’t be afraid to test different things and see what you can do with the visual editor – the sky is the limit. Just be sure to make decisions based on your initial hypothesis that you think will help improve the results based on the objective you set out to work on, and you’ll have solid numbers behind your ideas to verify if they are worth pursuing. To run this experiment, click ‘START EXPERIMENT’ in the grey bar labelled ‘Draft’.
To see the results from your A/B test, go to Behavior > Experiments in Google Analytics. This view has lots of useful information, including site usage and goal completion comparisons between the original page and the variants you created.
Multivariate and Redirect Tests
Now that you’ve created your first A/B test, in the next post in this series we’ll be looking at the 2 other test types: Multivariate and Redirect. Stay tuned for more!