fbpx

How to Install and Use Google Optimize 360: A Step-by-Step Guide


Installing Google Optimize 360 & Using Experiments to Test Your Website

If you own an Analytics property, you probably received an email from Google towards the end of March, announcing that they were rolling out their original test version of Google Optimize 360 globally and for everyone to use. If you are like the rest of digital marketers and brands just trying to keep an eye on metrics on occasion, you probably had a ton of questions as to what Optimize is, whether or not you need it, and the biggest issue when Google rolls out new analytics / tracking platforms – is it easy to install and use?

Tandem Interactive is a boutique digital marketing agency in Fort Lauderdale, Florida that is constantly staying ahead of the curve and jumping on new analytics and optimization opportunities. Questions we often get from new clients are in regards to how to structure their website:

  • What should go on the homepage?
  • Do we have too much content on our homepage?
  • Should we re-organize our navigation menu?
  • Create more sub-navs?
  • Make our logo larger?
  • Make our phone number larger?
  • Change font size, color, style?

 

Before Google Optimize 360, these changes would have had to been played around with and monitor Analytics to see if any visual changes made actually had an impact; and even then, we would not know for sure if better Analytics reports came from the visual changes or from outside factors.

If you have been in the digital space for quite some time, you already know how A/B and Multi-Attribution testing works for your PPC landing pages, and how expensive programs like Optimzr can be to test versions of your landing pages or website. Google Optimize is a FREE way to test changes to your website and measure EXACTLY how they affect users and how they are consuming your site.

In order to figure out how it works and why it is beneficial, our team created this Google Optimize 360 guide for implementing the tool on your website.

How to Setup Google Optimize:

We had our team investigate exactly how to install Google Optimize and setup the first “experiments”.

To make it as simple as possible, we included step-by-step instructions and snippets for setting up Google Optimize on your site, linking to your Analytics account, and creating your first Experiment.

Step 1: Sign up for free!

If you go to google.com/analytics as you normally would, click the Optimize tab and follow the green “Sign Up for Free” button. To complete initial setup, you are going to have to follow the steps to the right of the My Account – My Container Dashboard, which is illustrated below. We suggest signing up for the free version first and playing around in it until you are familiar with running experiments, then selecting the talk to a sales specialist option for Google Optimize 360 cost. You can also view the comparison between Google Optimize free and Google Optimize 360. You will also need to install the Google Optimize extension.

 

setup-steps-google-optimizer-360

Manage Accounts and Users:

This portion will show you the Account ID and Container ID, and how to edit and manage its details.

Create an Experiment in Google Optimize 360 Free:

We saved this part for after we linked our Google Analytics property, but you can begin creating an experiment by using the following steps.

  1. Name your experiment. Ex. Home Page Experiment
  2. Set the URL you would like to test. Ex. Home page URL
  3. What type of experiment you are looking to create: This is going to be based off of the desired outcome you are looking for.

For those who are not familiar with the types of testing, the following are brief definitions:

  • A/B Test – tests two or more variants of a page, which you can set when you create your variants. A/B testing is the most common option and the option you are likely going to choose for simple visual changes to your website.
  • Multivariate Test – This option will be the best choice when you are looking to test multiple variables in the same section. Ex. Completely changing the font color, size, style, and text in a section of your homepage to see if it makes the page perform better or increase user behavior on the page. This can be a great idea for brands and businesses creating a new website from scratch. Get an idea exactly which look and text performs best for your site while it is in its infancy.
  • Redirect test – Redirect tests allow you to test separate pages that are identified by different URLs or paths. Select the Redirect Test option when making large changes to page code, so you can test the version of the page before making it live. Add a no-index tag to the test page so that page is not indexed by Google.

 

name-optimize-experiment-testing-types

Linking Google Analytics

Link a Google Analytics property to your Google Optimize 360 Container / Experiment. Google Optimize will give you a drop-down menu of your Analytics properties, you can select from there.

 

link-analytics-to-optimizer

Install Optimize Snippet on your website. ***This is the tricky part.

Google gives very specific instructions for properly installing the Google Optimize Snippet, which illustrates that you must enter the code BEFORE any script code and AFTER the <meta charset> declarations. There are two snippets to enter, the Combined Analytics-Optimize Snippet and the Page-Hiding Snippet. The Page-Hiding Snippet should come BEFORE the Combined Analytics-Optimize Snippet. The individual codes are as follows, which you will enter in the Theme.Header.php under Appearance – Editor in WordPress. You will then have to add the Combined Analytics-Optimize Snippet to any page that you are going to run experiments on. We highlighted the start of each code in case you are not going to use the page-hiding snippet, although it is recommended.

Combined Analytics-Optimize snippet with Page-Hiding:

<HTML>
<HEAD>
<!– 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.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,
{‘GTM-PXXXXXX’:true});</script>
<!– Analytics-Optimize snippet –>
<script>
(function(i,s,o,g,r,a,m){i[‘GoogleAnalyticsObject’]=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,’script’,’https://www.google-analytics.com/analytics.js’,’ga’);

ga(‘create’, ‘UA-XXXXXX-X’, ‘auto’);
ga(‘require’, ‘GTM-XXXXXXX’);
ga(‘send’, ‘pageview’);
</script>

Note: Replace GTM-XXXXXX with your Optimize container ID and replace UA-XXXXXXXX-X with your Analytics tracking ID.

Our code ended up looking like this:

<?php
 /**
 * @package WordPress
 * @subpackage Highend
 */
 ?>
<!DOCTYPE HTML>
<html <?php language_attributes(); ?>>
<!-- START head -->
<head>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXXX-X', 'auto');
ga('send', 'pageview');
</script>
<title><?php wp_title('|', true, 'right'); ?><?php bloginfo('name'); ?></title>
<meta charset="<?php bloginfo('charset'); ?>">
<?php if ( hb_options('hb_responsive') ) { ?>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<?php } ?>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />

<!-- 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.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,
{'GTM-PQV5GLH':true});</script>

<!-- Analytics-Optimize snippet -->

<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXXX-X', 'auto');
ga('require', 'GTM-XXXXXXX');
ga('send', 'pageview');
</script>

<!-- Google Tag Manager -->

<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-QK7B');</script>
<!-- End Google Tag Manager -->

 

Installation Errors

You will know if you did not install the snippet properly because you will receive notification errors like this in Optimize when you attempt to create Variables. Be sure to double check that the codes are in the proper order, in the very beginning of the head, after your regular Google Analytics code, and after the <meta charset> descriptors, as these are the most common errors that will affect installing Google Optimizer 360.

 

google-optimize-snippet-install-errors

 

 

Creating an Experiment on Google Optimizer 360:

Now that you have Google Optimizer setup, you can create your first experiment, which sort of backtracks us through some of the steps.

This is what the main dashboard looks like in Google Optimizer 360 (free), which displays all of your experiments. In order to create a new experiment, you simply click “Create Experiment” and follow the aforementioned steps of naming the experiment and selecting the testing type.

 

create-experiment-google-optimize

 

You will then create your variables by clicking “+New Variant” and naming the Variant to whatever you are going to change in that Variant.

 

Select Your Objectives

Select either Page Views, Sessions, or Bounce Rate. You can also set secondary and tertiary objectives to include two out of the three, or all three objectives.

Enter your Hypothesis

Explain what you want to see change in reporting figures due to the changes you are about to make. Ex. If I increase the font size of my phone number top of page, bold it, and change it to a brighter color, will the phone number get more clicks?

google-optimize-objectives-targeting

 

Set Targeting Parameters

After you set your hypothesis, select the “Targeting” tab and set desired targeting parameters for your experiment. You can choose the percentage of visitors you want to target, set geo parameters like city, state and country, behavior parameters, target browsers or devices, and more.

google-optimize-targeting-parameters

 

You will then click SAVE at the top right hand corner of the dashboard. You can now click the Variant to go to your site and start making the changes you want to experiment with.

 

The Variant Interface: Selecting the Changes to Experiment

Below is what the Variant interface looks like on our homepage. As you can see, you can select any portion of the website and either make changes to it, move it around, or completely delete a section. All changes that you make will show in the upper red toolbar.

Selecting Mobile vs. Desktop View.

You can select a device that you would like to view your website on, in case you want to make changes that will make your mobile website look better and perhaps load faster if you remove certain sections, and more.

optimize-desktop-mobile-devices

Choosing a Change Like Font Color:

font-color-variant-google-optimizer
For our experiment on the Tandem homepage, we changed the font color and size of our phone number so it would be more visible.

 

Reviewing Changes Made Before Saving:

You can review the changes you made in the upper red toolbar, then click DONE in the top right hand corner.

google-optimize-experiment-variant-review

 

Starting your Google Optimize Experiment:

Before you start your experiment, it is best to preview your experiment and changes made by visiting the dashboard and selecting the icon that looks like a desktop. You can preview it on desktop, mobile, or other options. If the preview reflects your Variant changes correctly, you can click Start Experiment.

start-google-optimize-experiment

 

Viewing Google Optimize Experiment Results:

You will be able to view all reporting and Analytics on your experiments through the Optimize dashboard and Analytics.

google-optimize-experiments-in-analytics

After 3 days, Google Optimize is already telling me that the Original format of the homepage has a higher probability of being the best version, compared to the Variables we changed. However, it is neck and neck, and the experiment is incomplete. There is still a probability that the new variant will outperform the original.

google-optimize-dashboard-variant-results

 

Experiment Completion:

Once Google Optimize has conducted enough reporting on your experiment, or you end the experiment, you can view the overall results and how it performed in comparison to not implementing those changes on your website.

 

google-optimize-dashboard-results

 

 

Google Optimize 360 (and the free version) can give you great insight into what works for your consumers in relation to your website layout, visualizations, and functionality.

HAPPY EXPERIMENTING!

 

Additional / Helpful Resources for Using Google Optimize 360:

https://support.google.com/360suite/optimize/answer/6211930#targeting

https://support.google.com/360suite/optimize/answer/6262084

“Getting Started with Google Optimize” by Sean McQuaide – LunaMetrics