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:
- Create a Google Optimize Account
- Install Google Optimize on Your Website
- Install Hiding Snippet to Minimize Page Flicker
- Install Browser Extension
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.
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.
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.
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.
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.
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.
This will open up a new popup where we can add the Optimize Snippet to our site. Let’s click on Get Snippet.
Here we have some implementation instructions.
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.
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.
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.
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.
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.
Let’s open our website page. We then check with our Google Tag Assistant whether Google Optimize is installed correctly.
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.
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.
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.
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.
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.
And then you can add the Google Analytics Tracking ID and the Optimize Container ID.
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.
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.
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.
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.
Once we paste this before our Analytics tracking code, let’s click on Update File. Thus, we have the hiding snippet installed.
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.
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.
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.
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.
Thus, your website will now load with Google Optimize installed and the browser plugin will let you build your variation.
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!
