How to Implement Google Optimize on Shopify
One of the best ways to improve online store conversion rates is through conversion rate optimization which involves changing and testing variables to determine what drives more clicks, pageviews, form submissions, and transactions. Although there are many CRO tools on the market to choose from, at Commerce Garage we use Google Optimize. With an easy to use editor, seamless integration with Google Analytics and great reporting makes it a great choice for a/b and multivariate testing. The biggest challenge Shopify store owners face is correct Google Optimize implementation on Shopify. In this guide we’ll walk you through all the steps on how to add Google Optimize to a Shopify store.
Before you begin, you must already have Google Analytics, Google Tag Manager and Google Optimize accounts already created and setup.
The process of Integrating Shopify with Google Optimize is fairly straightforward and can be done in 4 easy steps:
- Add Google Analytics tracking ID to your Shopify Store in Online Store Preferences Section.
- Add Google Tag Manager container with additional ‘ga’ commands to ‘Additional Google Analytics Javascript’ dialogue box in Online Store Preferences Section.
- Add Google Optimize Anti-flicker Snippet to theme.liquid file
- Create and setup Google Optimize in Google Tag Manager
How to Add Google Optimize to Shopify
- Add Google Analytics tracking ID to your Shopify Store by going to ‘Online Store’ then ‘Preferences’
- Add Google Tag Manager container to Additional Google Analytics Javascript. Use the code below but replace container and tracking IDs with your own.
// Google Tag Manager
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({‘gtm.start’:
new Date().getTime(),event:’gtm.js’});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!=’dataLayer’?’&l=’+l:”;j.async=true;j.src=
‘https://www.googletagmanager.com/gtm.js?id=’+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,’script’,’dataLayer’,’GTM_CONTAINER_ID‘);
ga(‘require’,’GOOGLE_OPTIMIZE_CONTAINER_ID‘);
ga(‘create’, ‘GOOGLE_ANALYTICS_ACCOUNT_ID‘, ‘auto’, {allowLinker: true});
When done, it should look like this:
- Add Anti-flicker Snippet to theme.liquid file by going to ‘Online Store’ then ‘Themes’. Click on ‘Actions’ then ‘Edit Code’.
Insert the following Anti-flicker Snippet into <HEAD> section of the theme.liquid file.
<!– 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_CONTAINER_ID‘:true});</script>
- Create and setup Google Optimize in Google Tag Manager:
- Create ‘New’ Tag
- Choose Google Optimize
- Add your Google Optimize Container ID to ‘Optimize Container ID’ field
- Select your ‘Google Analytics Setting’ from the drop down
- Check mark “Enable overriding settings in this tag’ box
- Add Google Analytics Tracking ID variable
- Click on ‘More Settings’
- In Fields to set enter ‘allowLinker’ and set value to ‘true’
- Set trigger to ‘All Pages’
The Google Optimize setup should look like this:
When done, save your tag and Publish your container.
Finally, go to your Google Optimize account and run diagnostic test. You should receive this message if you integrated Shopify with Google Optimize correctly.
