Installing Optimizely to A/B Test your Bigcommerce Store

If you’re not familiar, Optimizely is a tool that allows you to easily run A/B or split tests on your website. We’ve written previously about A/B testing here and here, but this time, we will focus solely on getting tests up and running using Bigcommerce.

Once you’ve installed Optimizely and configured a few goals, you’ll be able to build A/B tests on any page you desire, while tracking all the important goals of your store.

Step 1: Setting up an Optimizely Account

1.  Create an account with Optimizely if you don’t have one already. The good news is that Optimizely offers a free account for up to 50,000 monthly visits…Woot woot! So, head over to Optimizely, and create a new account.
2.  Log in to your new Optimizely account, and navigate to the “Settings” tab.
3.  Copy your project code snippet. It’ll look something like this:
optimizely-project-code

This tiny javascript snippet is the key to all your A/B testing dreams. Ya see, when you build an experiment in Optimizely and push it live, it packs this snippet with the necessary changes. When a visitor that matches your experiment conditions lands on a page where you have an experiment running, this snippet will either bucket them into the control (your everyday page) or the variation (the page with the changes you’ve made in Optimizely).  It’s a powerful lil’ snippet, so copy it and login to your Bigcommerce store.

Step 2: Installing the Optimizely Snippet in BigCommerce

 

1.  With your Optimizely snippet copied, log in to your BigCommerce account and go to Settings > Design.bigcommerce_design
2.  Click edit HTML/CSS.
bigcommerce_clickedit
3.  Under “Panels in Template” find HTMLHead.html and select it for editing.bigcommerce_htmlhead
4.  Paste your Optimizely snippet below where jQuery is injected.bigcommerce_optimizelysnippet

Make sure to paste this snippet above all other scripts (besides jQuery) in order to avoid content flashing. Content flashing is when the original page loads and then “flashes” to the variation.

Step 3: Checking Installation and Setting up Your  First Experiment

1.  With your project snippet installed, go back into your Optimizely account and create a new experiment.
optimizely-add-experiment
2.  To test that Optimizely is installed correctly, enter any name for an experiment, and simply use your home page URL for this experiment.
optimzely-example-experiment
3.  After the experiment loads, go to Options > Diagnostic Report.
optimizely-options
4.  You should see this message if you’ve installed Optimizely successfully
optimizely-diagnostics
Congratulations, you’ve done it! Now relax, and checkout some of our other posts on A/B Testing.

Picture of Josh Frank

Josh Frank

After several failed attempts to become an extra in the movie, "Drumline" Josh Frank settled into his second choice on the drumline at Michigan State University. He also happened to make it to a few classes that sparked his interest in online marketing. Josh began his journey into the eCommerce world with pro audio retailer Vintage King Audio. Overcoming the fact that he was born with two first names, Josh has lead teams at several successful eCommerce companies. His preferred method of communication is purely in .gif images. He's often said, "If it can't be said with a .gif, it's not worth saying." Josh is the Founder & Head of Optimization at Test Triggers, a monthly A/B testing service. Josh is working with Human Element to bolster their beard credibility, and also something about building A/B tests and skyrocketing client conversion rates.
Share the Post:

Like what you’re reading?

Get access to our newsletter for occasional eCommerce news and insights. Opt out at any time by unsubscribing.