How to Implement Google Optimize via GTM & Shopify Admin

See how to launch Google Optimize on Shopify in minutes.

With the latest change to Google Optimize moving to the gtag.js version there is really only one way to implement Google Optimize on Shopify: implementing the Optimize tag in Google Tag Manager and the page hiding snippet inside of Shopify.

Here are the required steps for the full implementation:

Step 1: Create and Configure Optimize Account

Step 2: Create Google Optimize tag inside Google Tag Manager

Step 3: Add Page Flickering Snippet to Shopify Admin

Step 4: Verify Google Optimize is Working w/o Flicker

Installation Walkthrough - Start Here!

We suggest watching this video first and then follow the detailed steps below to successfully install implement Google Optimize on Shopify.

 

 

Step 1: Create and Configure Optimize Account

Optimize

When you start a new experiment you will also need to link your new container to your Google Analytics view (Google Analytics Best Practices Setup Guide)

 

Step 2: Create Google Optimize tag inside Google Tag Manager

Next, you’ll need to head over to Google Tag Manager > Create New Tag > Select Google Optimize tag type (it’s a built-in tag).

Then take your Google Optimize container ID you copied in the previous step and paste into your tag settings here:

optimize-tag

You will also need to select a Google Analytics variable to assign to the tag. Please be sure that you have allowLinker set to true in one of the Fields to Set settings here:, 'Skip to step 3'

allowlinker-true

Once you save this tag then you are good to publish!

Step 3: Add Page Flickering Snippet to Shopify Admin

This is a recommended, but not required, step to help minimize “page flickering” that you will see when testing page variations.

Basically what it’s doing is preventing anything from displaying on the page until the variation is ready to display.

Pros: Users never see a flicker (i.e. the page changing)

Cons: it can feel like it slows down your site

This snippet also helps ensure that users on slow connections have a better experience by only showing experiment variants when the Optimize container loads within the set timeout (4 seconds).

If it’s not ready within 4 seconds then Optimize stops and the page loads as normal.

You can modify this 4000 to something lower if you prefer (e.g., 1000 would be 1 second).

A few friendly reminders:

  1. If you’re a lone wolf and editing code in the admin is the norm then you should be fine.
  2. If you’re not a lone wolf and you have a team, agency, or someone else who manages your codebase and deploys via Slate & Github then have them commit this change for you. Otherwise, if you edit without telling them then this will likely get wiped out on the next production code deployment.
  3. Test on a dev theme first (never do it straight on production) 'Skip to step 4'

Copy this code below and do two things:

  1. Update the GTM-xxxxxx to your Google Tag Manager container ID. 
  2. Adjust the 4000 if you would like (to start, we suggest to leave it here for testing and then you can adjust going forward)
<!-- 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,
{'GTM-xxxxxx':true});</script>

Then paste this at the top of your theme.liquid (and checkout.liquid if on Shopify Plus) directly above your Google Tag Manager script as shown here:

anti-flicker-with-gtmsuite

Save your update (if you watched my video you’ll see I missed this step


Step 4: Verify Google Optimize is Working w/o Flicker

Once you’ve created and launched a new experiment in Google Optimize then you can validate if it is working pretty quickly.

WE ALWAYS use the preview options before launching any test to verify everything works as expected and we're not introducing bugs to my site!

We recommend using the web and mobile previews to ensure your test (and other pages not intended for the test) are working as expected.

Things you need to test:

  1. Google Optimize tag deployed via GTM
  2. Page hiding snippet implemented in Shopify theme AND you are previewing this theme in your browser
  3. Using web (or share) preview on your variation for Google Optimize

google-optimzie-preview-options

Then you should be able to view your test and confirm there is no flicker effect.

You’re now ready to launch an experiment in Google Optimize and on your way to becoming a conversion optimization expert :).

Common Issues w/Setup

  1. AllowLinker mismatch
  2. Security notice that you can’t use Optimize editor with your website

If you are seeing an allowLinker warning and you’ve implemented via GTM then you might need to set your allowLinker to true on your Google Analytics variable > Fields to Set setting:

allowLinker-set-to-true-for-google-optimize

You may also see the security notice which as of now I don’t believe is fixable. This has to do with a server setting that Shopify starting setting on new stores about a year ago. It’s pretty technical but as of now we don’t have an answer for this one unfortunately 🙁

 

Here's the Complete Article about Implementing Google Optimize

 

If you have other issues please email us!

 

Back to Top 🔝