After months of anticipation, Google has finally graced the analytics world by releasing a free version of Google Optimize, their new A/B testing platform. Google Optimize is just starting to rollout to early users who signed up for early access. If you have not signed up yet, it is not too late! For those of you who have experience with other popular A/B platforms (Optimizely, Unbounce, etc.), think of this as another tool in your optimization tool chest. If you’re new to the A/B testing game, don’t panic! This is a great platform for getting started on the path to optimizing your site’s user experience.
Also…did I mention it’s free?
One clear strength with Optimize is the ability to link directly to your Google Analytics (GA) Property. This makes it much easier to access data on your testing experiments than other optimization platforms. Optimize is also natively built into Google Tag Manager (GTM), making it easy to add the platform to your pages.
Today we’ll go through the process of adding Optimize and starting a test on our homepage. Feel free to follow along as you build out your first Optimize experiments on your site!
Create your account & container
First, we need to set up an account and subsequent container. Sign in to Optimize and you’ll be prompted to create your account. Following the account creation, add a container (preferably with the domain of your site):
First step – done. Not too bad, right?
Link Optimize to GA
Once the container is created we’ll link Optimize to our GA Property. Click Link Property and select your property from the list:
Add Optimize to your site
Now we need to add the Optimize snippet to our site, and this can be done in several ways. First, let’s take a look at the two code formats; standard code vs page hiding code.
With standard code, your Optimize tests will work properly, but the site visitor may see what’s called a “page flicker.” It’s essentially a brief flash on the screen where they first see the original page and then quickly see the experiment version of the same page. It’s not a huge problem per se, but Optimize does have a way around this issue.
By adding a separate page hiding code snippet you can prevent these flickers from occurring on your pages. This is the preferred way to deploy your Optimize code. To stop the flickers the page hiding code needs to go at the top of every page where you plan to add Optimize. The code should be placed after the opening declarations and absolutely before your GA/Optimize/GTM code (example below alongside GTM):
For the example in this post, let’s assume we want to add Optimize with the page hiding snippet. If you have GTM, use the following instructions for adding your Optimize code. If you don’t have GTM, head over to this section for hard code instructions.
Adding Optimize via GTM
The first step is to build the tag in GTM. Go to your GTM container and add a new tag:
When choosing the tag type, select Google Optimize:
Give the tag an obvious title (I went with Optimize – Container Tag). Add your GA Property ID and Optimize Container ID to the tag, and set the trigger for All Pages (or at least any pages you know you’d like to test):
Once you publish the GTM container you can use Optimize, but remember that we want to add the page hiding snippet. Unfortunately, this has to be done outside of GTM, as the code needs to go above your GTM container. Add the following snippet at the top of all your pages where Optimize/GTM will fire. Make sure to replace the GTM-XXXXX with your GTM container ID, NOT the Optimize container ID.
Adding Optimize via hard code
All you need to do is add one line of code to the standard GA code. Here’s the one line:
And here’s how it will look inside your GA code:
Replace the XXXXX with your Optimize container ID #. This can be confusing since the code says “GTM”, but make sure you use the Optimize ID #, NOT your GTM container ID.
Now you’ve added Optimize to your site!
Create an experiment
Put on your lab coat – it’s time to build some experiments! Click on Create Experiment to begin:
Give your test a name and define which page you’d like to test. The next step is to select the type of experiment you’d like to run. There are three types of experiments in Optimize:
- A/B Test: Test one variable change on two or more variants of a page.
- Multivariate Test: Test multiple variable changes on two or more variants of page(s).
- Redirect: Test variable changes on pages with different URLs.
For this example we’ll stick with the A/B Test option. Select that type and click Create:
Add a hypothesis and objective
Now that we’re in the Experiment details it’s time to set the experiment hypothesis and objective(s). For this test let’s propose the following hypothesis:
If we enlarge the header links on the homepage, we will receive more traffic to our blog.
Add your own hypothesis into the Optimize and pick the metric you will use to measure the experiment’s objective. Note that you can only use these metrics for your objective:
- Goal Completions
- Session Duration
For this example we’ll use a goal that triggers each time a blog page is viewed.
Create experiment variants
For our experiment, we need to add a variant to compare to the original page. Click + New Variant at the top of the details page:
Once you’ve named the Variant, click on it to go to the Optimize editor. This is where you can manipulate all sorts of elements on your page. We’ll cover these options in a later post, but for this test let’s increase the size of our header links:
We’ve selected the link group and increased the font size by 5pts. Once we’re satisfied with the variant click Save to update the variant.
For A/B Tests make sure to only change one element on the page per test. If you change multiple elements you can’t declare with certainty what was successful (or unsuccessful) in your experiment.
To send your experiment to specific users you can use the Targeting options in Optimize:
In the Targeting you can edit how much overall traffic sees the experiment, how much traffic each variant receives, and pick specific audiences to receive the experiment. We’re going to target only Desktop users for this test. To do this click on the AND link at the bottom of the page:
We select the Technology rule and set up our rule like this:
Test & Start the Experiment
After double-checking to make sure the variants and targeting are set up correctly, you can begin your experiment. When you’re ready, click Start Experiment:
We recommend checking in on the test details daily for the first few days to make sure everything is running properly. Make sure to see the variants of the test live on your site to make sure they look the way you want.
To check on the progress of your experiment go to the Reporting tab in Optimize. This report will tell you how each variant is performing and when you’ve reached a proper confidence level to end your experiment. We’ll cover this aspect of your tests in a later blog post.
Now that you’ve started an experiment, here are some best practice to keep in mind while using Optimize:
- Don’t run multiple tests at the same time on a page. You can surely run multiple tests on your site, but set up the targeting so they don’t cross over each other.
- Give your test plenty of time to bring in data. The amount of time is different for everyone, as it depends on how much traffic your test receives. But a general rule of thumb for a good medium is 30 days.
- Always have another pair of eyes go to your test variants to make sure the page looks intact. If you’re not careful, editing page elements can shift other aspects of a page improperly. This is especially good to keep in mind when testing across desktop and mobile.
- Get creative! This is your chance to try something you’ve always been curious about for your site. Whether or not your variant wins the experiment, it’s a great way to constantly try new things for your user experience.