RELEVANT PRODUCTS:
  • Optimizely X Web Experimentation
  • Optimizely X Web Personalization
  • Optimizely X Web Recommendations

this article will help you:
  • Understand how Optimizely X executes changes on a page
  • Diagnose timing issues with experiments
  • Understand the types of changes that Optimizely X recognizes

In Optimizely X, 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're 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're executed when the campaign is activated, before any variation changes.

Optimizely X 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 won't be 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, unlike in Optimizely Classic.

  • 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 Extension.