How-To

How to Implement Google Optimize on Shopify [Updated for 2019]

See how to launch Google Optimize with Shopify in minutes.

Updated April 10th

[This has been updated to work with the new gtag.js version]

Google Optimize is Google’s version of Optimizely, Monetate, VWO, among others that allow you to test different variations of pages, content, and UX and measure how they perform against KPIs that you define.

For example you could test the following on your store:

  1. Hiding banners on mobile
  2. Changing position of reviews or other elements on product pages
  3. Changing text or banners based on Google Ads Campaigns
  4. Inserting new content onto landing pages

You can test layouts changes, layout additions, features, text, colors, links, etc through a/b, multivariate, or redirect (two completely separate pages) tests.

These are very simple examples but testing (even small changes) can really help you learn how your customers behave to ultimately boost conversion rates.

What’s even better is the ability to set targeting rules based on a user’s behavior, key traits identified through your own dataLayer (you are using our GTM Suite app for Shopify, right?!), Google Analytics, and even based on specific AdWords campaigns.

Targeting Rules in Optimize

Testing + Segmentation == Winning formula!

On to implementing….

Implementing via GTM & Shopify Admin

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.

Step 1: Create and Configure Optimize Account

  • Go to: https://optimize.google.com/ and create a new account
  • Add a new container
  • Click Install Optimize and copy your Optimize container ID

optimize-container-id

When you start a new experiment you will also need to link your new container to your Google Analytics view (here’s a guide for Google Analytics best practices setup)

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:

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 (ex 1000 would be 1 second).

Copy this code below and do two things:

  1. Update the GTM-xxxxxx to your Google Tag Manager container ID. Yes that is correct – this needs to be your GTM container ID.
  2. Adjust the 4000 if you would like (to start, I would 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 if you are using our Google Tag Manager Suite app (which implements GTM and dataLayer for Shopify):

anti-flicker-with-gtmsuite

Or if you are not using our GTM Suite App then it should look like this:

anti-flicker-snippet

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

A few caveats on this step ^

  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)

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 that everything is working pretty quickly.

I ALWAYS use the preview options before launching any test to verify everything works as expected and I’m not introducing bugs to my site!

I recommend using 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 also may 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 I don’t have an answer for this one unfortunately 🙁

If you have other issues please comment below!

DIY eCommerce UX Audit

Download our FREE 117 point UX audit that you can apply to your own website.

Advanced Tips

If you’re utilizing a custom dataLayer and/or other JavaScript as part of running tests, Google recommends the following order to ensure everything functions as you expect:

  1. Any JavaScript (e.g. jQuery) that you wish to use in Optimize experiments.
  2. Initialization of any variables needed for targeting (data layer, JavaScript, cookies, etc).
  3. Page-hiding snippet.
  4. Modified Analytics tracking code with Optimize plugin.
  5. Tag Manager container snippet.
  6. Other JavaScript, trackers, and ad tags.

Happy testing!

Related Shopify “How To’s”:

  1. How to A/B Test Shopify’s Checkout with Google Optimize
  2. Facebook Campaign testing with Google Optimize
  3. GTM Data Layer, Triggers, and Conversion Event Tracking for Shopify

Our best, right to your inbox.

Get exclusive access to resources, news, and tips to help grow your business.

We respect your inbox.


Brad Redding

Brad, co-founder of Elevar, has lived in eCommerce for over 12 years. He's helped design, build, and optimize over 100 websites in his career. From new retail startups to well-known brands like Le Creuset, Signature Hardware, Rebecca Minkoff, Char-Broil and more, he specializes in data analytics and conversion optimization to help achieve business goals.

  1. Hi Brad,

    Thanks for this, really helpful. I’ve got a question about Step 2.

    Your Optimize plugin is “ga(‘require’, ‘GTM-NGHLX97’);”

    But when you copy it in your Shopify admin panel, there seems to be other lines of code. For instance: “(function(w,d,s,l,i)…”

    I’ve got no additional GA Javascript at the moment. Am I fine to just add my version of ga(‘require’, ‘GTM-NGHLX97’); ? My addition GA script will litterally be:

    [script](‘require’, ‘GTM-NGHLX97’)[/script]

    1. Thanks Max. Yes, you can just copy the exact snippet from Google Optimize and paste into your additional scripts configuration. The additional lines of code in my screenshot is GTM.

  2. Hello Brad,
    I installed Google Tag Manager on Shopify using your tutorials How to Implement Google AdWords gtag.js on Shopify, thanks fo that.

    I’m now trying to install Optimize following this tutorial but I still receiving an errors regarding a mismatch with “allowLinker”.

    There is no ways I can get rid of it.

  3. Hi Federico,

    Thanks for the note, this is something new that I’ve started to see as well. I’ve just added a screenshot of how to resolve this issue in the post above.

  4. AWESOME ARTICLE!!! Cheers for that!

    Can you advise on how to overcome revenue tracking? This is the biggest obstacle with testing on Shopify….

  5. Thanks for the video!
    I keep getting an issue “Uncaught SyntaxError: Invalid or unexpected token” for the ga(‘require’) line, despite following your instructions exactly.
    And Google Optimize doesn’t recognize the installation.
    Do you know what could be wrong?

    1. Hi Niklas – can you send a screenshot of your GA additional script field settings? Although, it looks like you got it worked out onsite already!

  6. Hello Brad

    the problem i’m getting is the “AllowLinker” issue – i have also set the variable of GA in GTM (Fields to set)to allowLinker -> True, but still all my tags in GTM fire with AllowLinker – > False

  7. Hi, thanks for this great post ! Big big value 🙂 When I try to edit on mobile version I have this error message : “This page uses security features that are not compatible with the Optimize for Mobile editor. For more information, see our security requirements . ”

    I tried to follow the steps but nothing changed.. Any ideas ?

  8. Thank you for the awesome post! We have everything set up properly, however, whenever we go into the editor we get the following error:

    This page uses security features that are incompatible with the Optimize editor. For more information, you can check out our security requirements.

    Any idea how to fix this?

  9. Thanks, Brad. Was wondering if the error with the security settings is an warning or actually prevents Google Optimize from working on the site. Trying to see decide it it is even worth it to go down this path if it isn’t going to work anyways. May try using some other software.

Leave a Reply

Your email address will not be published. Required fields are marked *

Related Articles