Use Magento with Optimizely snippet

🚧

Important

The Optimizely plugin for Magento, built by our partner Blue Acorn, is no longer available in the Magento Marketplace.

Implement the snippet

1. Download the extension from <<http://www.magentocommerce.com/magento-connect/optimizely-1.html>>.
2. Copy your Optimizely Snippet. Go to Settings _> Implementation to retrieve the snippet.
   
3. Within Magento, go to System > Configuration.
4. Under the general overview, click the Optimizely tab.
5. Enable Optimizely and paste your Optimizely Snippet into the Optimizely Project Code field.
6. In Magento, navigate to System > Configuration > Advanced > Admin and toggle Allow Magento Frontend to run in frame to no header if you want to be able to load your page in the Optimizely Editor. This option toggles the HTTP header "X-Frame-Options" between "SAMEORIGIN" and no header at all; it affects only whether you can load your page in the Editor, not how Optimizely actually runs on your page.
7. (Optional) If you wish to run revenue experiments, enable revenue tracking on this page. Make sure that the revenue tracking snippet is installed on your site.

Configure advanced targeting using Magento

By default, this plugin creates a JavaScript object on the page which contains price, product type, name and SKU. It's also possible to add additional properties to this object. We can then set up custom JavaScript conditions to track product types, products within a certain price range or whatever you wish.

1. Create an experiment in Optimizely Web Experimentation and make the modifications required within the Editor.

2. Once you are ready to set up the targeting conditions for the experiment, go into Magento and navigate to System > Configuration.

3. Under the general overview, click the Optimizely tab.

4. Scroll down to the section labeled Custom Variables.

5. Choose the variables you would like to use in your advanced targeting from the drop-down menus (N.B. price, product type, name and SKU are included by default)

6. A JavaScript object will be created on your page above the Optimizely snippet called optimizely_custom containing the properties you have selected and their values
   Example:

   var optimizely_custom = {
       "product_name": "flowery shirt",
       "price": 1000,
       "color": "black",
   }
   

7. Return to your Optimizely Web Experimentation experiment.

8. Create an Audience with a Custom Javascript condition.

9. Enter a custom Javascript condition targeting the value you're looking for by following these instructions. This will likely be in the form of nameOfVariable.property === "value to match".

Example

To target all items whose color is black, let's use our example object: 

var optimizely_custom = {
    "product_name": "flowery shirt",
    "price": 1000,
    "color": "black",
}

In the custom JavaScript conditions, enter the following:

optimizely_custom.color === "black"

If the object color is black, this will evaluate to true and the experiment will run.