Get in touch!
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
.png)
September 20, 2022
Update: as of September 2023, Google Optimize has been deprecated. For alternative platforms, consider Convert, AB Tasty, Optimizely. Schedule a call with CXperts to find out which platform might be right for you.
As you may already know, Google Optimize is Google’s A/B testing platform, allowing users to test variants of web pages and see how they perform against specific objectives. As a free platform, Google Optimize is great for marketers, business owners, social media managers, and others to A/B test!
First, there are some prerequisites for experiment creators:
1. Google Analytics (the measurement platform Optimize references) must be installed on your website
2. A browser that supports CSS3 selectors (almost every current browser supports Optimize, but Google recommends Chrome)
Moving on, you can start by creating your Optimize account and container by:
1. Signing in to optimize.google.com
2. Creating an account and assigning an account name
3. Agreeing to the Optimize Terms and Service
4. Creating a container for the domains you’ll be testing on
Then you will need to link the Optimize container to a Google Analytics property: both Google Analytics 4 properties and Universal Analytics properties will work in this instance.
Installing Optimize on your website is as simple as adding a snippet of code to your website. There are two different methods to install Optimize with a snippet - how you install depends on how your website is set up and your preferences. Before we begin, keep in mind a couple installation practices.
For optimal performance, place the Optimize snippet at the top of the <HEAD> tag on every web page you wish to optimize.
The only items that should appear above the Optimize snippet are:
• Any dataLayer initialization code. Note: dataLayer variables should never be placed below the anti-flicker snippet
• Any scripts that declare JavaScript variables, functions, or set cookies you use in Optimize, like jQuery or JavaScript libraries used in implementation or targeting.
• The optional anti-flicker snippet, when used to mitigate page flicker.
The Synchronous Optimize snippet ensures the best performance for your A/B experiments and web personalizations. It prioritizes the number of users captured in a variant and has minimal impact on your website’s rendering speed. In other words, the synchronous snippet allows your website’s users to see your experiment variants in the most efficient manner.
To install, place the Optimize snippet (sync) shown below at the top of the <head> tag on all of the web pages you want to experiment on. If you are unsure about what pages to test on, the general rule of thumb is to place the snippet and test on the strongest-converting pages first to ensure fast results.
<scriptsrc="https://www.googleoptimize.com/optimize.js? id=OPT_CONTAINER_ID"></script>
*Make sure to replace the OPT_CONTAINER_ID with your Optimize container ID.
The asynchronous Optimize snippet (async) ensures the least impact on rendering speed. If you prioritize page load speed, this is the snippet for you!
To install, place the Optimize snippet (async) below at the top of the <head> tag on all of the web pages you want to experiment on. Again, if you are unsure about what pages to test on, the general rule of thumb is to place the snippet and test on the strongest-converting pages first to ensure fast results.
<scriptsrc="https://www.googleoptimize.com/optimize.js? id=OPT_CONTAINER_ID"></script>
*Make sure to replace the OPT_CONTAINER_ID with your Optimize container ID.
The anti-flicker snippet is an additional snippet that should only be utilized when Optimize users notice a flicker in their experiment. A flicker occurs when a web page is briefly shown in the default style before being modified by an external CSS sheet (like when we experiment). We solve this issue by installing the anti-flicker script in the <HEAD> directly before the GO snippet, temporarily hiding the web page so our experiment loads without noticeable page flicker.
DO NOT USE THE ANTI_FLICKER SNIPPET IF:
• your Optimize snippet isn't at the top of the <HEAD>;
• you haven't observed page flicker;
• you use activation events that don't fire changes on the first load;
• you cannot add the anti-flicker snippet directly on your webpage
To install the anti-flicker snippet:
1. Copy the below code and add it directly above the location of the Optimize snippet on every page you plan to test on (make sure to keep it below any dataLayer declaration, if used).
2. Replace CONTAINER_ID with your Google Optimize Container ID, if you are using GTM to deploy Google Optimize, use your Tag Manager ID
<HTML>
<HEAD>
<!-- anti-flicker 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,
{'CONTAINER_ID':true});</script>
Google Optimize is also available through GTM, although it is always recommended to install with the synchronous or asynchronous optimize.js method.
Prerequisites
Before you can install the snippet on your website, you must have:
• A Google Analytics account and property
• A Google Analytics property installed on your website
• A Google Tag Manager container installed on your website
• A Google Optimize account and container linked to the Google Analytics property
You also need the ability to edit your website source code directly or make changes in Tag Manager.
1. Sign in to Tag Manager and select the same account you set up for Optimize.
2. Click Tags > New, then select Click Tag Configuration > Google Optimize.
3. Enter your Optimize container ID, which is under Container details in the container settings in Optimize.
4. Save the tag without triggers.
5. Publish your Tag Manager container for the changes to take effect.
Sources:
https://support.google.com/optimize/answer/6211921
https://support.google.com/optimize/answer/9914750?hl=en&ref_topic=11608543
https://support.google.com/optimize/answer/7100284
.png){kind=logo}
