- 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
If you are using Optimizely Performance Edge, certain features described in this article will not be available. Optimizely Performance Edge is a lightweight experimentation product that delivers significantly faster performance than previous versions of Optimizely. It relies on a streamlined "microsnippet" that limits the available features range.
You see this notation whenever the text describes a feature available in 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.
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, 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.
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||
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.
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.
This can be useful for evaluating experiments that rely on any type of delayed content.
You might want to use this when:
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
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.
Conditional activation and jQuery
You can add jQuery to your Optimizely Web Experimentation experiments by including the API call described in our API developer documentation.
If you are using conditional activation for a multi-page experiment, ensure that the activation mode you choose will work for every page in the experiment. Otherwise, it will activate only on one page.