How to Install Google Optimize with Google Tag Manager (2020 Updated)

Do you want to easily test two “versions” of your website with your site visitors and see what works best? You can do this easily by installing a tool called Google Optimize.

Google Optimize is integrated with Google Analytics and can be used effectively to analyze your Analytics data to optimize your website and increase things like Conversion Rate, Time on Site and much more!

In this guide, we will learn how to install Google Optimize on our website. We will also see how to install a hiding snippet to minimize page flickering while using Google Optimize.

An overview of what we’ll cover in this guide:

So let’s dive in.

Create a Google Optimize Account

Now, to sign up on Google Optimize, you will need a Google account. Once logged in, you will be greeted with the Create Account screen where you can set up your account. 

Create an Account screen on Google Optimize

And just like in Google Analytics or Google Tag Manager, there is an account structure, that is nested from Account to Container and then New Experiment. 

I would recommend using your company name as the Account name. Under the company name, you might have different websites. We’ll put them into one account. 

Now, you can optionally tick the boxes to Improve Google products, Benchmarking, and Get in-depth analysis. Then you need to acknowledge and agree to the terms of service

And click on the Next button. 

The first step to set up a new account in Google Optimize

Moving forward, you’ll see the Container setup. 

Now, the Container lies beneath the Account. So, for the Container name, you can enter your website and click on the Create button.

Add container to a new account in Google Optimize

Thus, we have our company account under All accounts and then beneath that, we have our Container. So you could have multiple Containers in one account if you choose so. 

Account structure in Google Optimize

From here, we need to set up Google Optimize on our page.

Install Google Optimize on Your Website

I have a demo shop running on WordPress, so this is where I’m going to demonstrate the installation of Google Optimize. 

The first thing that we see in Google Optimize is to Create an experiment. For now, we’re going to skip this step and go directly to Link to Google Analytics. This is actually the setup that we need to undertake. 

This will link your Optimize account to your Analytics account. If you don’t have Google Analytics set up yet for your site,  we also have a free beginner’s video course to get you started!

Moving forward, under Link to Google Analytics, click on Link Property. 

Link Property under Link to Google Analytics in Google Optimize

Here you need to choose the Google Analytics property that your Google account has access to. This is the Google account that you are currently logged in to. So you can see the different accounts. Here, we will continue with our demo shop. 

Optionally you can enable the All Web Site Data and then click on the Link button.

Select the Google Analytics property to link to Google Optimize

This will open up a new popup where we can add the Optimize Snippet to our site. Let’s click on Get Snippet

Get the Optimize snippet to add to your website

Here we have some implementation instructions. 

Instructions to deploy Google Optimize on your website

Now, Google Optimize works heavily with Google Analytics and Google Analytics has over the past experienced different changes to their tracking code. Therefore we might go through different methods in order to get this installed. 

But what you definitely need in order to make this work is access to the back-end of your website, where you can change the HTML page. This might be different for your website, depending on how you have installed Google Analytics. But in the end, you should be able to get to the HTML code in the background and be able to edit your Google Analytics code. 

Now, my website is running on WordPress so I’m going to go into the admin profile and access the Editor under Appearance

Editor under the Appearance section of WordPress Admin dashboard

Here, I can access my Theme Files. I have my Google Analytics code installed in the header.php. You can access it by clicking on the Theme Header

Theme Header PHP in the WordPress Theme Files

Now again, this might differ for you depending on your implementation of Google Analytics. But, in this case, we find our Google Analytics code in the header files. 

This Google Analytics code has changed over the past years so you might have a different version now. But here we are looking at the analytics.js version. So if you find the same version in your code, then you can follow these steps.

analytics.js version of the Google Analytics code

Now, all we need to do is copy this code from the popup in Google Optimize and paste it into the Google Analytics tracking code.

ga(‘require’, ‘GTM-KWXSQDT’);

This code has nothing to do with your Google Tag Manager. But, it is required to load the Optimize plugin with Google Analytics. 

Copy the Optimize code to paste into your Google Analytics tracking code

So let’s go back to Google Analytics code and paste this code on our page. 

That’s it. Click on Update File and we should be all set.

Update the Theme Header PHP in WordPress Theme Files

Let’s open our website page. We then check with our Google Tag Assistant whether Google Optimize is installed correctly. 

Tag Analysis in Google Tag Assistant

So we now have installed Google Optimize on our page. 

Now, what if your Google Analytics code looks a bit different from the one in our case, and you don’t have analytics.js version running? Then the second case could be that you already have the new Gtag installed. Let’s take a look at this. 

If you go into Google Analytics now it recommends the new Gtag to install the tracking code and not the old analytics.js version.

Gtag.js version of Google Analytics tracking code

If you’re installing Google Analytics from scratch, then you can install the Gtag version. But if you have the older version running, that’s also fine. This is just a newer version of Google Analytics implementation. 

There’s no new functionality with the Gtag version and analytics.js is still supported. Thus, you don’t have to change over your tracking code. 

However, here we have the capability of installing our Optimize Container. All we need to do is follow the syntax from https://support.google.com/optimize/answer/9183119?hl=en  

gtag('config', 'GA_TRACKING_ID', { 'optimize_id': 'OPT_CONTAINER_ID'});

So let’s copy this code, go back to the header file and add this into our tracking code. Add the optimize_id after the GA_TRACKING_ID. 

You can find the optimize_id from the Google Optimize deploy popup. 

optimise_id in the Deploy Optimize popup of Google Optimize

Thus, you have Google Optimize implemented with the Gtag. Click on Update File

If we check with the Google Tag Assistant, we can see that we have our Global site tag, Google Optimize, and Google Analytics installed.

Global site tag, Google Analytics, and Google Optimize in the Google Tag Assistant

Thus, this is how you install this tracking code with the global site tag. 

Now, the last case here is if you have Google Analytics installed via Google Tag Manager. So you might have the script of Google Tag Manager installed on your page that deploys your container. 

Google Tag Manager script in the Theme Header file of WordPress

You might know that within Google Tag Manager, you’re able to use a predefined Tag. This Tag is called Google Optimize. To access it, go to Workspace → Tags → New → Tag Configuration and Choose tag type as Google Optimize. 

Google Optimize Tag in Google Tag Manager

And then you can add the Google Analytics Tracking ID and the Optimize Container ID.

Tag Configuration of Google Optimize Tag in Google Tag Manager

But if you read through the documentation on how to install Optimize, it actually recommends not to implement Optimize with Google Tag Manager. Instead, it recommends that you load the library directly on your page.

Optimize Help to add Optimize to your website using Google Tag Manager

So this recommended implementation is to install your Google Analytics script before your Google Tag Manager snippet along with the ‘require’ function of your Google Optimize Container. However, you might have Google Analytics and Google Analytics pageview Tag, deployed through Google Tag Manager. 

So we don’t want to double this, and that’s why we’ll take out the pageview functionality. Thus, this code is only here to install Optimize on our page. 

Remove the Google Analytics pageview functionality from the Theme Header file of WordPress

Notice that there are two different codes in the script. One is the Optimize Container, which has nothing to do with Google Tag Manager, and the second is the Container ID for your Google Tag Manager. 

Now, click on Update File and it will be deployed on our page. 

Let’s refresh our website page. Again we see in the Google Tag Assistant that we now have Google Tag Manager installed, which deploys our Google Analytics pageview tag, and we have our Google Optimize installed. 

Result of Tag Analysis on Google Tag Assistant

So these are the three cases that you might encounter when you install Google Optimize on your page. At this point, we have Google Optimize installed correctly on our page, and can start running experiments.

Install Hiding Snippet to Minimize Page Flicker

There’s another optional step that I highly recommend: installing the hiding snippet. 

So when we go to Next on Deploy Optimize popup, we get a new snippet that is called the page hiding snippet. This hiding snippet reduces the page flickering. 

Page flickering is when your users would encounter any change in the website (for example, the color of the webpage) when an experiment is running. The user would first see the control version and then your variation, essentially flickering from one version to the next, which is obviously something that is not desirable. This can impact your test results negatively. 

Therefore, this hiding snippet loads your experiment first and then releases that version for the user so that there’s no flickering effect once the user comes to your test page.

Now, in order to install this snippet, you simply need to copy it and paste it just before your Analytics tracking code. 

Copy the page flickering snippet from Google Optimize

Once we paste this before our Analytics tracking code, let’s click on Update File. Thus, we have the hiding snippet installed.

Paste the page flickering snippet into the Theme Header file of WordPress

Now, you might think that you could install the page flickering snippet through Google Tag Manager since you have Google Tag Manager already installed. But this is not recommended because you can’t control when a Google Tag Manager code gets deployed. In this case, the page hiding snippet would not work. 

Now, that we have the snippet installed, let’s reload our website page. Let us check for any errors using Google Tag Assistant. We won’t have a Tag for a page hiding snippet, but we know it is installed on our page. 

We can also see this in our view-source

Page hiding snippet in the view-source of our website page

Install Browser Extension

Now, we have set up Google Optimize on our page correctly and can move forward to the next step. Click on the Finished button in the Deploy Optimize popup. We have already linked our Google Analytics account. 

The last step that is required is to install a Chrome Extension to your browser. You’ll get this once you start building an experiment, so let’s just click on Create Experiment in Google Optimize.

Name your experiment here. In this case, we’ve named it First Test. Then add the URL of your website page and choose if it’s an A/B test. We have another guide where you can learn to build A/B tests in Google Optimize.

Once you’ve done this, click on the Create button.

Create an experiment in Google Optimize

And then we can create our variant. For this click on Create Variant. Then add the Variant Name

When we click on the variant it asks us to install our Chrome extension. You can do it by clicking on the Install Extension button and then confirm again in the popup that you want to Add extension.

Install Google Optimize Chrome extension on your browser

This will show a success message that Google Optimize has been added to Chrome and an icon of Google Optimize will be shown on the top-right corner.

Google Optimize added as a Chrome extension

Thus, your website will now load with Google Optimize installed and the browser plugin will let you build your variation. 

Building variations on Google Optimize

So this is how you can install and set up Google Optimize on your website.

Summary

To summarize, you need to set up an account on Google Optimize and link it to your Google Analytics account. Then install the Google Optimize plugin into your analytics code to install it on your website page.

Also, you can add the hiding snippet before your analytics code loads to minimize page flickering. And you can build your variations by installing the Google Optimizer extension on Chrome.

So this is how you can set up Google Optimize. Please feel free to comment below if you have installed Google Optimize on your website and let us know your experience!

JOIN US!

Master Data & Analytics with Measuremasters

Exclusive Courses & Workshops | Ongoing Troubleshooting | Support Resources, Tools & much more
guest
0 Comments
Inline Feedbacks
View all comments

now it's time to

Start measuring like a master

Itching to jump into the world of MeasureMasters? This is what you have to look forward to.