Skip to main content
menu_icon.png

Everything you need to learn Optimizely X in one place: See our resource pages for Web Experimentation and Personalization.

x
Optimizely Knowledge Base

Compare Optimizely Classic with Optimizely X

relevant products:
  • Optimizely X Web Experimentation
  • Optimizely X Web Personalization
  • Optimizely X Web Recommendations
  • Optimizely Classic

THIS ARTICLE WILL HELP YOU:
  • Compare the features and benefits of Optimizely X against Optimizely Classic
  • Decide whether to transition to Optimizely X

Optimizely X is a multi-channel experimentation platform that allows you to deliver experiences on any device with an internet connection. Optimizely X combines the strongest features from Optimizely Classic with powerful new capabilities, rebuilt for the modern web.

Here’s what you can expect from Optimizely X:

  • Better performance thanks to smaller snippet sizes and more efficient handling of experiment and event tracking data

  • A fast-loading Visual Editor that gives non-technical users more power to build and preview experiments without a developer, supports responsive design, and makes it easier to QA changes

  • Reusable components that help you get experiments and campaigns up and running quickly

  • Always-on visitor tracking so you have the data you need to backfill and re-target visitor behavior

  • A Results page powered by an updated Stats Engine: your most important metrics reach statistical significance quickest

  • The ability to seamlessly expand your Experimentation gains into Personalization and Recommendations

  • 100 custom attribute placeholders you can use to re-target based on experiment results or filter based on custom visitor attributes

  • Extensions that allow developers save hours by building templates for non-technical users, plus other developer tools like a JavaScript utility library, JavaScript API, REST API, and expanded debugging log

Read on for details about the advantages of Optimizely X.

Performance

In Optimizely X, we've made changes to reduce the snippet size and improve performance:

  • Optimizely X does not include a jQuery dependency to run experiments

  • By default, draft and paused experiments are not included the snippet, so snippets contain only the most relevant information

  • Custom snippets allow teams to build snippet payloads that include only experiences that are relevant to the page a visitor is on

  • Teams using custom snippets can also set a different Time to Live (TTL) for each snippet to determine how long the snippet is cached in visitor browsers

  • Individual variation changes can be delivered asynchronously, which provides the flexibility to require only the necessary changes and reduces snippet load times

  • Experiment and event tracking moved from cookies to local storage, which prevents bloat in browser cookies and improves performance when sending tracking events to the Optimizely log server 

Efficiency

Optimizely X introduces a few concepts that help you build experiments quickly and gather data about your visitors' behaviors even when an experiment isn't running.

Events

Optimizely X uses events instead of goals to measure success. Events are templated, reusable elements that you can use track clicks, pageviews, revenue, and custom events. Events are always on, and you can track them in any experiment—not just the experiment where you create them.

After you add an event to an experiment or Personalization campaign, you can view it as a metric on your Results page. In Optimizely X, it's also easy to set a primary metric, which Stats Engine treats as the most important. The primary metric reaches statistical significance first and determines whether your experiment "wins" or "loses." And you just drag and drop metrics to rearrange them and select a different primary metric.

URL Targeting and Activation modes

Optimizely X uses a concept called pages to set both URL targeting and activation modes for experiments. Optimizely X Web has a new concept called pages that you'll use to set both.

Pages are templated, reusable URL patterns that are always on. This means that Optimizely X constantly gathers information about visitor behaviors on your pages, even if no experiment is running.

You can create dozens of pages and reuse them to quickly build experiments with the same URL Targeting and Activation modes. Plus, conditional activation offers polling and callback functions in Optimizely X. For responsive sites, you can also create different versions of a page that conditionally activate at different breakpoints.

Ease of use

In Optimizely X, we rebuilt Experimentation to give you more power to build experiences without developer support.

Visual Editor

The Visual Editor loads your website faster and more consistently with the addition of Optimizely's Desktop App. The left-side navigation makes it easy to identify selectors, make visual changes, and view those changes at different screen sizes. Variation-level CSS and experiment changes display in plain text instead of code.

In Optimizely Classic, selecting an element in the Visual Editor launched a menu that helped you make visual changes. When viewing your changes at different screen sizes, you saved to the Content Delivery Network (CDN) and previewed the experiment in different browsers.

In Optimizely X, you click an element and use the left-side navigation to make all visual changes. You can preview changes at common responsive breakpoints or drag the window to a custom width, directly in the Editor.

Multi-page funnel experiments

In Optimizely Classic, you created multi-page experiments by selecting a new experiment type. Optimizely X allows you to add new pages and build a multi-page experiment as part of your standard workflow. You create multi-page experiments by adding more pages to your campaign. Plus, you have two ways to add pages: the New Campaign builder or the Visual Editor.

Learn more about creating multi-page experiments in Optimizely X.

Preview tool

In Optimizely Classic, you used a combination of force parameters, cookies, and the developer console to check the functionality of an experiment. In Optimizely X, you can use the Preview tool to toggle between variations, QA audiences, evaluate the timing of code execution, ensure event-firing, and navigate your site without re-initiating.

With the Preview tool, you can:

  • Identify the campaign and variation you're previewing and the audience you're viewing the site as

  • Select the audience you'll view the campaign as

  • Monitor a running list of events as they are triggered and campaigns and pages as they’re activated

As you navigate through your site with Optimizely X, you can preview the variations that you've created for different audiences and make sure that everything looks and works the way it should.

Extensions

Optimizely X includes the Extensions feature, which developers can use to create custom features that non-technical teams can use.

Extensions help you streamline experiment creation and reduce code duplication by running tests with similar code changes. Developers can build custom features like carousels, lightboxes, and banners as reusable templates in the Visual Editor. Non-technical teams can use extensions without ongoing developer support.

Targeting and analytics

In Optimizely X, visitor behavior tracking is always on as soon as an event is created. If you add an event after an experiment has started, all behavior will be backfilled to the start of the experiment. This also allows comprehensive visitor behavior re-targeting: any time a visitor triggers an event, whether it’s attached to an experiment or not, that event is tracked and stored.

Cross-project event tracking

If you’ve ever wanted to track visitor behavior from one Optimizely project to another, now you can! Optimizely X supports cross-project events so you can include events from other projects within your Results dashboard.

If you already built two audiences that you want to use for experiment targeting, you can use the Boolean audiences feature. With Boolean audiences, you can specify whether the experiment should allow visitors with either audience condition or only visitors with both audience conditions, without creating a new audience.

If you want to re-target based on experiment results or filter based on custom visitor attributes, Optimizely X offers 100 custom attribute placeholders instead of the 10 that were included in Classic.

Results page

The Results page in Optimizely X has a new look and feel. We made some tweaks to Stats Engine, with two important benefits.

First, the Optimizely X Results page shows “confidence intervals” rather than “difference intervals.” This means that the statistical tests on the Results page are on the improvement—the 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 the baseline conversion rate was 25%, we expect variation conversion rates between 25.25% and 27.5%.

Second, we changed the way Stats Engine measures the false discovery rate for your experiments. Now, the order of the metrics on your Results page affects how quickly they reach statistical significance. Higher-ranked metrics will see significance sooner.

In general, there’s a greater drop in testing speed for metrics ranked 5th and lower. Think of these metrics as appropriate for monitoring during an experiment, for example, to make sure they aren’t dropping precipitously, but not for making a call on a winner.

Developer tools

Optimizely X offers robust tools for developers to improve flexibility and control.

  • Extensions allow developers to build an experience once and create a reusable template for non-technical users, which reduces developer hours and minimizes potential QA issues

  • The JavaScript utility library provides comprehensive tooling for building experiences, which reduces the need to re-create boilerplate code and offers more control over code timing

  • The JavaScript API offers comprehensive event listeners, as well as wrappers for reading user data and debugging experiences

  • The full-featured REST API includes the ability to filter experiment results by time series and custom attributes

  • An expanded Optimizely log includes more log levels for debugging experiments

Custom code in the Visual Editor

Optimizely X works by translating the 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.

Optimizely X includes several changes to custom variation code:

  • Custom code 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 add custom CSS directly in the Visual 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 JavaScript to apply global changes, a "Shared Code" window applies CSS and JavaScript changes across all experiments and variations in a campaign

Variation code execution in Optimizely Classic vs. Optimizely X

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:

/* _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'});
$("#optlyHide").remove();
 
//Additional tracking code that sends a custom event based on which form was entered incorrectly at time of submit
$('#submit').bind("click",function(){
    window.setTimeout(function(){
        $('.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.

In Optimizely X, variation code executes immediately upon experiment activation, 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, you can use utility functions to poll for when elements exist on the page.

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

$("head").append("<style id='optlyHide'>body {display:none;}</style>");
 
var utils = window.optimizely.get('utils');
utils.waitForElement('.columns.six.hero-left-cont').then(function(){
  $('.columns.six.hero-left-cont').css({'display': 'none'});
});
 
utils.waitForElement('.light-gray-section').then(function(){
  $('.light-gray-section').css({'display': 'none'});
});
 
utils.waitForElement('.textured-section.customer-quote').then(function(){
  $('.textured-section.customer-quote').css({'display': 'none'});
});
 
utils.waitForElement('.seo-customers.container').then(function(){
  $('.seo-customers.container').css({'display': 'none'});
});
 
utils.waitForElement('.columns.six.ppc-form-cont').then(function(){
  $('.columns.six.ppc-form-cont').css({'float': 'none', 'margin': 'auto auto 100px auto'});
});
 
utils.waitForElement("#optlyHide").then(function(){
  $("#optlyHide").remove();
});
 
// Additional tracking code that sends a custom event based on which form was entered incorrectly at time of submit
utils.waitForElement("#submit").then(function(){
  $('#submit').bind("click",function(){
    window.setTimeout(function(){
      $('.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);
  });
});

Each function is wrapped with the waitForElement. All these functions run in parallel, instead of one after another.

Single Page Applications

Optimizely X makes it easier to build experiments for Single Page Applications (SPAs) in several ways.

Pages allow teams to build URL targeting and experiment activation conditions only once and reuse them for every experiment. This is especially useful for SPAs that rely on listening for hash change conditions to activate. Page-level conditional activation provides additional granularity for describing different states in your application, like modals and interstitials. These conditions can be configured once, then added onto for the lifetime of the testing program.

The new “activate” API call replicates the behavior of Optimizely as if it's loaded multiple times on a regular web application.

Optimizely’s utility functions allow developers to develop new experiences without the need for large amounts of boilerplate code.

More resources

Ready to transition from Optimizely Classic to X? Check out this guide.

Trying to figure out how to switch between the Optimizely Classic and X platforms? Here's how.