This article will help you:
  • Set up Optimizely on a Magento site
  • Target audiences based on information in Magento

Customers who use Magento can create experiments and track conversions on their pages by adding the Optimizely snippet to the page(s) in question. One of our partners, Blue Acorn, has developed an Optimizely plugin for Magento and has created an installation video.

Setup

  1. Download the extension from http://www.magentocommerce.com/magento-connect/optimizely-1.html
  2. Copy your Optimizely Snippet (from the Settings tab on the Home page).


     
  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.

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 within Optimizely 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 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.