Migrating to Optimizely X Experiments from Optimizely Classic

With the release of Optimizely X and the new Optimizely X Experiments, many Optimizely users are wondering how they can migrate to the new platform and what it means for their tests in the old platform (Optimizely Classic). As an Optimizely three-star partner, we get access to Optimizely’s newest products before release, including Optimizely X Experiments. We can prepare ourselves and our clients for big product updates like this. Armed with this knowledge, I’d like to guide you through the process of migration and answer a few common questions.

The new platform delivers some great improvements as well as some brand new features which will hopefully enhance your testing. Here are some key features and changes that Optimizely are bringing to the table in Optimizely X Experiments:

• A new visual editor that loads faster and provides the ability to view websites in different responsive states;
• An updated code editor (gone is the old code engine) that has a separate section for variation CSS, new utility functions and the ability to control when variation code is loaded onto a page;
• Two new features: Pages (a templating system that combines URL targeting and Activation modes) and Events (an updated version of Goals);
• A new Results page with an updated stats engine (each Metric now shows “confidence intervals” rather than “difference intervals” and the ordering of the Metrics affect how quickly they will reach significance);

A burning question for some is: why should I migrate over to Optimizely X Experiments? While there isn’t a golden reason why you should, there are a few reasons you might want to consider:

• Optimizely will remove support for Optimizely Classic. Probably the biggest reason to move: while they haven’t set a date to deprecate Optimizely classic yet, this is definitely a certainty.
• Code editor improvements. With visual editor changes no longer generating code and the task of deciding when code should execute is not down to Optimizely but the developer, code can be cleaner, easier to read, and potentially easier to implement within the new platform.

Before you start the migration, you first need to evaluate the status of your tests within Optimizely Classic:

• Do you have tests that are still running and haven’t finished?
• Do you have any winners that are running which you haven’t implemented fully onto your site yet?

The answers to these questions are crucial, as there are a few features from Optimizely Classic that cannot be carried over automatically to Optimizely X Experiments:

• Experiment code
• Experiment results
• Goals

Thankfully, Optimizely allows us the option to run both Optimizely Classic and Optimizely X at the same time. This means that if you answered yes to one of the above questions, you can combine them in one snippet (a soft transition) without worrying about experiments being paused/disabled.

This screenshot from the settings panel in Optimizely X shows Optimizely X being enabled, as well as both Optimizely X and Optimizely Classic set to load in the same snippet.

Enabling both at the same time, however, does come at a cost: an additional 50KB is added to your snippet when using this option. This could affect the speed at which Optimizely loads your tests – and impact performance. You will therefore need to weigh up the advantages of this soft transition and the slight disadvantage that comes with the additional snippet size.

If you don’t have any active experiments or winners, then you can enable Optimizely X and simply select the “Use only Optimizely X” option in the Snippet Configuration (a hard transition). This will mean that all of your Optimizely Classic experiments will be disabled (but still accessible).

Unfortunately, there is no automatic way of moving your experiments from the old platform to the new one so you will need to manually do this. There are a few things first, however, that you will need to make a note of for each of your Optimizely Classic experiments in order to move them over to Optimizely X Experiments:

1. Experiment Name (if you want to keep the same name)
2. URL Targeting
3. Activation Mode
4. Audiences used
5. Goals

When creating a new experiment in the new platform, Optimizely requires the following information:

1. Experiment Name
2. Page(s)
3. Audience(s)
4. Metric(s)
5. Variation names and distributions (optional)

The Experiment Name will be the same as your old experiment name that you had before.

Pages is one of the new features in Optimizely X Experiments (as stated above) which combines URL targeting and the Activation mode type. Both URL targeting and the Activation mode function in the same way as in Optimizely Classic, so it should be pretty simple for you to carry them over.

The Page creation window

Audiences are automatically available between Optimizely Classic and Optimizely X Experiments, so all you need to do is add them into the experiment.

Old Audiences

New Audiences

Metrics are the events you want to use to measure your experiment. Events are an updated version of goals and creating them is similar to before. You may wish to read Optimizely’s Knowledge Base article on them to familiarise yourself on how they work.

Finally, Variation names and distributions can be added/changed depending on what your old test had.

If your test is a multi-page test, then you will need to create separate Pages for each of the Sections in the experiment and apply them to your new experiment. Within the visual editor, you will then have the ability to switch between the Pages that you’ve applied to the experiment and then add the appropriate changes/code in the editor.

As of writing this, there is no support for multivariate tests nor dimensions (so you will not be able to apply advanced segmentation to your tests). We expect this to be added relatively soon.

Finally, with the new platform comes a complete rethink of how you have to code your experiments which, of course, presents a challenge in porting over experiments. (If you are not a technical user, and don’t have knowledge of Javascript and jQuery, then you will need to utilise your nearest friendly Front End Developer to help you!).

Optimizely Classic required you to write your code in a specific format in order to use Optimizely’s algorithm so that it could execute as fast as possible as well as utilising force parameters and custom functions. In Optimizely X Experiments, you no longer have to write your code in this way but you do have to manage the timing of your own code as all variation code is executed immediately before the page has loaded. Don’t be alarmed though – Optimizely have provided a few useful utility functions to help with executing code at the right time. Converting your code from the old form should be fairly simple. As an example, take this code from an experiment in Optimizely Classic:

// Update the CTA text

$(‘.cta’).html(‘Click Me!’);

And now we can see how that same functionality is done within Optimizely X Experiments:

// Import the utils library
var utils = window.optimizely.get('utils');


// Wait for the element
utils.waitForElement('.cta').then(function(element){
  // Update the CTA text
  element.innerHTML = 'Click Me!';
});

As you can see, I am using the waitForElement utility function in place of the jQuery selector that I had before. This function will wait for the element to appear within the DOM and then execute the promise function. You can repeat this process for each line of code that is outside of the force parameters.

If you want to access the jQuery that is bundled in your snippet, then you can import it in a similar way to the utility functions:

var $ = window.optimizely.get('jquery');

Lastly, if you had any CSS that was injected via Javascript/jQuery within your experiment, you can now separate this into the new Variation CSS which will make it much easier to create and edit your styling.

And that’s it! You should now be ready to publish your experiment to the world.

If you are using our free Optimizely Chrome Extension, then you will be happy to hear that we have updated it so that it is fully compatible with Optimizely X Experiments.

Do you have any suggestions or tips/tricks for migrating form Optimizely Classic to Optimizely X Experiments? Please share by leaving a comment below.