Activate pages in Optimizely Web Experimentation and Optimizely Performance Edge

By default, all Optimizely Web Experimentation experiments are evaluated when the Optimizely Web Experimentation code snippet is loaded on the page. Once a visitor is bucketed into an experiment, the 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 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 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 are testing a web application that re-renders (but does not re-load) the page when visitors perform certain actions.

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

• You are testing a multi-step form that appears in a modal and uses a Next button but does not load a new page.

• You are testing an ecommerce 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 runs live. If this happens, it is an excellent sign that you should be using conditional or manual activation.

Here is what happens:

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

• Optimizely cannot change the element if the selectors are not found on the page.

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

Activation modes

Activation modes, also known as Triggers, are set at the page level. When creating your page, you can set activation modes on the Configure Page screen. To set or change activation modes after making the page, select Edit Page from the Implementation > Pages to reach the Configure Page screen.

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

Below Page Settings on the Configure or New Page screen, you see a drop-down list of page trigger activation modes that you can set.

 

These are the Optimizely activation triggers that you can select:

Trigger Name	Platform Availability	Description	Image
Immediately	Optimizely Web Experimentation and Optimizely Performance Edge	This is the default activation mode. When Triggers is set to Immediately, evaluate the experiment as soon as the page loads.
When the URL changes	Optimizely Web Experimentation and Optimizely Performance Edge	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, even if your page will be a non-SPA page.
When the DOM changes	Optimizely Web Experimentation and Optimizely Performance Edge	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, even if your page will be a non-SPA page.
Manually	Optimizely Web Experimentation and Optimizely Performance Edge	Setting a page activation mode is set to Manually, the activation event will be controlled by code that you place directly onto your site or within your app. In contrast to the JavaScript activation mode, this is not coding that you configure in Optimizely but code in your site or app. See our developer documentation site for more information on how to activate your pages manually. When you select this mode, you will get a text box for entering the name of your API along with a code window, complete with a sample code. For Optimizely Performance Edge only : This activation mode is designed to work with single-page applications (SPA), and using it requires enabling Support for Dynamic Websites for your project. Even if your page will be a non-SPA page.
When a callback is called	Optimizely Web Experimentation only	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, you should set your page activation mode to When a callback is called. Listens for a specified event before launching your experiment. To illustrate, you 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 are running an experiment that targets a modal that does not load until the user clicks a button to open it. Please see our developer documentation site for more information on using the callback activation. Any code you include is evaluated on every page the snippet is implemented in. Once the callback function is triggered, Web Experimentation evaluates the URL conditions. If they are met, the page is activated. See URL Targeting for more information.
When a JavaScript condition is true	Optimizely Web Experimentation only	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 specific 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 are running an experiment on a product detail page where the category is not available in the URL, so instead, you rely on keywords within the page as a sort of metatag. You use polling because those keywords live below the <head> tag and load later. You are running an experiment that targets something far down in the page, a footer, for example, loaded after other page content. Polling Frequency Optimizely polls for conditions that evaluate as true every 50 milliseconds, 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.

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

If you are using conditional activation for a multi-page experiment, ensure 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 applications

For Optimizely Performance Edge projects only: access to the Activate API requires enabling Support for Dynamic Websites for your project.

Using the activate API call will restart Optimizely, and all campaigns or experiments on that page will then be evaluated. This has significant 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 is tempting to assume that the user will get to step 2 by first going through step 1 and then telling Optimizely to look for a hash change; if a hash change occurs, Optimizely will restart and evaluate the experiment. But if the user can get to step 2—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 is 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 is set to activate immediately, you can enter the experiment directly from that point.