🖇️Compatibility with Google Optimize

While Google Optimize is officially sunsetting on September 30, 2023, many merchants coming from Google Optimize may continue to have both the Optimize tracking script and anti-flicker script installed on their themes when using Shoplift.

Please be aware that Optimize scripts, specifically the Optimize anti-flicker script, will cause adverse interactions with the Shoplift tracking script with regard to page speed, and, in extreme cases, more than double the required time to load and render page content.

This occurs because both anti-flicker scripts leverage a "whiteout" method to hide page content until a response is received from a server to identify if a page is within the scope of a test and redirect accordingly. While Shoplift will dynamically add and remove the anti-flicker component from the Shoplift tracking script depending on whether a test is live or not, Optimize does not. When both anti-flicker scripts are present on a theme, a response from both Google Optimize and Shoplift is required to render the page.

We recommend removing the Google Optimize anti-flicker script from your theme prior to running tests with Shoplift to ensure a consistent and seamless shopper experience when conducting tests.

How to remove the Google Optimize script from your theme

To remove the Google Optimize script from your theme prior to testing with Shoplift, navigate to the Shopify Admin, click Online Store, and click Themes.

Find your live theme, and click the Options button (the three dots next to the Customize button) and click Edit code from the dropdown menu.

In the code editor, find your theme.liquid file from the list of files in the sidebar on the left. This will be located in the Layout folder.

When you've selected your theme.liquid file, the code editor will open that file. Find the Google Optimize script (this will likely be near the top, and will be between the opening head tag (<head>) and the closing head tag (</head>):

<script src="https://www.googleoptimize.com/optimize.js?id=OPTIMIZE-ID"></script>

Highlight the entire script, including the opening <script tag and the closing </script> tag. Delete the script, and click Save.

Some themes will also have the Google Optimize anti-flicker script installed, and you will want to remove that, too. This is typically installed directly above the regular Google Optimize script, and looks like:

<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,
{'OPTIMIZE-ID':true});</script>

As with the regular Google Optimize script, highlight this full script (from the opening <script tag to the closing </script> tag) and delete it.

Once you have deleted both scripts, hit Save and exit the code editor. You are now ready to start testing with Shoplift!

Last updated

Was this helpful?