Setting Up an A/B Test in Google Optimize: A Step-by-Step Guide

Do you want to see how your ad performance changes depending on certain elements of your landing page? Use Google Optimize, a tool where you can easily create an experiment to see how changes affect your ads.

Google Optimize allows you to:

  • hide, add, or change certain elements on the website: texts, images, buttons, etc.;
  • compare different landing pages;
  • test pages with a different design.

In this article, I describe in detail how to create and run a Google Optimize experiment.

What does it take to create an experiment in Google Optimize?

Here are the requirements for Google Optimize:

  1. Install Google Analytics, Tag Manager, and Optimize codes on the website.
  2. Install the Google Optimize extension in Chrome.
  3. Configure the terms of the experiment in Google Optimize.

Let's take a closer look at the experiment settings using the example of an A/B test.

1. Create an account in Google Optimize.

Go to Google Optimize and click Create account.

Переходим к созданию аккаунта

Select the subscription you want (or unsubscribe from all of them) and click Next.

Выберите нужную подписку

In the window that appears, name the account, accept the terms of the agreement, and click Next.

В открывшемся окне назовите аккаунт

Create a container, name it, and click Create.

Создайте контейнер Optimize

2. Select the type of experiment.

In the account created, click Let's go.

Нажмите Lets go

In a new dialog box, name the experiment, specify the address of the page you plan to test, and select the type of experiment.

Выбирайте тип эксперимента

There are three types of tests available in Google Optimize:

2.1 A/B-test for a randomized experiment with two or more versions of one page.

2.2 Multivariate test where you can test multiple elements of the same page.

2.3 Redirect allows you to compare two different landing pages or design versions of one page.

Other features are also available:

2.4 Personalization allows you to personalize your page for targeted visitors.

2.5 COVID-19 banner. Add a banner message related to COVID-19 to your website with an important update for your customers using our template.

3. Set up the experiment

Click on the created experiment to open its settings dialog box.

окно с настройками работы

You will be forwarded directly to the experiment settings dialog box.

3.1. Create variants for comparison

A variant in Google Optimize is a modified page element that you want to compare with the current appearance of the element.

3.1.1 By default, the system creates an initial variant called Original.

To add a test variant, click Add variant.

нажмите Add variant

Создайте варианты для сравнения

Specify the name of the new variant page and click Finished.

Нажмите Finished

To customize the experiment variant, install the Google Optimize extension.

3.1.2 Click the Edit button next to the created variant and wait until the page for which you want to configure the experiment loads.

Страница для эксперимента

In a new dialog box, you can:

  • delete a page element;
  • change the size or location of the element;
  • change the text on the website, as well as its font, alignment, size, and color;
  • add a background as a fill color, set a frame, or change transparency;
  • edit the HTML or JavaScript code.

Save all changes.

А теперь сохраните изменения

3.2. Set the experiment weight

By default, the system gives equal weight to each variant of the page.

Установите вес эксперимента

If you want to test, for example, the effectiveness of the planned redesign of the Buy button, you can send more traffic to the test variant to more accurately assess user reactions to the change.

To change the weight of a variant, click the icon for that setting.

нажмите на значок этой настройки

In a new dialogue box, enter the desired weight for each variant and click Done.

введите необходимый вес для каждого варианта

3.3. Create a targeting rule

There are ten types of targeting available in Google Optimize, and you can create your own experiment triggering rule based on these.

создать собственное правило срабатывания эксперимента

  • Google Ads targeting targeting based on accounts, campaigns, ad groups, and keywords of Google Ads.
  • URL targeting.
  • Audience targeting audiences created in Google Analytics (available only to Optimize paid users).
  • Behavior targeting new or returning visitors who have come from certain sources.
  • Geotargeting  visitors from a specific city, region, or country.
  • Technology targeting  users using a particular device, browser, or operating system.
  • JavaScript variable the value of the JavaScript variable used on the website.
  • First-party cookie targeting user cookies.
  • Custom JavaScript  custom code that allows targeting based on information not available in previous targeting methods (e.g., time of day).
  • Query parameter GET parameters. With this type of targeting, you can target the experiment with UTM tags.
  • Data Layer variable  based on the values stored in the data layer variables.

4.4. Set the hypothesis

In the description of the experiment, I recommend that you spell out the question you want the experiment to answer. Alternatively, you can describe in detail your assumptions about how the innovations will affect your chosen goals.

нужен ответ в ходе эксперимента

4. Link Google Optimize to Analytics

4.1. Connecting Google Optimize to Analytics

To link Google Optimize to your analytics, click Link to analytics.

Link to analytics

In a new dialogue box, select the resource and the Google Analytics view.

ресурс и представление

4.2. Set objectives

To measure the performance of the experiment variants, you need to set objectives. For example, you can see how the new design affected the bounce rate or page conversion rate.

4.2.1. In Google Optimize, you can select standard objectives or set your own ones. There are three types of standard objectives:

  • page views
  • session length
  • refusals

Стандартные цели

Your own objectives:

Собственные цели

4.2.2 You can also use goals from Google Analytics. To do so, go to Objectives and click Add experiment objective. You can choose from existing objectives (Choose from list) or create your own (Create custom).

Choose from list или Create custom

4.2.3. You can combine standard Google Optimize objectives with your own goals from Analytics, but in the free version, you can only use three objectives at a time.

Сочетать стандартные цели Google Optimize с собственными целями из Analytics

5. Set up targeting

All website users can take part in the experiment or you can set certain criteria to select certain users. Let’s take a closer look at what you can set up in the Settings tab.

5.1. Share of website visitors

By default, all website visitors will participate in the test. If you want to test your hypothesis on a smaller number of users, just enter the required percentage value in the field highlighted in the screenshot below.

Введите необходимое значение в процентах в поле выделенном на скриншоте

On the same tab, you can change the weight of the variants, if necessary, by clicking Edit.

изменить вес вариантов

5.2. Activation condition

The targeting settings in Google Optimize allow you to determine when an experiment is activated.

By default, it activates when the page loads. To set an event as an activator, go to When and select Custom event.

выберите поле Custom event

6. Install Optimize code with Google Tag Manager

6.1 Open the menu with experiment setup steps and navigate to the Google Optimize installation.

переходим к инсталляции Optimize

In a new dialogue box, copy your Google Optimize account ID.

идентификатор аккаунта

6.2 Go to Google Tag Manager and create a new tag of the Google Optimize type.

создайте новый тег типа «Google Optimize

6.3 In the tag settings, specify the Google Analytics tracking ID and the Optimize account ID you copied earlier.

идентификатор отслеживания и аккаунта

Save your new tag. You won't need any triggers for it.

6.4 Now you need to change the tag order so that the Optimize tag is triggered before Google Analytics.

Go to the advanced Analytics tag settings, check the box next to Activate tag before Google Analytics tag, and select the Google Optimize tag from the list.

Выберите из списка тег Google Optimize

7. Install a script that hides element substitution

The Google Optimize code should be installed directly on the website so that visitors do not see the substitution (Google Optimize help).

 Необходимый код

 This is the standard code:

 <style>.async-hide { opacity: 0 !important}
 </style><script>(function(a,s,y,n,c,h,i,d,e){s.className+=' 
'+y;h.start=1*new Date;h.end=i=function()
{s.className=s.className.replace(RegExp(' ?'+y),'')};
(a[n]=a[n]||[]).hide=h;setTimeout(function(){i();h.end=null},c);h.timeout=c;})
(window,document.documentElement,'async-hide',
'dataLayer',4000,{'CONTAINER_ID':true});</script>

The standard code for element substitution is not very good. During substitution, it shows just a white screen and it's hard for the user to understand whether the website is loading at all. To solve this, Netpeak's Analytics Strategist Alexei Danilin has fine-tuned the script so that it will show a picture on top of the white screen. In the modified script, it is clear that the website is loading.

You can use the script below as an example:

<style>.async-hide { opacity: 0 !important}div#pageloaddiv 
{visibility:visible !important;position: fixed;left: 0px;top: 
0px;width: 100%;height: 100%;z-index: 1000;background: 
url('[URL картинки-заглушки]') no-repeat center center;}
</style><script>(function(a,s,y,n,c,h,i,d,e){ s.className+=' 
'+y; var div = document.createElement('div'); div.id = 
'pageloaddiv'; div.style = 'opacity: 1 !important'; 
document.documentElement.appendChild(div); h.start=1*new Date; 
h.end=i=function(){  s.className=s.className.replace(RegExp(' 
?'+y),'') }; (a[n]=a[n]||[]).hide=h; setTimeout(function(){  
i();  h.end=null;  document.getElementById('pageloaddiv').style.opacity 
= 0;  document.getElementById('pageloaddiv').style.zIndex = 0;  
setTimout(function () {   document.getElementById('pageloaddiv').
parentNode.removeChild(div);  }, 300); },c); h.timeout=c;})
(window,document.documentElement.lastChild,
'async-hide','dataLayer',4000,{'GTM-xxxxxxx':true});</script>

Conclusions

Google Optimize is a powerful tool to test your website’s performance, individual pages, and elements.

How to work with it:

  1. Create a Google Optimize account and select an experiment type.
  2. To set up the experiment, create variants of pages to compare and determine how traffic will be distributed between them.
  3. Link Optimize to Google Analytics.
  4. Configure objectives in Optimize or select previously configured ones in Analytics, so you can evaluate the effectiveness of the elements you're comparing.
  5. Set up targeting the conditions for activating the experiment on your website.
  6. Set up the Optimize code with Google Tag Manager.
  7. Add a script directly to the website code that hides the substitution of elements.
Topics:
6
0
Found a mistake? Select it and press Ctrl + Enter