Setting up Google Optimize

You may have heard of Google Optimize or seen those two red boxes floating around in your Google Analytics account. It’s effectively a tool for A/B testing, and multi-variant testing, similar to other tools like Optimizely but free (if you’re on a standard analytics account). Google’s solution is now available to everybody, and it’s ready for you to try it out.

So, how do you set it up properly? How do you start testing your website? What can you expect to see?

The advantage of it being made by Google

Really, the deep integration with Google Analytics is what sets this apart, being able to tie your experiments with your KPI’s in Google Analytics is one thing. Being able to personalise what you show your users based on your pre-defined Analytics audiences (GA 360), or user behaviour is what kills it. Quick example: I could give users who’ve come from Facebook a different experience to others.

No single website is a perfect fit for all your users.

We often deliver one website experience to all users, which ultimately, doesn’t meet the needs of anyone.CLICK TO TWEET

Really, the deep integration with Google Analytics is what sets this apart, being able to tie your experiments with your KPI’s in Google Analytics is one thing. Being able to personalise what you show your users based on your pre-defined Analytics audiences (GA 360), or user behaviour is what kills it. Quick example: I could give users who’ve come from Facebook a different experience to others.

Setting up Google Optimize / Optimise

Head on over to https://www.google.com/analytics/optimize/ and get yourself signed up for free.

1. Create an Account and Container

Google may ask you to choose an account name, this could be your domain, company name, your family pets name… If you’re already signed into your Google account, it may not.

As always, it’s your shout if you want to share data with Google. We recommend it, as it allows Google to improve their products (apparently).

Next, you’ll want to name your container. This could be “Watb Creative Website” for example, or whatever you wish… Click the drop-down on the right, and select ‘EDIT CONTAINER DETAILS‘ to change the name.

Once you’ve made the change you should end up in experiments view, and you’ll notice an onboarding checklist over on the right-hand side. Follow these steps to get yourself set up right!

2. Link to Google Analytics

You’ll notice I’ve jumped a step, after using the platform it makes more sense to me to sort this part out now before you start running experiments. It’s crucial you link your GA account so that you can view in-depth reports on your experiments. Now’s the time to expand option 3 ‘Link to Google Analytics’

Click the blue “Link Property” button and you’ll be prompted to select a Google Analytics property.

Make sure to select your property, and then the correct view, then just click ‘link’. All done.

3. Installing Optimize Plugin

You need to install the Google Optimize snippet on your site so that you can track your experiments, and also be able to change the content on your site (more on that later). This is step four on your onboarding checklist! Once you’ve clicked view plugin, you’ll be shown a popup like so…

The above shows you how to set this up by editing your Google Analytics tracking code on your website, and it’s fairly straightforward. However, I’m going to show you how to set this up via Google Tag Manager, which a lot of people use nowadays, and I feel is a better way to do it.

At this point, I will safely assume if you’re using Google Tag Manager, then you have a ‘Universal Analytics‘ tag setup already (if not, then you may be using both a GTM snippet and a Google Analytics snippet on your website. Therefore it’s best to edit your GA snippet like above instead.) If you have your Universal Analytics tag already in-place, let’s crack on.

Create a new tag, and name it something obvious; ‘Optimize‘ springs to mind. Then, choose your tag type, scroll down the list on the right-hand side and you’ll see ‘Google Optimize‘ already in the featured list.

Now you’ll need to fill out some information, follow the steps below to get the relevant ID’s:

1. Your Google Analytics Tracking ID, which you can grab from your Google Analytics Account by going to Admin > Property > Property Settings > Tracking ID.
2. Your Optimize Container ID, which you can get by popping back to Google Optimize, and expand option 1 ‘Manage accounts and users‘. You’ll see your Container ID there, which should look something like GTM-XXXXXXX.

Now save your tag without adding a trigger. This is an important step as we’re going to want to firethe tag before your Google Analytics Pageview tag fires, and we’ll do this by making a small edit to your Universal Analytics tag.

Go back to all your tags, and open up your Universal Analytics tag, then expand ‘Advanced Settings‘. At the bottom, there’s an option called ‘Tag Sequencing‘, expand that one too and check the box marked ‘Fire a tag before Universal Analytics fires‘, and then select ‘Optimize (Or whatever you named it)’ in the ‘Setup Tag‘ field.

Save all your settings. Now it’s time to test the tag fires! Using the preview mode in Google Tag Manager, head on over to your website and check it’s firing in the right order. You’ll see below, I’m now firing both the Optimize, and Analytics tag in the right order.

3.1 Add Page Hiding Snippet (Optional)

This is an optional step, but highly recommended!

Google has created a page-hiding snippet to prevent the flicker effect, something that can happen when loading in dynamic content on your website. Just insert the snippet below as high as possible in your <head>, preferably just afterwards. Note: Replace GTM-XXXXXX with your Optimize container ID!

<!-- HTML generated using hilite.me --><div style="background: #f8f8f8; overflow:auto;width:auto;padding:.8em .6em;"><pre style="margin: 0; line-height: 125%"><span style="color: #408080; font-style: italic">&lt;!-- Page hiding snippet (recommended) --&gt;</span>
<span style="color: #008000; font-weight: bold">&lt;style&gt;</span><span style="color: #0000FF; font-weight: bold">.async-hide</span> { <span style="color: #008000; font-weight: bold">opacity</span><span style="color: #666666">:</span> <span style="color: #666666">0</span> <span style="color: #BC7A00">!important</span>} <span style="color: #008000; font-weight: bold">&lt;/style&gt;</span>
<span style="color: #008000; font-weight: bold">&lt;script&gt;</span>
(<span style="color: #008000; font-weight: bold">function</span>(a,s,y,n,c,h,i,d,e){s.className<span style="color: #666666">+=</span><span style="color: #BA2121">&#39; &#39;</span><span style="color: #666666">+</span>y;
h.end<span style="color: #666666">=</span>i<span style="color: #666666">=</span><span style="color: #008000; font-weight: bold">function</span>(){s.className<span style="color: #666666">=</span>s.className.replace(<span style="color: #008000">RegExp</span>(<span style="color: #BA2121">&#39; ?&#39;</span><span style="color: #666666">+</span>y),<span style="color: #BA2121">&#39;&#39;</span>)};
(a[n]<span style="color: #666666">=</span>a[n]<span style="color: #666666">||</span>[]).hide<span style="color: #666666">=</span>h;setTimeout(<span style="color: #008000; font-weight: bold">function</span>(){i();h.end<span style="color: #666666">=</span><span style="color: #008000; font-weight: bold">null</span>},c);
})(<span style="color: #008000">window</span>,<span style="color: #008000">document</span>.documentElement,<span style="color: #BA2121">&#39;async-hide&#39;</span>,<span style="color: #BA2121">&#39;dataLayer&#39;</span>,<span style="color: #666666">4000</span>,{<span style="color: #BA2121">&#39;GTM-XXXXXX&#39;</span><span style="color: #666666">:</span><span style="color: #008000; font-weight: bold">true</span>});
<span style="color: #008000; font-weight: bold">&lt;/script&gt;</span>
</pre></div>

4. Getting Started with Experiments in Google Optimize

We’ve created a Google Optimize account, container and linked it to Google Analytics via Google Tag Manager, and now we’re ready to start our first experiment in Optimize! Optimize offers three types of experiments:

1. A/B test
2. Multivariate test
3. Redirect test

I am only going to run through the A/B test at this point, or this article is going to end up as a small book. But fear not! Once you have this part nailed, you’ll be fine without me.

A/B Test

Also known as split testing, A/B testing is done to compare two versions of a page to see which one performs better. If you can send 50% of your traffic to your current site, and then send the other 50% of your traffic to a slightly amended version of your original design, you’ll be able to test how users interact. If your new version provides a better experience compared to your old version, you know to make that design change.

Tip: We’ve written an article on 20 things you can split test on your website today, so if you’re unsure what to test, follow this guide!

4.1 Starting An Experiment

Go ahead and create an experiment, and name it accordingly. As mentioned I’ll be using the A/B test for this guide.

Then pop in the URL you’ll want to test/edit your A/B test.

Once you’ve done that, you’ll end up with the below, and you’ll be able to create a variant of the page you want to test.

Click on ‘Create Variant‘, and name your new variation.

Note: Before you go ahead and start to make some changes, you’ll need to setup the WYSIWYG Visual Editor provided by Google in the form of a Chrome Extension. You can jump straight to installing that here: install the Google Optimize extension for Chrome… It’s a fairly straightforward editor and feels familiar. If you’re unsure about anything, Google has a guide you can use to help you out.

Now, once you go back an click on your variant (you may be asked to save progress), you’ll then be redirected to your website with the Visual editor looking like the below.

As you can see, it’s fairly straightforward to click on elements on the page, and then edit them. You can change colours, text and more. Very cool indeed. Once you’re happy, save your changes and then we’ll look at Objectives, and Targeting.

Within the main dashboard, go ahead and add an objective, you will be able to choose from basic objectives like page views, session duration and bounces. But where Google Optimize shines, is that it allows you to choose from anyof the Google Analytics goals you’ve set up in your linked account. See below!

Choose the relevant objective, and pop in a description. It’s a good idea to write what you think will be the impact of your changes.

Next, targeting allows you to choose what percentage of users you want to show your variation too, or in fact, perhaps you only want to show your variation to a select group of users, such as users in the United Kingdom only. You can do the latter part by creating a rule, and following the steps provided by Google. Here’s a list of what can be done:

• URL Targeting – Specific URLs.
• Behavior Targeting – New vs. returning, specific referral sources.
• Geo-Targeting – Specific country, state, city, etc.
• Technology Targeting – A specific device, browser, OS.
• JavaScript Variable – Specific variable in the source code of the page.
• First-Party Cookie – Users that have a cookie from your site.
• Custom JavaScript – Based upon a value returned.
• Query Parameter – Specific pages or sets of pages.
• Data Layer Variable – Key values stored in the data layer.

Once you’re happy, you can choose to start your experiment, or you can preview your changes by clicking on the monitor icon and choosing the device you want to test on. It’s good practice to double check your changes work correctly on all devices, once the experiment is live, you can’t edit it on the free version of Optimize, so best to get it locked in now.

Conclusion

You’re now ready to rock, and you can monitor the results via Optimise or Analytics, helping you make informed decisions about what to change to improve your user experience.

Google Optimize is going up against industry leaders like Optimizely (who are great btw!), but the deep integration of Analytics is impossible to ignore. Given that it’s free too, I think this is a great tool to get started with website optimization.

It would be great to get your feedback on the tool, we’re running it here at Watb, and so far it’s been very good. We’d love to hear what you think though? Sound-off below.