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 Web Experimentation

relevant products:
  • Optimizely X Web Experimentation
  • Optimizely Classic

THIS ARTICLE WILL HELP YOU:
  • Learn about the differences between Optimizely Classic and Optimizely X Web

Optimizely X is a new multi-channel experimentation platform that allows you to deliver experiences on any device with an internet connection. With this launch, we've rebuilt our experimentation product for the modern web.

Optimizely X Web Experimentation combines the strongest features from our legacy testing product, Optimizely Classic, with powerful new capabilities.

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

Read on to learn more about the advantages of Optimizely X. When you're ready to make the switch, check out this guide.

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

Performance

In Optimizely X, we've made changes to lighten the snippet and improve performance.

  • Optimizely X does not include a jQuery dependency to run experiments, which reduces overall snippet size.

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

  • An individual variation can now be delivered asynchronously. This provides the flexibility to require only the necessary changes and reduces synchronous snippet load times.

  • We've moved experiment and event tracking from cookies to local storage. This prevents bloat to browser cookies and improves performance when sending tracking events to Optimizely log servers.

  • Optimizely X offers custom snippets. Large teams can build snippet payloads that include only the experiences relevant to the page a visitor is on. Custom snippets help organizations reduce snippet size and manage experiments more efficiently.

  • Accounts using custom snippets can set a different Time to Live (TTL) for each snippet. This lets you determine how long that snippet will be cached in a visitor's browser. 

Efficiency

Optimizely X introduces a few new concepts that make it easy to build experiments quickly and gather data about your visitors' behaviors, even when an experiment isn't running.

Goals

Optimizely Classic used goals to track success in your experiments. You built and added goals to each experiment. 

In Optimizely X Web, the concept of a goal is now called an event. Events are templatedreusable elements that you'll use track clicks, pageviews, revenue, and custom events. An event is always-on and can be tracked in any experiment, not just the one it's created for. Once you add an event to an experiment or personalization campaign, you can view it as a metric on your Results page.

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 easy to set a primary metric. Stats Engine treats this metric as the most important. It reaches statistical significance first and 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. To select a different primary metric, drag and drop to rearrange.

URL Targeting and Activation modes

In Optimizely Classic, you set URL targeting and activation modes for each experiment.  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 constantly gathers information about visitor behaviors on your pages, regardless of whether an experiment is running.

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.

Developer Tools

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

  • The JavaScript utility library provides comprehensive tooling for building experiences, reducing the need for re-creating boilerplate code and offering more control over the timing of code.

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

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

  • The Optimizely log has been expanded to include several additional log levels for debugging experiments.

Custom code in the Editor

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'});
$("#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.

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');
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);
  });
});

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.

Ease of use

We've rebuilt Experimentation to give customers 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-rail navigation makes it easy to identify selectors, make visual changes, and view those changes at different screen sizes. Variation-level CSS and experiment changes now 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 CDN and previewed the experiment in different browsers.

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

edit_element (1).gif

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

responsive_breakpoints.gif

Multi-page funnel 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.

You'll 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.

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, the new Preview tool allows you to toggle between variations, QA audiences, evaluate the timing of code execution, ensure event-firing, and navigate your site without re-initiating.

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.

Extensions

In Optimizely X, we've introduced a new feature called Extensions. Developers can build custom features like carousels, lightboxes, or banners as reusable templates in the Visual Editor. Non-technical teams can use extensions without ongoing developer support.

Extensions help you streamline experiment creation and reduce code duplication by running tests with similar code changes.

Targeting and Analytics

Tracking a user’s behavior is always on as soon as an event is created. If you add an event to experiment after the experiment has started, all behavior will be back-filled to the start of the experiment. This also allows for comprehensive user behavior re-targeting as any time a user triggers an event, whether attached to an experiment or not, that event is tracked and stored.

Cross-project event tracking

If you’ve ever wanted to track a user behavior from one Optimizely project to another, Optimizely X supports cross-project events which allows you to include events from other projects within your results dashboard.

If you already have two audiences built that you want to use for experiment targeting,  you can leverage boolean audiences by select both audiences and designate if the experiment should allow users with either audience condition or only those with both without needing to create a new audience. 

For teams who want to do retargeting based or experiment results filtering based on custom visitors attributes, Optimizely X offers 100 (versus Classic’s 10) custom attribute placeholders.

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 page you may be used to. 

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.

Single Page Applications

Optimizely X makes it easier to build experiments for Single Page Applications (SPAs):

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

  • Pages allow teams to build in URL targeting and experiment activation conditions just once and reuse them for every experiment. This is especially useful for Single Page Applications 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 or interstitials. These conditions can be configured once and built against for the lifetime of the testing program.

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