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

See how to launch Google Optimize with Shopify in minutes.

Brad Redding

Brad Redding is the Founder & CEO of Elevar. Specializing in analytics, tracking, GTM, and conversion optimization.

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

Recently, Google has started to recommend that the Optimize snippet be placed at the top of the <head> which allows it to load first and prevents any flicker on the page.

However, if you need to implement the Optimize tag in Google Tag Manager, below is how to do so:

Step 1: Create and Configure Optimize Account

  • Go to: and create a new account
  • Add a new container
  • Click Install Optimize and copy your 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:


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

Step 3: Add Page Flickering Snippet to Shopify Admin

This is a recommended 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, not your Optimize 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),'')};

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):


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


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


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.

  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.

  10. Just wanted to thank you Brad for the sweet tutorial. The “allowlinker = true” really solved my issue hehe. Just curious though, what shared variable would you recommend between Optimize & GA? as of now I’m using a regular Page View trigger, but Shopify do not recommend firing any Page View tags through Tag Manager. Would love to hear your quick thoughts if you have any 🙂

  11. Hi,
    Thanks for this awesome article!
    I am using GTM and receiving allowLinker mismatch error, but having set allowLinker=true in analytics settings variable didn’t solve it.
    I am using the same analytics settings variable also in the Optimize tag so I am having a hard time understanding the source of the mismatch.

    Any help regarding where else allowLinker might be set to false and cause this erorr will be priceless!


  12. Hey there, thanks for this great aritlce, I have google analytics set up on shopify and then just put on google tag manager and optimize. It’s linking appropriately to my analtyics but I get a red error in tag assistant that says “analytics configuration mismatch” under Optimizations. Should I just ignore this error? Thanks!

  13. Hello!

    Thanks for the great article. I am wondering in GTM where you have Google Optimize Tag with trigger on All Page Views. Will this conflict with the Google Analytics tags causing in double count of pageviews reported in GA?

    Thank you for you help.

  14. Pingback: kardinal stick

Leave a Reply

Your email address will not be published.

You may also like