- Optimizely Web Experimentation
- Optimizely Performance Edge
- 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.
If you are using Optimizely Performance Edge, certain features described in this article will not be available to you. Optimizely Performance Edge is a lightweight experimentation product that delivers significantly faster performance than previous versions of Optimizely. It does this by relying on a streamlined "microsnippet" which limits the range of available features.
You see this notation whenever the text describes a feature that is available in Performance Edge.
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.
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 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 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 actually 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 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 make changes to the element if the selectors cannot 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.
In Optimizely, activation modes are set at the page level. You can set activation modes on the Configure Page screen when creating your page. To set or change activation modes after you have 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.
Below Page Settings on the Configure Page screen, you see a drop-down list of activation modes that you can set.
These are the Optimizely activation modes that you can select:
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
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 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.
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 therefore load later.
You are running an experiment that targets something far down in the page, a footer for example, which is loaded after other page content.
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.
When you select this mode you will get a code window (complete with sample code), below a text box for entering the name of your API.
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 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 apps
In Optimizely, 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 is 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 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 then enter the experiment directly from that point.
Conditional activation and jQuery
You can add jQuery to your Optimizely experiments by including the API call described in our developer documentation.
If you are 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.