Default change order in Optimizely Web Experimentation

Optimizely Web Experimentation defines experiences as sets of "changes" to the original webpage.

Most changes are specified at the variation level, scoped to a single page. They execute when the variation is activated (if the appropriate page is active). If multiple pages are active simultaneously, all associated changes are executed as long as a campaign is targeted to those pages and the visitor qualifies for any audience conditions.

Changes can also be specified at the campaign level. In this case, they are executed when the campaign is activated before any variation changes.

Optimizely Web Experimentation recognizes these types of changes:

• append – Adds to all elements that match a particular selector, even if they have yet to appear.

  • after – Inserts HTML just after the element.
  • append – Inserts HTML after the element's last child.
  • before – Inserts HTML just before the element.
  • prepend – Inserts HTML before the element's first child.
• attribute – Changes all elements that match a particular selector, even if they have yet to appear.
  • class – Sets the element's class.
  • html – Sets the element's innerHTML, replacing its original content. Special characters like < > ' " are treated like HTML. This lets you make complex changes to the body of an element.
  • href – Sets the element's href attribute, if it has one. This is primarily useful for changing a hyperlink's URL.
  • src – Sets the element's src attribute, if it has one. This is primarily useful for changing an image's URL.
  • style – Sets the element's style.cssText, replacing any previous value for the element's inline style attribute.
  • text – Sets the element's textContent, replacing its original content. Special characters like < > ' " are visible to your visitors and is not treated like HTML. This is the safest way to change the copy on your website.
  • hide – Sets the element's visibility attribute to "hidden," which makes the element invisible while allowing it to take up the original amount of space and preventing a page reflow.
  • remove – Sets the element's display attribute to "none," which removes the element and allows other elements to reflow and take up the original element's space. The element is still in the DOM, so you can find and restore it as desired.
• custom code – Arbitrary JavaScript. The JavaScript is run immediately and all at once.
• rearrange – Moves all elements that match a particular selector to a destination specified by another selector. If no source or destination elements have been found, it will poll until both have been found, then move all matching source elements at that time. It will not move any elements thereafter.
  • after – Rearranges the source element so that it comes just after the destination element.

  • append – Rearranges the source element so that it comes just after the destination element's last child.

  • before – Rearranges the source element so that it comes just before the destination element.
  • prepend – Rearranges the source element so that it comes just before the destination element's first child.
• redirect – Redirects the visitor to a specified URL, optionally retaining all query parameters from the current page.
• widget – Renders a specified Optimizely Web Experimentation Extension.

Modify change dependencies

To ensure that a change executes before another change, you can tell Optimizely Web Experimentation to wait for the first change. When you create the second change, open the Timing menu and select Wait for previous change.

Effect of deleting a change

When you delete a change, any change set to wait no longer waits for any change.

For example, you linked three changes using the Wait for previous change selection. The third change depends on the second change, and the second change depends on the first change. If you delete the second change, the third change does not wait for the first change.

Extension execution order

Extension execution order is handled slightly differently than change order. An experiment with multiple extensions but no other changes apply to the extensions in parallel. You can build an extension's Apply JS to make it wait for another extension.

An extension waits for a Visual Editor change if the extension is added after the Visual Editor change. Conversely, a Visual Editor change does not wait for an Extension to finish applying if it is added after the Extension in the Change list.