How to Implement Google Optimize on Shopify in 2022
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 you could test the following on your store:
- Hiding banners on mobile
- Changing position of reviews or other elements on product pages
- Changing text or banners based on Google Ads Campaigns
- 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 data layer (you are using our Data Layer app for Shopify, right?!), and even based on specific AdWords campaigns.
Testing + Segmentation == Winning formula!
On to implementing.
Implement Google Optimize via Shopify Theme
As of 2022, we no longer recommend implementing Google Optimize via Google Tag Manager due to:
- Performance issues to end user
- Maximizing the % of users that are bucketed into the experiment
- Controlling async vs sync loading of the JS (for site speed)
Here is how:
Step 1: Copy Google Optimize Snippet from Settings
Inside of Google Optimize, you can find your site’s script in the settings (top right corner of page).
Copy this code:
Step 2: Decide on Async vs Sync Script
Google gives you control over this setting in your script. Here is their basic decision grid:
Step 3: Implement Script in Shopify Theme
Now head to your Shopify theme > theme.liquid template.
Paste the script from step 1 at the very top of the file — including above the Elevar or any other data layer snippets:
Notice how I added “async” to my script. You can add this based on your decision from step 2.
This can be sync or async.
Once you have then you’re ready for testing!
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.
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 :).
- AllowLinker mismatch
- 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:
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.