Dynamic websites and single-page applications

Many sites are built as single-page applications (SPAs) to optimize the speed of content delivery and improve overall site performance. SPAs offer a few key advantages over traditional static websites: they are fast, responsive, and compact. If you hear that your site is built on a framework such as React, Vue, AngularJS, Ember, or Backbone, you are likely working with a SPA.

Because SPAs load content differently from traditional static sites, Optimizely lets you build experiments on SPAs. These features support dynamic websites by letting you trigger experiments and campaigns based on changes that happen on a page, even when the page does not reload. Jump to the bottom for a more detailed explanation.

Enable support for dynamic websites to:

• Activate experiments based on content that is not immediately displayed when the page loads, or content that becomes visible based on your visitors’ navigation of your site. SPAs do not reload the entire page when a visitor navigates the site. Instead, existing elements are replaced by new ones as the visitor explores.

• Apply or reapply changes to elements on your page that appear after the initial page load. Some SPAs use infinite scroll to add new elements to the page, without fully reloading the page.

Enable support for dynamic websites

To gain access to features that let you experiment on a SPA, enable support for dynamic websites. You gain the following options for activating pages:

• When the URL changes – Triggers when the URL in the visitor's browser changes.

• When the DOM Changes – Triggers when any element on the page changes.

These triggers define conditions under which the page will activate or deactivate. When the page activates, your experiment or campaign will run.

To enable support for dynamic websites at the project level:

1. Go to Settings > Implementation.

2. Select Enable Support for Dynamic Websites.
   
   

Instead of polling for elements on the site for two seconds after initial page load, Optimizely uses MutationObserver to determine when something changes on your site to apply Visual Editor changes. This will not have a negative impact on current experiments.

Activate a page for a SPA

When you enable support for dynamic websites in your project, you can access a few additional options in your page settings.

1. Create a page by going to Implementation > Pages > Create New Page.

2. Note a set of triggers and conditions under Page Settings to specify when your page activates.

Triggers

Triggers tell Optimizely when to start checking whether certain conditions are true:

• When the URL changes – Triggers activation of this page each time it sees the URL changing, even if the full page does not reload. This works well with applications that rely on client-side routing to handle user navigation. This is triggered on the initial page load and subsequent URL changes.

• When the DOM changes – Triggers activation of this page each time an element on the page is inserted, removed, or modified.

If you have a single-page application, you are likely to use the two triggers mentioned above most of the time. However, you still have access to the standard page activation triggers.

When you decide when Optimizely should check for certain conditions on your page, determine whether it should check if any or all conditions are true.

Conditions

Conditions tell Optimizely what criteria to check for when deciding whether to activate the page:

• URL Match – Use URL Match Types to define where the experiment should run.

• Element is present – Add one or more CSS selectors to check for each time the trigger for this page fires. Optimizely uses document.querySelectorAll to determine whether the element exists at the time the page fires.

• JavaScript Condition – Add a custom JavaScript function that is evaluated when the trigger for this page fires. The function should return a Boolean value.

Add and remove multiple conditions to define the exact set of conditions under which you want your page to activate. This will determine when an experiment runs.

Under Triggers, you can tell Optimizely to check whether any conditions are true. This joins separate conditions with an OR statement. When you tell Optimizely to check that all conditions are true, conditions are joined with an AND statement.

Once the conditions return as true, the page activates and your experiment runs.

Deactivate a page

When a page is activated and the experiment runs, the visual changes in your experiment are applied to your website. Visitors who see the site under the conditions you defined and who are bucketed into the experiment see those changes live in the world. Support for dynamic websites ensures that those changes are continually applied, even as your visitors navigate around the site and conditions change. The changes persist when the page is activated, regardless of what is happening on the page.

Occasionally, you may not want the changes in your experiment to persist indefinitely as visitors navigate your site. Imagine that you have a page offering phones for sale, and on that page your experiment displays a banner advertising a promotion on a certain brand. When a user goes to a page displaying a different phone brand, however, you do not want the promotional banner to display. By setting conditions you can trigger deactivation of the banner by deactivating the page that contained it when a user navigates away from the page.

To deactivate a page when the conditions are no longer met:

1. On the Edit Page window, go to Page Settings > Advanced.

2. Select the Deactivation and Undo checkbox.
   Optimizely will deactivate the page and stop applying changes to that page when:

   • A trigger on the page fires

   • The conditions evaluate to false

3. If you also want to remove previously applied changes when the page deactivates, select Undo changes when this page deactivates:

   • Changes made with the Visual Editor are removed

   • Variation CSS is reverted

   • An extension’s “Reset JS” is executed

     Extensions are only available for Web and Personalization projects.

   • Custom JavaScript cannot be reverted

The next time the page trigger is fired, the page will deactivate.

If a change is made to the body tag using the visual editor, you cannot remove those changes as outlined in this article. If this is functionality you require, submit a feature request.

How support for dynamic websites works

Changes apply to your site when a page is activated. If you have a traditional static site (and you are not using the feature kit that supports dynamic websites), Optimizely applies changes to elements on your page that load within two seconds of the initial page load. Ordinarily, this is plenty of time for elements to load so that visual changes seamlessly apply, without affecting your visitors' experience.

However, unlike static sites, SPAs do not fully reload the page to change the content that a visitor sees. Instead, elements are changed or added to alter the site experience as a visitor explores. This means that two seconds is often not enough time to capture when an element loads on a SPA to apply the visual changes through an experiment.

Optimizely supports dynamic websites by monitoring when page elements load, even when the page itself does not fully reload, through a Web API called a MutationObserver.

MutationObserver provides hooks into DOM mutations and enables Optimizely Web Experimentation’s snippet to know when a DOM node is inserted, destroyed, or modified to apply (or reapply) changes at the right moment. Instead of polling for elements on the site for two seconds after the initial page load, Optimizely uses MutationObserver to see when something has changed on your site.

When an experiment or campaign activates and a visitor is bucketed into the experiment, MutationObserver checks the DOM while the page is active and applies (and reapplies) changes as appropriate. When the page deactivates, Optimizely no longer attempts to change the elements on that page.

The observerSelector utility function acts as a wrapper for the MutationObserver Web API.

Optimizely Web Experimentation has different levels of support for changes:

• Insert HTML and insert image changes, which are only reapplied when new elements display
• Rearrange changes, which are never reapplied
• Everything else, which is reapplied when new elements display and when previously modified elements are mutated

Optimizely Web Experimentation does not currently support rearrange tests (tests that swap the positions of nodes in a document) on dynamic websites but may extend support in the future.

Dynamic selectors

Target dynamically generated selectors using custom attributes, if available. This lets you use the Visual Editor to target specific attributes for your SPA more reliably and with a lower configuration time. See Target dynamic selectors for more information.