Installing Google Optimize via Google Tag Manager

Let's start

Google Optimize 360 is a Google new A/B testing tool which was released in 2015. It is a relatively new idea and most of you might not be self-aware with it. So for the sake of indulgence, I am going to start off with a brief intro and installing Google Optimize via Google Tag Manager.

The main purpose of Optimize 360 is to test and optimize experience for every single user. In other words, this tool allows you to test different versions of web pages and see how they perform for different objectives. It tracks the performance of each variant and tell which is the better option.

By the end of this article, you will be able to integrate Google Optimize via Google Tag Manager and be able to run experiments for your website.

 

Optimize or Optimize 360?

Before diving into the features and benefits of Google Optimize, let’s first decide what type of business you have and which tool will be most beneficial.

Google Optimize and Google Optimize 360 are two different versions of the testing solution. Google Optimize is a free version and is specially developed for small to medium-sized businesses and Optimize 360 is a premium tool developed for larger businesses with complex testings.

If you are a newbie, exploring testing techniques with your website I would strongly recommend going with Optimize rather than the alternative. It covers all the basic features you’d need for testing and requires a low learning curve.

The below image from google help center explains the features included in both tools.

 Google Optimize vs Google Optimize 360

Once you read the above differences, you should be able to identify your business category and the plan which will be helpful to test your objectives.

In this article, I am going to take you through the step by step guide for implementing multiple experiments in Google Optimize the free version.
 

Benefits of Using Google Optimize

If your website’s testing tool gathers data from multiple sources, which are important to your business, chances are you’d end up with inaccurate results. If you have integrated google analytics on your website, then your main data source would be Google Analytics. Google Optimize is natively integrated with Google Analytics, which makes it easier to collect data from a single source to test the weak areas of your website.

Google Optimize is the easiest testing tool so far hence allowing users with minimal testing and control knowledge to do the job effortlessly. . You can easily drive site experiments using a user friendly environment offered by google optimize.

With Google Optimize targeting features you can test your content for each user or group of users, thus delivering and fulfilling the needs of multiple types of users.

Moreover, Google Optimize is easy to integrate with your website. You only need to insert a line of code to your existing google analytics tracking code.

 

Integrating Google Optimize Via Google Tag Manager

If you are already using Google Tag Manager, you don’t have to worry about installing Google Optimize. It’s more easy to integrate Optimize with Tag Manager then Google Analytics.

Below is a step by step guide to getting started with Optimize and integrating with Google Tag Manager.

Sign up for Google Optimize account

1). Click https://www.google.com/analytics/optimize/ and sign up

2). If you are already signed into your google account, you will be directed to the welcome screen. Click on the get started button to continue.

 sign in google optimize

3). Next, fill the email subscription form and click accept agreement on the next few screens.

4). You have created your Optimize account and container. The next step is to connect the container with google analytics specific property. From the right menu, click on link to Google Analytics tab, click link property button and choose the specific property and views.

 link optimize with analytics

5). The next step is to install the Optimize container snippet on your website. If you are not using Google Tag Manager, you will have modify analytics tracking code and add another script just before it.

The recommended method is to create a modified version of your Analytics tracking code and deploy it directly on the page. This allows the Optimize container to be initialized immediately on page load, without waiting for Tag Manager. This enables experiments to execute faster, reduces page load times, latency, and provides a better user experience.

As stated above, the recommended method is to modify Google Analytics tag and add directly to website so it triggers after the page load. If you have installed Tag Manager code on your site and want to add Optimize via Tag Manager, you must be careful about few important things. 

While configuring, Optimize via Tag Manager you have to make sure that GTM container is loaded before the Optimize container. This will then start Optimize experiments once both the containers are loaded. 

To deploy Optimize via Google Tag Manager you would need the following things:

  1. Google Analytics tracking ID
  2. Google Optimize container ID
  3. All the analytics tags deployed in tag manager with custom tracking

Once you have the above things, follow the below steps to deploy Optimize via Tag Manager. 

Create a new tag and give it a descriptive name

Fill the form fields with correct information

Click more settings and fill the fields to set and advanced configurations the same as google analytics tag

Save this tag without adding any trigger. 

 optimize tag

Open the Google Analytics tag and click Tag Configurations >> Advanced Settings Tag Sequencing. Check the Fire a Tag Before GA Pageview tag fires.

From the drop down select Optimize as a “Setup Tag”.

 fire optimize tag before GA

Save the Google Analytics pageview tag, repeat the process if you have multiple analytics tag. 

6). Preview and debug this tag before setting it live.

 preview optimize tag

Now, you are ready to start experimenting with your Google Optimize container.

Add page hiding snippet (Optional)

To reduce the page flicker and give users a better user experience it’s optional that you add the page hiding snippet to your webpages. 

Add the page hiding snippet as early as possible in the head section before the modified Google Analytics tracking code. 

Below is the page hiding snippet. Make sure to change the GTM ID with your container ID

<!-- Page hiding snippet (recommended) -->
<style>.async-hide { opacity: 0 !important} </style>
<script>
(function(a,s,y,n,c,h,i,d,e){s.className+=' '+y;
h.end=i=function(){s.className=s.className.replace(RegExp(' ?'+y),'')};
(a[n]=a[n]||[]).hide=h;setTimeout(function(){i();h.end=null},c);
})(window,document.documentElement,'async-hide','dataLayer',4000,{'GTM-XXXXXX':true});
</script>

 

Getting Started with Experiments in Google Optimize

So we have created a Google Optimize account, container and linked it to Google Analytics via Google Tag Manager, we are ready to start our first experiment in Optimize. Optimize offers three types of experiments:

  1. A/B test

  2. Multivariate test

  3. Redirect test

A/B Test

A/B test is also known as split testing and is done to compare two versions of a web page to see which one performs better. What you would do to compare two versions of the same page is by displaying the two versions of the page to the similar visitors at the same time. The page with greater conversion rate, wins!

 how A/B test works

The conversion rate is measured by the number of goals completed on each variant of the web page. To start with A/B test in Optimize follow the steps below:

Step1: Click Create Experiment

 create experiment optimize

Step2: Configure A/B testing

Enter the name for your experiment and the add the page URL to test. The test type is selected as A/B test by default. I am A/B testing the internal links on my blog post to test the best place to insert them.

 create A/B test optimize

Note: Once you fill the information click on the create button. We have just specified the original version of the web page, now we need to create a new variant and make changes to the new page. If you are new to Optimize you can click on the show steps button to see the next steps.

 setup progress optimize

Step4: Create new variant
Click on the New Variant button to create the new variant of the web page. Let the name stay as it is and click on the add button.

 create a new variant

Both the variants are weighted equally by default but if you want more visitors to go on a specific variant, you can change the variant weight by clicking on the percentage icon. Additionally, if you want to test this experiment on different devices, you can click on the device icon and select the device type.

Step5: Edit new variant

Now, we have added the new variant but didn’t change the placement of links. Click on the new variant to make changes to the web page. This will then prompt to add the Optimize extension. Follow the steps to install the extension and it will take you to the test page to create changes.

 visual editor

Optimize extension allows you to change any element of your web page and once you are done with the changes, click on the done button the top right.

Step6: Select your objectives

Now specify the objectives for the A/B test. Optimize has three different objectives by default(pageviews, session duration and bounces). In my case I have picked the primary objective as pageviews and secondary as bounces, because i wanted to see the impact of changing the internal link location on my pageviews and hence decrease in bounce rate.

 A/B test objectives

Step6: Select your Targeting

Targeting allows you to specify who is eligible for the experiment and when it should o be served to them.

In the Who section you can select the percentage of visitors to include in this experiment and the weight of each variant. The when section specifies when the experiment would be carried out.

 select your targeting

Step6: Preview Changes

Before firing your experiment it is recommended to preview the changes in the new variant. You can check for how it is appearing on various devices.

Step7: Trigger the Experiment

Now it’s time to start the experiment and check the progress by navigating to the reporting tab. Once you finish the experiment you can then see the reports in google analytics by navigating to Behavior >> Experiments.

Now, we are done with the steps, it’s time to save the configurations and start the experiment.

Multivariate test

Multivariate test or MVT is a test that compares variants of two or more portions of a page instead of just the page variants like in A/B testing. This test identifies the best variant of each element and selects the best combination between element variants.

You can run a multivariate test to choose the best combination of heading and cover images or any other elements on the page.

Before starting our first multivariate experiment, let’s understand some terminologies.

1. Sections

A single part of a web page that is modified to create variants. The part can be a title, a header image or a footer element. This experiment includes multiple sections unlike A/B testing which has just a single section.

2. Combinations

A combination is a pair of sections that are grouped together to extract the best match. For example a combination can be a pair of heading 1 and header image or a pair of heading 2 and header image.

To create a multivariate test in Google Optimize, follow the steps below:

Step1: Login to Optimize and Create click Create Experiment

 create experiment

Step2: Configure Multivariate test

Name your experiment, enter the page url and select the experiment type as multivariate test.

 create multivariate test

Step3: Create Variants of for each section

The next step after creating experiment is to create new variants for each section. As you know, multivariate test include two or more sections and each section must have at least two variants.

Click on the create variant button under each section and make sure the sections have at least two variants, one is the original and the second is what you will create.

 redirect test variants

Create as many variants according to your need. You can click on the three vertical dots to edit and delete any variant.

So, if you have two variants in section A and three variants in section B, the total combination would be 6.

 redirect test combinations

Step 4: Edit New Variants

Now it’s time to edit the variants by using optimize extension visual editor. Clicking on the variant and it will direct you to the web page, where you can  select a particular element and make changes. In the above case, you might test different button colors or texts against different images.

Step 5: Select Objectives & Targeting

Selecting the objectives and targeting the visitors is same as we did previously for A/B testing. Go on and select primary and secondary objectives.

Next click on the targeting tab and specify what percent of visitors you want to test and if you need to add any additional rules.

Step 6: Save changes and start experiment.

Save the configurations and start your experiment.

Redirect Test

Redirect test is a type of A/B test. It allows you to test different web pages against each other. The redirect test is helpful in comparing multiple landing pages or multiple web designs. This test identifies multiple variants by URL instead of using the elements on the page like A/B testing.

To create a redirect test, follow the steps below.

Note: Before starting with the redirect test you should have the URls of the pages you are going test. This test doesn’t provide any edit console to modify your web page, you should already have multiple web pages running.

Step1: Create the Redirect Test

  1. Login to your google optimize account

  2. Click on the new experiment button

  3. Enter the name of experiment

  4. Enter the URL of the of the test page(not the redirected page)

  5. Select the experiment type as Redirect test

  6. Click on the create button

 redirect test optimize

Step2: Create Variant

The redirect test has one original variant which is created by default. To run a redirect test you need at least two variants. Now, from the section, click on the new variant button and create a new variant.

Here the URL will be the redirected URL. From old to the new.

 redirect path

Now, you can click on the three vertical dots to edit or delete the variants, click on the percentage value to change the traffic weight and click on the screen icon to preview across multiple devices.

Step3: Set Objectives and Targeting

Configure your experiment objectives and select who and when to target.

Under the experiment objectives, select your primary and secondary objectives.

 add objectives redirect test

You can add up to three objectives for the redirect test.

From the targeting tab, select

  1. The number of visitors to target

  2. Weighting of visitors on each variant

  3. When to load the experiment. By default page load is selected but you can change this to any custom dimension as well.

Step4: save and run the experiment

Click on the save button and run the experiment.

 

How long you should run the experiment?

It is recommended that you run this experiment for at least two weeks with one variant having a 95% probability.

Till now we have learned about google optimize and setting up multiple experiments.

“It covers all the basic features you’d need for testing and requires a low learning curve.”

In the next article i will be talking about understanding the experiment results and how to make the right decision. Subscribe to the newsletter below or follow us on Twitter.

Don't miss out when new resources launch

Our customer analytics experts share wisdom only once a month

Share now
We are customer-analytics consultancy that transforms messy data into actionable insights that will help you grow your company and make better data-backed decisions.