Updated Instructions for Implementing Google Optimize

/

how-to-install-google-optimize
Getting Google Optimize installed on your website isn’t the most straightforward process. While the tool itself allows users with even minimal technical experience to begin testing simple changes on their website in a matter of minutes, installation may require an upfront effort with close collaboration with your development or IT team.

Recently I wrote a guide to getting started with Google Optimize. In it, I briefly covered the implementation of Googles new A/B testing tool. It hasn’t been long since LunaMetrics published that blog post, but already the best practices for implementing Google Optimize have changed. Consider this your updated guide for implementation. We’ll cover how to add the Google Optimize snippet and how to make sure it plays nice with Google Analytics and Google Tag Manager. Let’s get started.

Getting Started

In-order to setup and use Google Optimize, you’ll need the following things:

Google Analytics Account. You likely already have one of these. If not, you can get one here. You’ll need a Google Account to sign up, which can be a Gmail account or a company email address associated with Google.

Specifically, Optimize requires Universal Analytics to operate.

Google Tag Manager (recommended). We strongly recommend using Google Tag Manager. Tag Manager will allow you to easily add Universal Analytics and Optimize to all pages of your website. It will also allow you to track events (i.e. link clicks, form submissions, etc.). Optimize requires that you use GA goals as experiment objectives, so you can use GTM to track events, and GA to count those as Goal Completions.

In the past Tag Manager was implemented immediately following the opening body tag. With the release of Optimize, Google has updated the Tag Manager container so that it can be placed immediately following the opening head element.

LunaMetrics has instructions for installing Tag Manager here.

Google Chrome Browser. Optimize requires a chrome extension to modify test variations. That extension can only run on a Chrome Browser. Download Google Chrome here.

Google Optimize Chrome Extension. The Optimize chrome extension is what powers the Optimize visual editor. It is required for you to be able to modify variants of a page. Download the Optimize Chrome Extension here.

Setting Up Optimize

The process for setting up Optimize looks like this:

  1. Create an account and container
  2. Link the container to Google Analytics
  3. Install Optimize on the site

1. Create an Optimize Account and Container

Once you have access to Optimize, you’ll be able to login and create an experiment. An account allows you to run experiments on one or more websites, you’ll likely only need one account per company. The container is where all your experiments and configuration settings will live.

Click “Create Account” and you’ll be prompted to enter an account name and container name. After you accept the Optimize Terms of Service your account will be created and you’ll be sent to the container pages.

LunaMetrics Naming Best Practices

You’re typically the only one who will see your Optimize Account name and Container names, so really, you just want this to make sense to you and your organization. We have a few suggestions:

Account Name(s). use your company name (i.e. LunaMetrics)
Container Name(s). Use the domain name of your website (i.e. www.lunametrics.com)

how to name your google optimize account

how to name your google optimize container

2. Link the Google Optimize Container to Google Analytics

Linking a container to Google Analytics allows data to flow between the two products.

On the right-hand side of the container page you will see a 5-step process for completing the setup.

  • Expand the “Link to Google Analytics” dropdown. Then click the “Link Property” button.
  • Select the property you want from the dropdown, making sure that the property you select corresponds to the domain on which you’ll be running experiments.
  • Then select one or more views that you would like to connect to Optimize.
  • Click the blue “Link” button and Google Optimize will be linked to your property and views.

View Selection is Important. The maximum number of goals a Google Analytics account can have is 20. And because Google Optimize requires events like link clicks or form submissions to be recorded as a goal in Google Analytics before it’s used as an experiment objective, you’ll need to thing about how many goals you’re currently using and what additional goals you’ll need to set up for testing. If you are close to the maximum number of goals allowed by GA, then you may want to set up a testing view that can accommodate additional goals. 

There are other things to consider with your View selection. This View is where you’ll see all of the results from your experiment inside of Google Analytics. Filters on your View will also affect your experiment results data. If you’re filtering out internal traffic from a View, for instance, they may still see the experiment, but their data will not be included in the results.

how-to-link-google-optimize-to-google-analytics

Before Property is Linked

optimize-link-a-property-screenshot

Select Property & View(s)

optimize-after-optimize-linked-to-ga-screenshot

After Property is Linked

3. How to Install the Optimize Snippet

Now that you’ve created an Optimize account and container, and have linked your container to GA, you’ll need to install the Google Optimize snippet on your website.

I’ll stop here to say that there are lots of different options, depending upon your previous implementations of Google Analytics and Google Tag Manager. These options range from the easy (add a Tag in Google Tag Manager) to the complicated (add extra code to your page.) There are pros and cons to each method, which is enough material for a completely separate blog post. As Google Optimize is still in beta, these instructions may change at any time.

Our Recommended Installation

We believe that the Google products all work really well together, and we like using them all. Our recommended approach comes straight from the Google support documentation, and is the best way to both ensure that your experiments load as quickly as possible while still maintaining the flexibility that Google Tag Manager offers.

The recommended way of doing this is by adding specific code on your site to load Google Analytics and thus Google Optimize as soon as possible. We’re going to call this the “Analytics-Optimize Snippet.” This is a small bit of JavaScript that will get added to every page. Because this may kick off an experiment, there are certain things that should load above this snippet.

These things should come before the Analytics-Optimize Snippet:

  • <meta charset>
  • Data layer initialization (can use this information in Optimize and GTM!)
  • Setting cookies.
  • Any scripts that you may want to use or that declare JavaScript variables that you wish to use in Optimize experiments. For example, jQuery and JavaScript used to target an Optimize variant.
  • Page hiding snippet.

These things should come after the Analytics-Optimize Snippet:

  • Other trackers, Analytics tags, ad tags and/or a tag-management snippet.
  • Other scripts that you won’t target Optimize experiments against.

Here’s what it looks like all put together:

About the Page Hiding Script

Using the page hiding snippet is not required, but is highly recommended. The snippet prevents what is known as the flicker effect. The flicker effect occurs when the user sees the original page before being shown the variation. This effect can have a negative impact on both user experience and experiment results. Here is the flicker effect in action:

ab test flicker in action

Source: widerfunnel.com

For the page hiding snippet to do its job, it needs to be placed as high up in the head as possible – after <meta charset> and before the Optimize, Analytics, and/or Tag Manager snippets.

Page Hiding Snippet Timeout Function. The page hiding snippet has a timeout function that stops Optimize from trying to load an experiment if too much time has passed. The default time is 4 seconds, which is represented as 4000 milliseconds in the snippet. This time can be changed, just know that changing the timeout might affect how many people are included in your experiment.

About the Analytics-Optimize Snippet

Let’s talk about that Analytics-Optimize Snippet and what is included and what is not included. Again, make sure you read the right support documentation. Here’s our desired order of operations.

  1. Page starts loading.
  2. Page Hiding Snippet loads.
  3. GA Loads from JavaScript snippet on page.
  4. Optimize Loads from JavaScript snippet on page. Experiment may or may not fire.
  5. GTM loads from JavaScript snippet on page.
  6. GA – Pageview Tag is fired from Google Analytics.
  7. Rest of page loads…

The commands that are included in the Analytics-Optimize snippet above contain two commands:

ga(‘create’, ‘UA-123456-1’, ‘auto’); – This translates to: “Let’s load the Google Analytics tracker. When we’re ready, we’re going to send our data to this specific property, UA-123456-1, but nothing yet. Also, we’re setting our cookieDomain to auto, which means we’re making sure this works on subdomains.

ga(‘require’, ‘GTM-XXXXXX’); – This translates to: “Let’s load this Google Optimize container.”

That’s it. Notice that at no point did we send information to Google Analytics. We’re going to continue using our Google Tag Manager to handle that.

About the Google Tag Manager Snippet

We’ve been recommending Google Tag Manager for years, so if you haven’t upgraded yet, now’s a great time! The installation instructions changed for Google Tag Manager recently, which split the code into separate parts, one in the head and one in the body. Whether you have Google Tag Manager installed the old way or the new way won’t really matter here, but if you’re making changes to the on-page code, then why not fix everything.

Double-Check Your Installation

As a last reminder – you should only fire a pageview once into a Google Analytics property. So your setup will look like either of the following:

ON PAGE: Yes ga(‘send’,’pageview’) code on the page
IN GTM: No GA pageview tag in Google Tag Manager.

OR

ON PAGE: No ga(‘send’,’pageview’) code on the page
IN GTM: Yes GA pageview tag in Google Tag Manager.


Installing Google Optimize can get complicated. Following our instructions closely will get you there, but also be careful and check your Google Analytics and Google Tag Manager to make sure there are no major changes to how things fire, or changes to metrics like Pageviews or Bounce Rate inside of Google Analytics.

Sean McQuaide is a Senior Account Manager at LunaMetrics. As the technical search marketing lead he is the go-to for website audits, search analysis, and site performance. Sean also leads LunaMetrics A/B testing service where he uses his experience identifying user intent to find and test conversion opportunities. Sean spends his free time racing sailboats in the Gulf, constructing massive sandcastles on the beach, touring breweries, and running 5 & 10ks.

  • Islam Muhammad

    I am happy to be the first to comment on that great post that clear the mystery behind the new optimize snippet and using the GA-Optimize snippet in conjunction with GTM specially using GTM for the Page View Tag in the case when you rely on one tag to fire the page view on multiple domains

    • Mobile sessions are only one example, of course. You can get insight from other metric shares like these:

  • kimpimdpo

    Thanks Sean!
    I’m sorry if this question has already been here.
    The site has a built-in GoogleForm (in the iframe).
    Is the triggering of the GTM trigger on the “Send form” event possible? The GoogleForm ID is known.
    How to set up a trigger and a variable?
    Attempts to use the built-in variable GoogleForm are unsuccessful.

    • Sean McQuaide

      Maybe try this article we wrote in 2015 about tracking iframes.

      http://www.lunametrics.com/blog/2015/10/21/google-analytics-iframes-form-submissions/

      • kimpimdpo

        “For this to work, you need to be able to add unadulterated code on the iframe and the page the iframe is inserted on. If you’ve got a third-party service you’d like to track, and you can’t insert code snippets on their pages, this will not work and you’re out of luck. If you can’t add code to the iframe, you can’t measure interactions with it, period. Do not pass GO, do not collect $200. Sorry”.

  • Iliana Cherniss

    Question: If I use tag manager to fire pageview tags do I still need to include this line in the analytics-optimize snippet? ga(‘create’, ‘UA-123456-1’, ‘auto’);
    The reason I ask is I am using a GTM variable to populate the GA Tracking code for pageviews. I have 2 Analytics properties for the same website but depending on the section of the website, the pageview hits go to different analytics properties.

  • Eric Barnes

    Google ‘recommended’ method says that it “reduces page load times”.
    Does anyone how much it affects the site speed?

    • Petr Havlík

      Eric I am currently testing this and will let you know about the results.

      • Eric Barnes

        Awesome! Looking forward to seeing the results!

      • ClaudiuD

        Hey @petrhavlk:disqus,
        Any luck with the experiment? Any results you might want to share?
        Thanks

  • Ben Zitney

    We currently use VWO for split testing our clients sites. I’m interested in trying Google Optimize out, but it seems like it might be a lot more work to implement than VWO if we need the client to install additional scripts & modify GA tracking. Are there benefits of using the free version of Google Optimize that make it better than using VWO, besides the price?

  • Jake

    Hi,

    Great article, can I check I understand this correctly? Is this a combination of Google’s ‘recommended’ in-line option (https://goo.gl/OzZH7g) and Google’s ‘alternative’ method (https://goo.gl/Y0Zkaj)? Optimize is implemented inline and pageview/core tracking is implemented via GTM?

    Thanks

    • Sean McQuaide

      Correct. The inline Optimize code handles page hiding, targeting, and loading the experiment, but GTM is still used to implement GA tracking.

  • Klaus

    Hi thanks for the guide. Is it correct that if you install the Analytics-Optimize script you dont need to change your “normal” analytics page view scripts in GTM? So you can leave your normal GTM setup as it is?

    • Sean McQuaide

      Hi Klaus, You are correct. You do not need to change the GA pageview tag in GTM.

  • Divya Paryani

    Hi Sean McQuaide,

    Thank you so much for this guide. If we place ga(‘create’, ‘UA-123456-1’, ‘auto’) in the code on website. It will create a separate tracker, will it have any negative impact on the tracking data of my website? Will there be any new sessions getting created because of this or any extra events getting pushed into the data layer?

    • Sean McQuaide

      HI Divya, This implementation will not send duplicate pageview hits if you are using GTM to implement GA tracking. But be aware, when you get the analytics-optimize snippet from your Optimize account, it will have a line that looks like this: ga(‘send’,’pageview’);

      If you’re using GTM to implement GA, then removing that line of code will prevent you from duplicating that hit.

      • Divya Paryani

        Hi Seam McQuaide,

        Thank you so much for this information. I have one more query regarding ga(‘create’, ‘UA-123456-1’, ‘auto’) command that we use in the code. With this line of code placed in my code snippet two trackers will be created, i.e, one tracker will be created by GTM and another one will be created by the by this line of code. So will GA create two separate users or will the count of users visiting my website be effected by this line of code?

  • Tanya

    Hi! Thank you for this article! I want to clarify – in this way you don’t use internal Optimize tag in GTM. Is it right?

    • Sean McQuaide

      Tanya, that is correct. You use the inline Analytics-Optimize snippet instead of the Optimize tag in GTM.

  • Danny

    Hey Sean.
    thank you for the details explanation,
    if i understand correctly, does the optimize snippet (both page hiding & analytics optimize) ONLY need to put on the pages we experimenting ?
    or should we add it on every pages?

    • Sean McQuaide

      Danny, it only needs to be placed on the pages that you would like to test. But if you’re passing it to a developer, you might want to have them add it to every page you want to test today and in the future. That way you don’t have to wait for them if you decide to run experiments on another area of your website.

  • Maurice Kindermann

    LOL, great work Google. I just spent days getting Tag Manager setup so I didn’t have to hand code stuff every time I wanted to add a new tag, now I want to add the Google Optimize tag and I have to hand code it. *2 claps*

    • Thomas Hodson

      You can use GTM to deploy Optimize, just not the flicker hiding script.

  • Swati Johri

    Does Optimise overwrite the JS which is loaded at the time of first page load.. what if I want Optimise to run experiment on all JS, including ones load post first page load and are seen when scrolled down?

  • Jessica

    Is Google Optimize experiment data contained within itself? Or does this data also get clumped together and calculated with data from the rest of the site?

    • Sean McQuaide

      Hi Jessica, Optimize experiment data is not self-contained. It is calculated based on GA data. You will see a discrepancy in conversion rates when looking at the two because conversion rate in Optimize is a projection of what might happen if your changes are implemented. The Google Analytics conversion rate is showing you exactly what did happen during the experiment.

      • Jessica Feliciano

        That makes sense. My gut told me that was the case, but I wanted to verify.

        Thank you!

  • LuxaflexAU

    Could you confirm this: I have Google Tag Manager installed, so I follow the link “Google Analytics, Google Optimize, AND Google Tag Manager – Instructions”; it takes me to documentation that tells me to alter the Google Analytics script snippet for Optimize, then insert that edited script into the header of the site. However, I’ve gotten rid of that Google Analytics script – it’s been replaced by the Google Tag Manager script and a pageview tag within GTM.

    So what I need to do is add the Optimize ‘require’ line to my previously deleted GA script, remove the send pageview line from that GA script, then put the GA script back into the header, along with the existing GTM script which had previously replaced the GA script? It’s not going to be sending two lots of data to GA with both the GA script and the GTM script in the header, because that pageview line in the GA script is gone?

    It’s just not very clear in Google documentation, which doesn’t surprise me – writing clear instructions is not a Google thing.

    • Thomas Hodson

      Hey LuxaflexAU, installing Optimize with GTM is super fast. Highly recommend checking out Measureschool on YouTube and following Julien Juenemann for all things GTM related.

      You don’t actually have to alter the snippet at all, that documentation from Google is outdated. Also, if you’ve deployed GA via GTM, you shouldn’t also be using traditional script implementation: you’ll be muddying your data.

  • Sean,

    Playing around with it live now. But if I just want to do an AB test where “did this button text drive more clicks than this button text” it doesn’t look like I can do that…am I missing something key here?

    • Sean McQuaide

      Hi Andy, Making a text change is simple. Right click the button element, then select “Edit text”. After that you’ll need to set up a click event for the button, then set up an event based goal in GA. The goal you set up will allow you to track those button clicks as a test objective.

  • Michael Holtzman

    Hello, Thanks for the write-up and trying to explain the integration between these products. I have a question that relates to this implementation with SPA sites built with a framework like angular.

    We currently have the following set up:
    On the index page we load the page hiding snippet (using the GTM ID) and the Google Tag Manager snippet. Inside GTM we are using two GA tags (events and pageviews) with javascript dataLayer event triggers as defined in this set up guide: https://github.com/angulartics/angulartics#for-google-tag-manager-new-interface

    We then integrated Optimize as a new Tag and configured it to fire before the Pageviews Tag using Tag sequencing as defined in this Google Answers doc: https://support.google.com/tagmanager/answer/7164339?hl=en

    Is this equivalent to the set up define here? Or how would we modify (or enhance) the set up in this article to work with SPA site?

  • This is really clear – thank you. The one thing I don’t see represented explicitly in your sample code is the data layer (though I see it’s commented). I’d just like to confirm: the proper order for implementation is:
    Data Layer code
    Optimize Page Hiding Snippet
    Analytics-Optimize Snippet
    Tag Manager Container code

    Is that correct?

  • Jonathan Schwarz

    Thanks a lot for this well explained guide throug implementing Optimize. I am just wondering that you mention for example, jQuery and JavaScript used to target an Optimize variant should be placed before the analytics-optimize snippet. But in your exemplary html snippet jQuery is referenced as the last exemple within . What do you recommend?

  • Albert

    Great article! thanks a lot for this. I’m a bit anoyed by the fact that I only seem to be able to do an experiment based on URL path, while I’d like to do it based on events. Is this possible? Whats the best way to set it up?

    Alternatively, does anyone know if I can introduce variables in the url? our architecture is something like: /bookings/{{guid}}/pay

    Thanks

  • Brian

    Sean, Google’s documentation mentions that if you have made any modifications to your GA tag you need to make those some modifications to your Analytics-Optimize snippet but I notice you didn’t mention that.

    Are we safe to not do that?

    My GA tags have tons of modifications in GTM and I’d rather not try to re-build them in Javascript to put on the page.

  • Audrey Chou

    Hi Sean, thank you for posting this. I successfully installed Google Optimize via Google Tag Manager and have launched experiments. However, I discovered there’s data discrepancy issue and I can’t find any solution after googling and looked into everywhere, and it seems like a lot of people running into the same issue. I discovered that a goal I set up (an event) is showing conversion numbers in Conversions but not in Events or Experiments. I set up event tracking for this experiment I’m running and I see no conversions in Optimize and Top Events. But when I look at Conversions, I do see some conversions. Really hope I can pick your brain on this. What could be the issue? I followed everything mentioned in the article except the page hiding snippet.

    Thank you and I look forward to your reply!
    Audrey

  • Question about the Page Hiding Snippet that I havn’t been able to figure out. How does it behave when we have no experiments running? It would be easiest to implement the google optimize containder requirement and the page hidin snippet permanent. But have the page hidden until some sort of handshake between our site and google optimize is done is not ok.

Contact Us.

LunaMetrics

24 S. 18th Street, Suite 100,
Pittsburgh, PA 15203

Follow Us

1.877.220.LUNA

1.412.381.5500

getinfo@lunametrics.com

Questions?
We'll get back to you
in ONE business day.