Shero Support

How can we help?


Using Optimizely with Magento

Optimizely is a service that applies A/B testing to an existing website.

In order to use it with Magento, a separate extension is installed.

After this extension has been configured with the correct Optimizely credentials and enabled from the Magento Admin, test variations can be created from Optimizely and implemented on Magento.

To create a variation, log onto and create a new experiment.

Enter the experiment name and Experiment URL.

In this example, I'm going to test on a Product, so I've gone ahead named it so and will input a URL to a specific product.  

Optimizely works best when the page you're testing on gets a lot of hits.  An example of a product that would be ideal to test in this situation would be a sale item or your most popular product.

Once you've decided, click Create Experiment.

It will then take you to the product page via the editor.

From here, you can click and edit elements.
First, we'll add a longer description.

The editor mainly works by clicking an element and editing it. For editing text, we'll just click Edit Element... > Edit Text

Just type in your text, and it will be reflected in the editor. Once you're happy with how it looks, click Done.

You can edit other elements such as color. Let's change the "Add to Cart" button.

This time, we'll click Edit Style.

Change the color by clicking the Color & Background tab...

...And then either enter a hex humber or drag the two circles in the color picker where you want to change colors.  Here, I've changed the add to cart button to red.

You can also add extra images by clicking the approximate location and selecting Insert Image...

...which will then prompt you to enter an Image URL or to Browse your computer.When finished hit done.  Your image may not show up quite where you wanted to, in which case, you would select the image and select Move and Resize.

You can then drag it around and resize it until it's exactly where you like it.

Here is my finished result:

Once you finish your variation, you can then save the project and start the experiment.

Starting the experiment will be almost instantaneous. 

Optimizely will serve the content out to your customers, by default, to everyone, but you can filter an audience too.

Very simply, you can set this at the top right of the experiment.

Click the icon of the group of people, Audience Targeting.

By default, Optimizely targets everyone.  To specify an audience, clickCreate a New Audience.
The first two fields are Name and Description. Fill those out in a way that will help you organize your audiences for future reference.

On the bottom left is the Audience Conditions, which is where you will set conditions dragged over from the bottom right, called Possible Conditions.

Here, I've set this so visitors will be filtered by Browser, specifically FireFox.  If a visitor comes to the page using Firefox, they'll see the experiment.

You might notice the " or" after the first condition and the "and also..." under the box. Here's an example:

In this example, the visitor will be using Firefox OR Google Chrome. Either one of those browsers will include the visitor in the audience.

But only if they are using OS X! So either Firefox AND OS X OR Chrome AND OS X.

Once you've set your audience and your variations, save your progress and then you can click Start Experiment in the top right, and your changes will be deployed immediately.

After your experiment has run for awhile, you can view results from the home page, selecting your experiment and clicking Results.