Change execution in Optimizely Web Experimentation

In Optimizely Web Experimentation, specific experiences are defined as sets of "changes" to the original webpage.

Most changes are specified at the variation level, scoped to a single page. They are executed when the variation is activated (if the appropriate page is active). If multiple pages are active at the same time, 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.