How-To

How to Implement Google Optimize on Magento

See how to implement Google Optimize and the page flickering snippet on Magento 1 and Magento 2

How to Implement Google Optimize on Magento

This guide shows how to implement Google Optimize on both Magento 1 and Magento 2 – in minutes.

If you aren’t familiar with Google Optimize, it as the free a/b testing tool from Google that is an alternative to Optimizely, Monetate, VWO, among others. There is also a 360 enterprise version that unlocks additional features.

I’m a big fan of the free version and actively use it on many existing Magento sites.

Step 1: Create Optimize Account

  • Go to: https://optimize.google.com/ and create a new account
  • Add a new container
  • Link your new container to your Google Analytics property

Step 2: Implement the Google Optimize Plugin

In your Optimize setup you will be asked to implement the Optimize plugin (shown below in red).

optimize ga plugin

You have two options to implement this:

Option a) Via Google Tag Manager

If you have Google Tag Manager implemented for your Google Analytics pageview tracking then go to Google Tag Manager > Tags > Create New Tag > Google Optimize Tag

You’ll then need to configure your tag to include the following:

  1. Your Google Optimize container ID
  2. Your Google Analytics variable settings
  3. Set tag firing priority: this will differ based on your own GTM account but basically the higher the # the earlier this tag fires in order of all other GTM tags (I usually keep this pretty high!)
  4. Custom tag sequencing – Setup tag: this should be your sitewide Google Analytics pageview tag. When assigned this means your Google Optimize tag will fire right after your Google Analytics tag.

how to implement google optimize with magento

Once that is all set then you can set your trigger of All Pages and this step is complete!

Option b: Modify your Google Analytics tracking script

If you are using the native Google Analytics pageview tracking then this will require a small change to your tracking script which will require a small code deployment.

All you need to do is add your Optimize plugin to your GA snippet shown here:

modify ga script for google analytics tracking

This needs to be there on every page just like your GA script.

Step 3: Implement Page Flickering Snippet

This is a recommended step to help minimize “page flickering” that you might see when testing page variations. This code also helps ensure that users on slow connections have a better experience by only showing experiment variants when the Optimize container loads within the set timeout (4 seconds).

Again you have a few options to implement this.

Option a) In Magento Admin

Within Google Optimize, you need to copy your page flickering snippet in step 2 of setup:

And then paste this into your HTML Head scripts configuration setting.

Here’s where this is in Magento 1:

System > Configuration > General > Design

google optimize page flickering magento 1

Here’s where this is in Magento 2:

Content > Design > Configuration > Select Your Theme/Store > HTML Head:

google optimize page flickering magento 2

A few caveats on this step ^

  1. If you’re a lone wolf and editing code in the admin is the norm then you should be fine.
  2. If you’re not a lone wolf and you have a team, agency, or someone else who manages your codebase then consider having them commit this change for you (inserting at top of <head>). While not mandatory, this is better practice to help catch potential bugs when testing on a non-production instance.
  3. Test on a staging site first (always).
  4. If you have full page cache or other caching mechanisms in place then this might not appear until cache is cleared.

Option b) Add Page Flickering Snippet via GTM

A safe way to implement the page flickering snippet is via Google Tag Manager.

google optimize gtm setup for magento flickering

  1. Create New Tag > Custom HTML Tag Type > Copy the page flicker snippet from Google Optimize into the custom HTML section
  2. Change the “GTM-” to be your Google Tag Manager Container ID instead of your Google Optimize ID as shown below
  3. Set a tag sequence where Google Optimize fires AFTER this page flicker snippet tag
  4. Publish the new tag

Option c) Add to your theme

If during step 2 you had to use option b to implement the Optimize plugin then you should also have the page flickering snippet added right above the Google Analytics tracking code.

The reason is you need to ensure the page flickering snippet always fires BEFORE your actual Google Optimize plugin.

Step 4: Verify Google Optimize is Working

Create a new test in Google Optimize (it can be an A/A test where your variation does not have any changes) to verify it’s working.

When you publish your new test then Optimize will likely give you a validation message that everything is good or if there are errors detected.

Once it’s live, open up a website URL that is included as part of your experiment and then go to your experiment detail page and you should see active users:

Active Users

Give it a few minutes to propagate if you don’t see any data right away.

That’s it!

You’re now ready to create an experiment in Google Optimize and on your way to becoming a conversion optimization expert :).

Advanced Tips

If you’re utilizing a custom dataLayer and/or other JavaScript as part of running tests, Google recommends the following order to ensure everything functions as you expect:

  1. Any JavaScript (e.g. jQuery) that you wish to use in Optimize experiments.
  2. Initialization of any variables needed for targeting (data layer, JavaScript, cookies, etc).
  3. Page-hiding snippet.
  4. Modified Analytics tracking code with Optimize plugin.
  5. Tag Manager container snippet.
  6. Other JavaScript, trackers, and ad tags.

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:

allowLinker set to true for google optimize

Happy testing!

Automated Google Analytics Insights

See how Elevar automates insights to create faster data-driven conversion testing ideas.

Related Magento “How To’s”:

  1. Lessons learned migrating from Magento to Shopify
  2. Landing page testing with Google Optimize
  3. Combine GTM Product IDs for Facebook Conversion Tags on Magento

Our best, right to your inbox.

Get exclusive access to resources, news, and tips to help grow your business.

We respect your inbox.


Brad Redding

Brad, co-founder of Elevar, has lived in eCommerce for over 12 years. He's helped design, build, and optimize over 100 websites in his career. From new retail startups to well-known brands like Le Creuset, Signature Hardware, Rebecca Minkoff, Char-Broil and more, he specializes in data analytics and conversion optimization to help achieve business goals.

Leave a Reply

Your email address will not be published. Required fields are marked *

Related Articles

Talk with Us

Please complete the form to request a demo, discuss our solutions, or to just say hi!



Some of our clients