Guides — cro

A/B Testing Server Side using Shopify and Google Optimize

Posted by Cameron Shaw on

A tutorial to set up server-side google optimize A/B tests in Shopify. Overview: We want to manually put people in the experiment and serve two different experiences for a page, but still use google optimize to track the results. Server-side A/B tests in google optimize are possible. This guide assumes you're using the automatic implementation of Google Analytics, and adding the google optimize module through the additional javascript section in Online Store > Preferences. The only challenges here are we need to determine whether a visitor is in the control group or the variant group prior to the google analytics...

Read more →

Google Optimize + Shopify, Sitewide Implementation Setup Guide

Posted by Cameron Shaw on

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...

Read more →

How to install Google Optimize in Shopify for optimal performance

Posted by Cameron Shaw on

How to install Google Optimize in Shopify for optimal performance

Background & Motivation Google Optimize is the new A/B and optimization testing platform, released by Google in April 2017 to the public (coming out of a private beta for Optimization360). Google Optimize requires an additional module be added to a standard GA tracker in order to detect when experiments should be run, and inject the code necessary to change the page to the variant of the experiment. So, the timeline looks like this: [Page Load]...[GA ready]...[Optimize ready: experiment [y/n]].. if(y) { add code, then: show }, else { show } Generally the Optimize code is added to the page a...

Read more →