Skip to main content
menu-icon.png

 

x
Optimizely Knowledge Base

Activate pages in Optimizely X

There are two versions of Optimizely
What version do you have?
X
Optimizely Classic
This is what the Optimizely Classic user interface looks like.
Optimizely X
This is what the Optimizely X user interface looks like.
. If you're using Optimizely Classic, check this article out instead.
relevant products:
  • Optimizely X Web Experimentation
  • Optimizely X Web Personalization
  • Optimizely X Web Recommendations

THIS ARTICLE WILL HELP YOU:
  • Activate an experiment conditionally, based on dynamically loaded content
  • Build experiments for single-page app frameworks like Angular, Backbone, Ember, or Knockout

By default, all Optimizely experiments are evaluated as soon as the Optimizely code snippet is loaded on the page. Once a visitor is bucketed into an experiment, the actual code to change any elements on the page will run as soon as those elements appear in the DOM. When your experiments are set up this way, we say that they are in immediate activation mode.

There are times when you may want Optimizely to wait before activating your experiment. For example, if your page displays dynamically-loaded content, you may wish to activate an experiment after the page has loaded. You can do this by setting the experiment's activation mode.

Generally speaking, you'd use an activation mode other than immediate whenever you want to wait to activate your experiment until certain conditions have been met during the page-loading process or the user's journey through your site.

For example:

  • Your site is built on a single-page app framework (like Angular, Backbone, Ember, or Knockout), and you want to activate an experiment based on an event fired by that framework.

  • You’re testing a web application that re-renders (but doesn't re-load) the page when visitors perform certain actions.

  • Visitors will not be bucketed into an experiment until they take certain actions on a page, such as triggering a modal, scrolling to a certain point, or activating a widget.

  • You’re testing a multi-step form that appears in a modal and uses a “Next” button, but doesn’t load a new page.

  • You’re testing an e-commerce site and want to run an experiment that is only triggered when customers interact with the products in a particular way.

  • The page contains an AJAX request that executes long after the page has finished loading, and that AJAX request returns new content that must be modified.

Sometimes, when you make changes to an element, those changes appear correctly in the Editor, but are not visible when the experiment actually runs live. If this happens, it's an excellent sign that you should be using conditional or manual activation.

Here's what's going on:

  • When a visitor arrives at your experiment page, the Optimizely snippet executes immediately and tries to run the variation code. However, because the new element hasn't been triggered to appear, the selectors for this element do not exist yet on the page. 

  • Optimizely can't make changes to the element if the selectors can't be found on the page.

  • By the time a visitor clicks on the button to trigger the element, the Optimizely snippet has already finished executing and has stopped trying to find the selectors.

Activation modes

In Optimizely X, activation modes are set at the page level. This differs from the way activation was handled in Optimizely Classic where it was set at the experiment level. You can set activation modes in the Configure Page screen when creating your page. To set or change activation modes after you've created the page, select Settings for the page to reach the Configure Page screen.

Though activation modes are set on the page, if you want to use triggers that respond to changes in single-page applications (SPA) you have to enable this at the project level. See Support for Dynamic Websites to learn more.

Under Page Settings on the Configure Page screen, you see a dropdown list of activation modes that you can set.

page-triggers.png

These are the Optimizely activation modes that you can select:

Immediately

This is the default activation mode. When this is set Optimizely will evaluate the experiment as soon as the page loads.

When the URL changes

When you use this mode, Optimizely triggers activation when a page URL changes, even when the page has not reloaded. This activation mode is designed to work with single-page applications (SPA) and using it requires that you set Support for Dynamic Websites for your project.

When the DOM changes

When you use this mode, Optimizely triggers activation when anything changes in the page DOM changes, even when the page has not reloaded. This activation mode is designed to work with single-page applications (SPA), and using it requires enabling Support for Dynamic Websites for your project.  

When a callback is called

This mode allows you to provide custom JavaScript conditions to activate a page. If your experiment is designed to begin with an event, for example a route change in a single-page app or the click of a particular button somewhere on your page, then you should set your page activation mode to When a callback is called. This mode tells Optimizely to listen for a specified event before launching your experiment. To illustrate, you'd want to use a callback to activate experiments like these:

  • You want to show alternate versions of a form based on an event-driven action, like clicking a button elsewhere on the same page.

  • You want your experiment to activate when there is a route change within a single-page app.

  • You're running an experiment that targets a modal that doesn't load until the user actually clicks a button to open it.

Please see our developer site for more information on how to use the callback activation.

Any code that you include is evaluated on every page the snippet is implemented in. The URL Targeting is evaluated after a page is activated.

When a JavaScript condition is true

This mode lets you add a custom JavaScript function that is evaluated when the trigger for this page fires. The function should return a boolean value. For example, you can create JavaScript that verifies that a certain element is present on the page. This can be useful for evaluating experiments that rely on any type of delayed content. You might want to use this when:

  • You're running an experiment on a product detail page where the category isn’t available in the URL, so instead you rely on keywords within the page as a sort of metatag. You'd use polling because those keywords live below the <head> tag, and therefore load later.

  • You're running an experiment that targets something far down in the page, a footer for example, which is loaded after other page content.

javascript-conditions.png

Polling frequency

Optimizely polls for conditions that evaluate as true every 50 ms, for 2 seconds after DOM is ready or 2 seconds after the polling start time, whichever comes last. If you set a condition that must be true for an experiment to run and it takes longer than 2 seconds to evaluate, the experiment will not activate. In this case, you should set a callback to activate the experiment.   

Setting a page activation mode to Manually tells Optimizely that the activation event will be controlled by code that you place directly onto your site or within your app. Note that in contrast to the JavaScript activation mode, this is not code that you configure in Optimizely, but code in your own site or app. See our developer site for more information on how to manually activate your pages.

When you select this mode you'll get a code window (complete with sample code), below a text box for entering the name of your API.

page-manually.png

In these examples, note that Optimizely provides you with sample code only. You or your developer should replace it with custom code that will activate your experiment according to your specific requirements. See our developer site for additional examples and use cases for polling, callback and manual activation.

After you select an activation mode, click Save Page.

If you're using conditional activation for a multi-page experiment, make sure that the activation mode you choose will work for every page in the experiment. Otherwise, it will activate only on one page.

The activate API call and single-page apps

In Optimizely X, using the activate API call will restart Optimizely and all campaigns or experiments on that page will then be evaluated. This has important ramifications for single-page apps (SPAs), because it is likely to affect how you go about setting up the page in the first place.

Imagine an experiment that activates on the second step of a SPA. It's tempting to assume that the user will get to step 2 by first going through step 1, and then tell Optimizely to look for a hash change; if a hash change occurs, then Optimizely would restart and evaluate the experiment. But if the user can get to step 2 - say, by following a bookmarked link - without first going through step 1, there will be no hash change to notice, and Optimizely will not know it's supposed to activate the experiment.

Instead, the solution is to set Optimizely to check for the presence of a string fragment within the URL that indicates the user is on step 2. Because it’s set to activate immediately, you can then enter the experiment directly from that point.

Conditional activation and jQuery

In Optimizely X, there’s been an effort to remove dependencies on jQuery. The blocks of sample code provided for polling and callback modes are in pure JavaScript instead.


This means you cannot copy jQuery code directly into those code boxes from Optimizely Classic experiments. You can add jQuery to your Optimizely X experiments by including the API call described in our developer documentation.

If you're using conditional activation for a multi-page experiment, make sure that the activation mode you choose will work for every page in the experiment. Otherwise, it will activate only on one page.