Google Optimize + Shopify, Sitewide Implementation Setup Guide

Google Optimize Implementation

After much experimentation and testing, here is the full setup we use to deploy Google Optimize with Shopify:

Performance considerations: the flicker-prevention script works by hiding the full page content until the optimize module has injected its css or otherwise completed any modifications to the page based on a matching experiment variation. Without this script (technically, two scripts, a css style rule and a javascript to listen for an event and toggle it), the page will load and render, and then the changes from the experiment quickly applied, resulting in the "flicker" which gives the name. Now, this may or may not be an issue depending on how fast your site is already, where the experiment is running, and what types of changes it makes. Generally the home page is the slowest loading on an ecommerce site (unfortunately - for both content reason and due to first load populating local caches), and it may suffer the worst from the flicker prevention (async-hide) script. For this reason, we recommend wrapping the async hide in a conditional tag, at least removing it from the homepage, if not other pages where experiments aren't being run. 

The Async Hide script with a conditional liquid wrapper looks like this: 

{% unless template == 'index' %}
<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-XXXXXXX':true});</script>
{% endunless %}

Inclusion of the optimize module is handled by Shopify. Through the Shopify Admin, go to Online Store > Preferences, and insert the line that looks like this:

ga('require', 'GTM-XXXXXXX'); 

In the box that says "Additional Javascipt". This adds the Google Optimize module to the Google Analytics Tracker initialized by the Shopify script loader (which also handles the injection of app scripts).

Experiment Configuration

While optimize can inject arbitrary javascript, we've found that most of the experiments we'd like to run can be handled just by CSS. The trick is that the experiments are configure or built out with Liquid and have their own markup, and then the optimize css simply toggles which set of the markup is shown.

For example, an experiment to show a message on the product page if the product qualifies the customer for free shipping, might be along these lines:

<div class="free-shipping-offer">
{% if product.price | money_without_currency | floor > 48 %}
<p>Qualifies for <strong>free shipping!</strong></p>
{% endif %}
</div>

 The css which you should include to initialize it (have this everywhere, or shown by default on the page where the experiment will run):

.free-shipping-offer {
display: none;
}

The css which should be added by optimize to toggle it on would be:

.free-shipping-offer {
display: block;
}

This way, when the experiment runs on the page, if it decides to show the user the variant which shows the shipping message, it switches from display:none to display: block and the message is shown. Note that if the product was less than the threshold, no message will be shown (even though it's included in the experiment and will be tracked as a variant).