How do you set up an Optimizely test for a single-page app?

Question

I have a single-page web app that presents a multi-step photo management "wizard", split up across several discrete steps (photo upload, styling, annotation, publishing) via a tab strip. On switching steps I set the URL hash to #publishing-step (or whichever step was activated).

How do I set up Optimizely tests to run on the various discrete steps of the wizard?

The browser never leaves the page, so it only gets a single window.load event. Its DOM isn't getting scrapped or regenerated, but just switches what page elements are visible at any one time via display: none or block, so the part I am trying to figure out is really mostly about in what way I go about the Optimizely test setup itself - it's fine (and likely necessary) if all edits get applied at once.

This thing unfortunately has to work in IE9, so I can't use history.pushState to get pretty discrete urls for each step.

Answer 1

There's actually several ways you could go about doing this, and which option you choose will largely depend on what's easiest for you AND how you plan to analyze the data.

If you want to use Optimizely's analytics dashboard:

I would recommend creating one experiment which will activate a bunch of other experiments at different times. The activation experiment will be targeted to everyone and run immediately when they get to your wizard. The other experiments will be set up with manual activation and triggered by this experiment.

The activation experiment would have code like:

window.optimizely = window.optimizely || [];

function hashChanged() {
  if(location.hash === 'publishing-step') {
    window.optimizely.push(['activate', 0000000000]);
  }
  if(location.hash === 'checkout-step') {
    window.optimizely.push(['activate', 1111111111]);
  }
}

window.addEventListener('hashchange', hashChanged, false);

Or you could call window.optimizely.push(['activate', xxxxxxxxx]); directly from your site's code instead of creating an activation experiment and listening for hashchange.

If you want to use a 3rd party analytics tool like Google Analytics:

You could do this all in one experiment with code similar to above, but in each "if" section instead of activating an experiment, you could run your variation code that makes changes to the wizard and sends special tracking information to your analytics sweet for later reporting. You'll have to do your own statistical significance calculation for this method (as Optimizely's data won't be "clean"), but this method actually works out better usually if properly configured.

Alternatively you could use the method outlined above but still try to use the Optimizely analytics dashboard by creating custom events on your experiment and sending data to them using calls like window.optimizely.push(["trackEvent", "eventName"]);

This article may also be helpful to you.