How-To

How to Implement Google Optimize on Shopify

See how to launch Google Optimize with Shopify in minutes.

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, here is a simple a/b test that is hiding a category banner on mobile devices only:

google-optimize-ab-test-on-shopify

This is a very simple example, albeit an important step for this Shopify store owner who is driving a significant amount of traffic to collection pages on mobile.

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

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 app for Shopify, right?!), Google Analytics, and even based on specific AdWords campaigns.

Targeting Rules in Optimize

Testing + Segmentation == Winning formula!

On to implementing….

There are two primary methods to implement Google Optimize on Shopify:

  1. Implementing via Shopify Admin Only (recommended)
  2. Implementing via Google Tag Manager & Shopify Admin

DIY eCommerce UX Audit

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

Implementing via Shopify Admin

Step 1: Create Optimize Account

Step 2: Modify your GA Code in Shopify

Copy this snippet that you’ll find within Optimize setup:

optimize ga plugin

Then paste this into Shopify > Admin > Sales Channels > Preferences > Additional GA Javascript:

shopify-optimize-snippet

Yes, you can include this below a GTM script. See how to implement the GTM tag with Shopify here.

Step 3: Add Page Flickering Snippet to Shopify Admin

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

This code 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). You can modify this 4000 to something lower if you prefer (I usually set to 3000 which is 3 secs).

Copy this:

And then include this at the top of your theme.liquid file as shown here*:

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 staging site first (always).

*This placement may need to be moved depending on other dataLayer/tagging you have onsite. See advanced tips below..

Implementing via GTM & Shopify Admin

In this method, you’ll follow the same step 1 and 2 from previous version except follow this alternative option for step 3.

Alt Option – Step 3: Add Page Flickering Snippet via GTM

My preferred way to implement the page flickering snippet is in the previous step (via theme). But there is an an alternative way to implement the page flickering snippet is via Google Tag Manager.

  1. Create New Tag > Custom HTML Tag Type > Copy the page flicker snippet
  2. Change the “GTM-” to be your Google Tag Manager Container ID instead of your Google Optimize ID as shown below
  3. Publish the new tag

GA Optimize Page Flicker

Verify Google Optimize is Working

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.

google-optimzie-preview-options

 

Once you’ve validating everything then that’s it!

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

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

Automated Google Analytics Insights

See how Elevar automates insights to allow for faster data-driven conversion testing ideas.

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

Leave a Reply

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

Related Articles

Talk with Us

Please complete the form to request a demo, discuss our solutions, or to just say hi!



Some of our clients