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:
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.
Testing + Segmentation == Winning formula!
On to implementing….
There are two primary methods to implement Google Optimize on Shopify:
- Implementing via Shopify Admin Only (recommended)
- 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
- Go to: https://optimize.google.com/ and create a new account
- Add a new container
- Link your new container to your Google Analytics view (here’s a guide for Google Analytics best practices setup)
Step 2: Modify your GA Code in Shopify
Copy this snippet that you’ll find within Optimize setup:
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).
And then include this at the top of your theme.liquid file as shown here*:
A few caveats on this step ^
- If you’re a lone wolf and editing code in the admin is the norm then you should be fine.
- 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.
- 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.
- Create New Tag > Custom HTML Tag Type > Copy the page flicker snippet
- Change the “GTM-” to be your Google Tag Manager Container ID instead of your Google Optimize ID as shown below
- Publish the new tag
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.
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:
Automated Google Analytics Insights
See how Elevar automates insights to allow for faster data-driven conversion testing ideas.
- Page-hiding snippet.
- Modified Analytics tracking code with Optimize plugin.
- Tag Manager container snippet.