Activate pages in Optimizely Experimentation and Optimizely Personalization

Optimizely defaults to evaluating experiments when the page loads the code snippet. When a visitor is bucketed into an experiment, the code with element changes runs when those elements appear in the DOM. This is called immediate activation mode.

However, you may want Optimizely to wait before activating your experiment. For example, if your page has dynamically loaded content, you can activate the experiment after the page has loaded using the activation mode. Use an activation mode other than immediate when you want to activate your experiment after certain conditions are met during the page-loading process or the user's journey through your site.

For example:

• Your site is built on a single-page application (SPA) 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 displays 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 only triggered when customers interact with the products in a particular way.

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

Sometimes, when you make changes to an element, those changes display correctly in the Visual Editor but are not visible when the experiment runs live. This indicates you should use conditional or manual activation.

Here is what happens:

• When a visitor lands on 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 display, 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 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

You set activation modes, or triggers, on Implementation > Pages > More Actions > Edit Page.

Below Page Settings is a drop-down list of page trigger activation modes that you can set.

Optimizely Web Experimentation, Optimizely Performance Edge, and Optimizely Personalization

• Immediately – Evaluates the experiment when the page loads. This is the default activation mode.
• When the URL changes – Triggers activation when a URL changes, even when the page has not reloaded. This is designed to work with SPA and requires that you set Support for Dynamic Websites for your project, even if your page is a non-SPA page.
• When the DOM changes – Triggers activation when anything in the page DOM changes, even when the page has not reloaded. This is designed to work with SPA and requires that you set Support for Dynamic Websites for your project, even if your page is a non-SPA page.
• Manually – Triggers activation based on the code you place on your site or within your app. See the developer documentation for how to activate your pages manually. This mode has a text box for the name of your API and a code window.
  • For Optimizely Performance Edge only: This is designed to work with SPA and requires that you set Support for Dynamic Websites for your project, even if your page is a non-SPA page.

Optimizely Web Experimentation and Optimizely Personalization only

• When a callback is called – Triggers activation from custom JavaScript conditions you provide. Examples to use this mode include if your experiment is designed to begin with a route change in a SPA or the click of a button on your page. See callback activation for more information.
  • Any code you include is evaluated on every page the snippet is implemented in. Once the callback function is triggered, Optimizely evaluates the URL conditions. If they are met, the page is activated. See URL Targeting for more information.
• When a JavaScript condition is true – Triggers activation when a JavaScript condition is met for the page. 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 is useful for evaluating experiments that rely on any type of delayed content. You might want to use this when:
  • You run an experiment on a product detail page where the category is unavailable in the URL, so you rely on keywords within the page as a sort of metatag.
  • You use polling because those keywords are below the <head> tag and load later.
  • You run an experiment that targets something down in the page, like a footer, loaded after other page content.

  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. You should set a callback to activate the experiment.

In these examples, Optimizely 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 additional examples and use cases.

The activate API call and SPAs

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

The activate API call restarts Optimizely, and all campaigns or experiments on that page are evaluated. This has consequences for SPAs because it affects how you set up the page.

Imagine an experiment that activates on the second step of a SPA. You may assume that the user gets to step 2 by going through step 1 and then telling Optimizely to look for a hash change; if a hash change occurs, Optimizely restarts and evaluates the experiment. However, if the user can get to step 2 without going through step 1, such as a bookmarked link, there is no hash change, and Optimizely does not know it should activate the experiment.

The solution is to check for 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.

Conditional activation and jQuery

There was an effort to remove dependencies on jQuery. The blocks of sample code provided for polling and callback modes are in pure JavaScript instead.

You can add jQuery to your Optimizely Web Experimentation experiments and Optimizely Personalization campaigns by including the API call described in the API developer documentation.