- Better understand how Optimizely executes on a page from a technical point of view, including targeting, traffic allocation, variation code, and event firing
- Understand how Optimizely evaluates variation code for an experiment
- Diagnose timing issues with experiments
This article explains the snippet's order of operations. Knowing this can help you design more effective experiments that don't detract from the user experience of your site. It's also a good place to start troubleshooting any timing issues in your experiments.
Snippet order of activation
When the snippet loads on the page where your experiment lives, it immediately applies API calls in the
When the page's activation trigger fires and targeting conditions are passed, the page activates. Any page, regardless of activation mode, may also be triggered by name at any time by the page API call.
When a page activates, Optimizely evaluates all the experiments that include that page.
For each experiment that's included, Optimizely evaluates whether a visitor is eligible to enter the experiment. Visitor eligibility is evaluated based on the experiment's traffic allocation and audience conditions.
If any audience conditions cannot be determined for a visitor based on known information (for example, geolocation), Optimizely may wait a short time to gather this information before deciding whether the visitor qualifies for the audience.
If both audience and traffic conditions are passed, the experiment activates.
Each visitor who is allocated to an experiment is assigned to a variation (which may be the control, or "original," variation). Based on the number of variations and the bucketing probabilities described by the experiment's traffic distribution, the visitor is bucketed into a specific variation. A decision event is logged at this stage.
Once a visitor is bucketed into a variation (which determines what changes will be made to the webpage), the snippet executes the code that applies those changes.
Once all pages are evaluated and changes from relevant experiments are applied, the rest of the webpage loads.
Now, when the visitor interacts with the webpage, they may trigger a conversion event that's tracked by Optimizely. Optimizely records the event and associates it with the variation.
If you like, you can follow a snippet's execution by reading the console logs.
How Optimizely executes code
At the variation level, changes from the Visual Editor can be configured to either run in sequence (where making one change depends on a prior change) or in parallel (where all changes execute as soon as the selector is ready). In contrast, variation custom code executes immediately, exactly as written. All timing considerations must be written into the code itself.
Custom variation CSS is added as a style tag to the bottom of the head.
How events are fired
Optimizely tracks events that you configure, such as click and custom events. The snippet also natively emits certain events, such as when a visitor is bucketed; these can be monitored via Optimizely's event listeners. All events are emitted immediately when the triggering event occurs.
However, event tracking for Optimizely's Results service can occasionally be delayed for data analysis and performance purposes. For example, the activation of a page may not be emitted until DOMContentLoaded in order to support the inclusion of visual tags with the event payload.