Skip to main content

We are currently experiencing an issue that is preventing customers from submitting support tickets. Please contact us at (866) 819-4486 if you need immediate assistance.

Optimizely Knowledge Base

Compare Optimizely Classic vs. Optimizely X Web Experimentation

  • Learn about the differences between Optimizely Classic and Optimizely X Web

Optimizely X Web contains many of the most frequently requested new features and improvements to Optimizely Classic. This article walks through some of the differences you'll notice when building experiments with Optimizely X Web.

What should you expect from Optimizely's new platform? 

  • A new, fast-loading Visual Editor that natively supports responsive design

  • An updated custom code Editor that includes variation CSS, new utility functions, and the ability to control when variation code loads onto a page

  • Reusable components that help you get experiments and campaigns up and running quickly: pages (that tell Optimizely where to run an experiment with URL targeting and how to activate it) and events (that use visitor actions to measure success)

  • A new Results page with a fresh look and feel, powered by an updated Stats Engine; your most important metrics reach statistical significance quickest and you’ll see “confidence intervals” instead of “difference intervals”

  • The ability to seamlessly expand the gains you make with Experimentation into Personalization and Recommendations


Switch between platforms

Here's how to switch between Optimizely Classic and Optimizely X.

What's different in Optimizely X Web?

  • A new, responsive Visual Editor that makes it easy to view different breakpoints on responsive sites
  • Variation code that executes immediately and has powerful utility functions available
  • Variation level CSS
  • URL Targeting and experiment activation tied to re-usable pages
  • Easy, flexible ways to create redirect and multi-page experiments
  • New concepts like pages, tags, and events that are re-usable across experiments
  • Improved Editor loading
  • Local storage instead of cookies, which makes for a better experience for your users

To get set up and build your first experiment, check out our guide to getting started. Or, read about migrating to Optimizely X.

The Visual Editor

The Visual Editor has a new look and feel, and some additional functionality in Optimizely X. The new Editor features a left-rail navigation that makes it easy to identify selectors, make text and visual changes, and view those changes at different screen sizes. It's more powerful and loads your website faster.

Optimizely Classic

In Optimizely Classic, selecting an element in the Visual Editor launched a menu that helped you make visual changes. To move or rearrange elements, you dragged them across the screen. When viewing your changes at different screen sizes, you saved to the CDN and previewed the experiment in different browsers.

Optimizely X Web

In Optimizely X Web, click an element and use the left-rail navigation to make all visual changes.

edit_element (1).gif

You can also preview changes at common responsive breakpoints or drag the window to a custom width, directly in the Editor.


Redirect experiments

Redirect experiments allow you to compare two separate URLs in an A/B test. Optimizely X Web allows you to create redirect experiments without generating custom code.

Optimizely Classic

In Optimizely Classic, you created redirect experiments from the Variation dropdown menu, which then generated custom code for you to modify.

Optimizely X Web

In Optimizely X Web, no custom code is generated. You can add a URL or a function directly in the Editor. And variation JS and CSS changes will execute before the redirect.

  1. In the Editor, select Create to make changes. Then, select Redirect from the sidebar.

  2. In the Redirect dialog, add the URL you'd like to send visitors to. Or, add a function.

Multi-page experiments

In Optimizely Classic, you created multi-page experiments by selecting a new experiment type. Optimizely X Web allows you to add new pages and build a multi-page experiment as part of your standard workflow.

Optimizely Classic

In Optimizely Classic, you changed your experiment type from the Options dropdown menu.

Optimizely X Web

In Optimizely X Web, create a multi-page experiment by adding more pages to your campaign. There are two ways to do this: in the New Campaign builder or in the Editor.

In the New Campaign builder, click a page to add it to your experiment. You can add as many as you like.

In the Editor, click the page dropdown to add more pages to your experiment.

URL Targeting and Activation modes

In Optimizely Classic, you set URL Targeting and Activation modes for every experiment. Optimizely X Web ties targeting and activation to a new concept called pages that you can re-use across multiple experiments.

Optimizely X Web

You used the Options dropdown to set URL Targeting or Activation Mode Options for every experiment.

Optimizely X Web

URL Targeting and Activation modes are tied to pages. You can create dozens of pages and reuse them to quickly build experiments with the same URL Targeting and Activation modes. In Optimizely X, conditional activation offers polling and callback functions.

In the New Page dialog, set your URL targeting and the activation mode.

To set a different activation mode for the same URL or set of URLs, create a new page with your desired activation mode.

For responsive sites, you can also create different versions of the Page that conditionally activate at different breakpoints.


Optimizely Classic used goals to track success in your experiments. In Optimizely X Web, the concept of a goal is now called an event. Events are reusable elements that track clicks, pageviews, revenue, and custom events.

You can create as many events as you like, and quickly attach them to your experiments and personalization campaign. Once you add an event to an experiment or personalization campaign, it's called a metric.

Optimizely Classic

In the Editor, you used the Create goal dialog to build and add goals to each experiment.

Optimizely X Web

Goals have turned into events, and they're still reusable across experiments. Add events to your pages to measure success.

  1. Navigate to the Implementation tab and select a page. 

  2. Select an element on the page to add a click event. Pageview events are tracked automatically.

In Optimizely X Web, it's also easier to set a primary metric. This metric is important because it determines whether your experiment "wins" or "loses."

  1. In the New Campaign dialog, click to select events from the dropdown. These are now metrics that measure success in your experiment or campaign. 

  2. The top metric is your primary metric, which Stats Engine treats as the most important. To select a different primary metric, drag and drop to rearrange.

Custom code

Optimizely X Web works by translating visual changes you make to variations into JavaScript code -- specifically, a library called jQuery. You can also make changes directly by writing jQuery or JavaScript in the Code Editor.

In the Editor, click the () icon to open the Code Editor.

Optimizely X Web contains several changes to custom variation code:

  • Custom code now runs immediately

  • Changes made with the Visual Editor don't produce jQuery in an edit code box

  • Optimizely doesn't poll for elements unless you wrap your jQuery in a function

  • You can make changes with custom CSS

  • Instead of Experiment CSS and JS, you'll see a "Shared Code" window

Optimizely Classic

Optimizely Classic waited for elements to exist on the page before executing changes. Changes created in the Visual Editor generated jQuery in the <edit code> box. To control the timing when of code is evaluated, you added special comments.

It might have looked something like this:

/* _optimizely_evaluate=force */
$("head").append("<style id='optlyHide'>body {display:none;}</style>");
/* _optimizely_evaluate=safe */
$('.columns.six.hero-left-cont').css({'display': 'none'});
$('.light-gray-section').css({'display': 'none'});
$('.textured-section.customer-quote').css({'display': 'none'});
$('.seo-customers.container').css({'display': 'none'});
$('.columns.six.ppc-form-cont').css({'float': 'none', 'margin': 'auto auto 100px auto'});
//Additional tracking code that sends a custom event based on which form was entered incorrectly at time of submit
        $('.url-input-related.oform-error-show, .email-related.oform-error-show, .first_name-related.oform-error-show, .last_name-related.oform-error-show').each(function() {
            window.optimizely.push(['trackEvent','' + $(this).attr("class").match(/[^\s]+-related/)[0].split('-')[0] + '_formEvent']);
    }, 200);

In this example, line 2 adds a style tag that hides the body of the page, while other CSS changes apply. Optimizely Classic executes in serial, so the command to remove the style tag (line 10) always evaluates after all the prior changes have executed.

Optimizely X Web

Variation code executes immediately upon experiment activation in Optimizely X Web (so you don't need to use optimizely_evaluate parameters anymore). Changes created in the Visual Editor don't generate jQuery. In fact, Optimizely X doesn't depend on jQuery, so you can remove it from your snippet if you don't use it to write custom code.

To control timing, use utility functions to poll for when elements exist on the page.

In Optimizely X, the sample variation code above could be rewritten like this:

$("head").append("<style id='optlyHide'>body {display:none;}</style>");
var utils = window.optimizely.get('utils');
  $('.columns.six.hero-left-cont').css({'display': 'none'});
  $('.light-gray-section').css({'display': 'none'});
  $('.textured-section.customer-quote').css({'display': 'none'});
  $('.seo-customers.container').css({'display': 'none'});
  $('.columns.six.ppc-form-cont').css({'float': 'none', 'margin': 'auto auto 100px auto'});
// Additional tracking code that sends a custom event based on which form was entered incorrectly at time of submit
      $('.url-input-related.oform-error-show, .email-related.oform-error-show, .first_name-related.oform-error-show, .last_name-related.oform-error-show').each(function() {
        window.optimizely.push(['trackEvent','' + $(this).attr("class").match(/[^\s]+-related/)[0].split('-')[0] + '_formEvent']);
    }, 200);

Note how each function is wrapped with the waitForElement. All these functions run in parallel, instead of one after another as in Optimizely Classic variation code. If you're migrating variation code from Optimizely Classic to Optimizely X, click to learn more about the utility functions.

You can also add custom CSS directly in the Editor. Custom CSS runs immediately and attaches a style tag to the end of the body tag, so you can use it to avoid timing issues with some changes. 

Instead of using Experiment CSS and JS to apply global changes, the new "Shared Code" window applies CSS and JavaScript changes across all experiments and variations in a campaign.

Preview tool

The Preview tool in Optimizely X allows you to easily QA the functionality of your campaign.

Optimizely Classic

In Optimizely Classic, you used a combination of force parameters, cookies, and the developer console to check the functionality of an experiment.

Optimizely X Web

To launch a live preview of your campaign in a new tab with the Preview tool, select an experiment from Campaign Overview and click QA Campaign. 

The Preview tool features three views:

  • Currently viewing tab: identifies the campaign and variation you're previewing, and the audience you're viewing the site as.

  • Override tab: allows you to select the audience you'll view the campaign as.

  • Feed tab: a running list of events as they are triggered in your campaign. You'll see when events are triggered and when campaigns and pages are activated.

As you navigate through your site, you'll easily preview the variations that you've created for different audiences and ensure that everything looks and works the way it should.

QA: Cross-Browser Tests

You'll find cross-browser tests in a new place in Optimizely X Web.

Optimizely Classic

You generated a cross-browser test by clicking a variation and selecting Cross-Browser Test.

Optimizely X Web

Select a variation and click the dropdown menu next to Preview. Select Cross-Browser Test.

Results page

The Results page in Optimizely X Web sports a new look and feel. To see your Results page, navigate to the Campaigns Overview dashboard and click Results

There are a few important differences between our new Results page and the Results page you may be used to. 

First, there are a few Optimizely Classic Results page features that aren’t yet supported in Optimizely X. We’re working hard to make these available, so if you’re missing one or more of these, please send us some feedback!

  • Shareable link
  • CSV export
  • Experiment start/pause button
  • Link to variation preview
  • “Launch” button for winning variations
  • Custom views

Secondly, we’ve made a few tweaks to Stats Engine:

  • The new Results page shows “confidence intervals” rather than “difference intervals.” This means that the statistical tests on the new Results page are on the improvement, or relative difference between variation and baseline measurement, instead of the absolute difference. An improvement interval of 1% to 10% means that the variation has between 1% and 10% more improvement over baseline. For example, if baseline conversion rate was 25%, then we expect variation conversion rates between 25.25% and 27.5%.

  • We’ve made a change to the way that Stats Engine measures the False Discovery Rate for your experiments. The ordering of the metrics on your Results page now impacts how quickly they reach statistical significance. Higher-ranked goals will see significance sooner.

    Generally speaking, there is greater drop-off in testing speed for goals ranked 5th and above, so you can think of those metrics as appropriate for monitoring during an experiment (to make sure, for example, that they aren’t dropping precipitously), but not for making a call on a winner.