Custom Events

Use a Custom Tracking Event to tell Optimizely about something that happens on your page.

See our implementation on this Sandbox Page

Objective

Create a custom tracking event and log it to Optimizely using the trackEvent API. Custom tracking events allow you to tell Optimizely about things that happen during a user's visit, that might not be related exclusively to clicks or page views.

This example requires the use of a small amount of Javascript on the tested page.

Final Result

Hypothesis

You want to try to increase the number of people who add a particular item (the "Portable Coffee Reservoir") to their shopping cart. You suspect that giving the item detail page a snappy title will increase conversions in this area. To track conversions, you will fire a custom Optimizely tracking event upon showing the cart.

Testing Page Setup

The tested page (www.optimizelysandbox.com/store) has the following code to enable us to activate this experiment when the cart is shown:

  
    // initialize Optimizely object
    window['optimizely'] = window['optimizely'] || [];

    $("#dialog-cart").on("shown", function() {
    // get the price of the item
    var price = parseFloat($(".grandtotal .price").data("numeric"));

    // send Optimizely revenue tracking call
    window['optimizely'].push(['trackEvent', 'cartShown',
    {'revenue': price * 100.0}]);
    });
  

Note: in the example page, which uses Twitter bootstrap, the "shown" event is fired whenever the cart dialog is shown so we attach to that event. If your framework uses a different event or library you could add the Optimizely API code wherever the logic to show the dialog is implemented.

Steps

1. Log in to your Optimizely account and create a new Experiment with the URL: www.optimizelysandbox.com/store?optimizely_project_id=your project id.
2. Select the title text ("Portable Coffee Reservoir") and choose Edit Element... > Edit Text. Change the text to something more interesting. 
3. If you want, rename the Variation to match the text (click on the "Variation #1" tab > Rename Variation).
4. In the toolbar, click "Set Up Goals". Select "Add a Goal" > "Create a New Goal" and choose "Custom Event" under "What to Track".
5. Name your goal and enter "cartShown" in the "Custom Event to track" field. The name of the Custom Event corresponds to the second argument of the "trackEvent" call in the tested page.
   
6. Click Save, and Save now to save your Experiment. Preview your variation by clicking on the Variation tab, then "Preview".
7. On the Preview page, check the Events tab in the Optimizely Preview pane (at the bottom of the screen). It should look something like this (depending on what other Experiments you have running on your page).
8. Click on "Add to Cart" to show the dialog. In the Events tab, you should see an Event with the description: "Conversion goal "cartShown" was triggered." This shows that Optimizely received the Event and logged it as a goal conversion. Since we associated a revenue value with the goal, Optimizely can also keep track of the revenue from the conversion.

Dynamic Content

Activate an experiment after the page has loaded in order to run a test against dynamically loaded content.

See our implementation on this Sandbox Page

Objective

In this tutorial we are going to show how to create and run an Optimizely experiment that is targeted to activate only when a specific element (a dialog) is shown. This type of experiment is useful in order to test elements that not every visitor sees, without diluting the results with visitors that never see the tested elements. It also allows you to target elements that do not even exist when Optimizely is loaded (for example, those loaded in response to an AJAX request).

This example requires the use of a small amount of Javascript on the tested page.

Final Result

Hypothesis

You want to try to increase conversion on our Shopping Cart. You theorize that defaulting the "Shipping Address" to be the same as billing, and hiding the associated fields, will make the checkout form less daunting. You will use Optimizely to set the default state of the Shipping Address, and track clicks on the "Checkout" button.

Testing Page Setup

The tested page (www.optimizelysandbox.com/store) has the following code to enable us to activate this experiment when the cart is shown:

  
    // a simple map to keep track of Optimizely-specific variables
    // You can use a different name/namespace if you prefer
    var optimizelyFlags = {};

    $("#dialog-cart").on("shown", function() {
    // set Optimizely flag variable to trigger experiment
    optimizelyFlags.cartShown = true;

    // Activate all manual mode experiments
    window['optimizely'].push(['activate']);

    // unset flag
    optimizelyFlags.cartShown = false;
    });
  

Note: in the example page, which uses Twitter bootstrap, the "shown" event is fired whenever the cart dialog is shown so we attach to that event. If your framework uses a different event or library you could add the Optimizely API code wherever the logic to show the dialog is implemented.

Steps

1. Log in to your Optimizely account and create a new Experiment with the URL: www.optimizelysandbox.com/store?optimizely_project_id=your project id.
2. Click on "Interactive Mode" in the toolbar. This will allow you to interact with the page within the Optimizely editor. You can click on elements, type in input fields, and anything else that you can normally do on the page. However, actions that cause you to navigate to another page are not supported. 
3. Click on the "Add to Cart" button to bring up the dialog. Notice that when you click the "Same as Billing" checkbox, the shipping address fields are hidden. We want to test whether the default position of this field affects conversion, so we are going to set the checkbox to be checked in our variation.
4. Switch back to Editing Mode and select the "Same as Billing" checkbox. Make sure to select the actual checkbox element (the menu should say "Input Field <input>") and choose "Edit Element..." > "Edit HTML".
5. In the HTML editor, add the attribute "checked" with the value "checked" to the field and click Done. 
6. In the toolbar, click "Options" > "Activation Mode" and select "Manual". This will cause Optimizely to not activate the Experiment until you make the API call "activate", as shown in the dialog. Click "Apply" to close the dialog.
7. Also in "Options", choose "Targeting" to open the Targeting dialog. This is where you can supply additional parameters for your experiment to run. We want the experiment to run only when a given element is shown, so add a "Satisfy this custom Javascript condition" with the following code: window.optimizelyFlags.cartShown
8. Set up a Click Goal by clicking "Set Up Goals" > "Add a Goal" and choosing "Clicks" under "What to Track". Click on "Expand" to enlarge the dialog and use Interactive Mode to show the Cart again. Switch back to Editing mode and click on the "CHECKOUT" button to track that element. 
9. Save your experiment by clicking "Save Now" and Preview Variation #1 (click "Variation #1" and click "Preview"). You can use either the Hosted or the Live preview mode.
10. Activate the Experiment by clicking the "Add to Cart" button. You should be bucketed in Variation #1 and see the "Same as Shipping" field checked.

Reporting Data

Read the Optimizely experiment state and report it to an external service.

See our implementation on this Sandbox Page

Objective

Record Optimizely experiment details on your server when a visitor on your site makes a purchase. These details might be, for example:

• captured by your custom analytics engine and tied to other business metrics
• stored in your data warehouse
• used to make server-side rendering decisions for this visitor

This tutorial requires the use of a small amount of Javascript and HTML markup on the tested page.

Final Result

Hypothesis

You believe that users who see a blue button instead of a red one are more likely to buy a certain coffee cup. To do this, you change the button color with Optimizely and report the results back to your database.

Testing Page Setup

The tested page has the following hidden input field:

Upon "submit" we set the value of this field from the optimizely.data object:

    $("#shopping-cart").on("submit", function() {
    var activeExperimentData = {},
    experimentId,
    activeExperiments =
    window['optimizely'].data.state.activeExperiments,
    variationIdsMap =
    window['optimizely'].data.state.variationIdsMap,
    i = 0;

    // filter the variationIdsMap by activeExperiments
    for (; i < activeExperiments.length; ++i) {
    experimentId = activeExperiments[i];
    activeExperimentData[experimentId] =
    variationIdsMap[experimentId];
    }

    $("input[name=optimizely-experiment-data]").val(
    JSON.stringify(activeExperimentData));
    });
  

Note that the example above uses jQuery to listen to the submit event and set the value of the field. However, you can use any framework or even unaugmented Javascript if you prefer.

Steps

1. Log in to your Optimizely account and create a new Experiment with the URL: www.optimizelysandbox.com/store?optimizely_project_id=your project id.
2. Create variations by selecting the "My Cart" button and changing the background color using "Edit Element... > Edit Style > Color & Background".
3. Save the experiment. Pull up the Diagnostic Report using "Options" > "Diagnostic Report". Expand the "Variations Summary" section and you will see the variations you created and their associated IDs. When you run the experiment it will capture the ID of the chosen variation for the visitor in the hidden field.
4. Preview a variation by clicking the variation name in the toolbar and selecting "Preview". You can use either hosted or live preview mode.
5. Click on either "My Cart" or "Add to Cart" on the experiment page, and click "Checkout" to trigger the form to be submitted. Afterwards you can look in the browser console (varies by browser, on Chrome select "View > Developer > Developer Tools" and click the "Network" tab) to see the post request with the optimizely-experiment-data field populated with the value of the experiments and variation IDs.