How to Run A/B Tests on Dynamic Pages or Single Page Applications (SPAs) on Optimizely and Google Optimize

On dynamic web pages or SPAs (single page applications), the content of a web page usually gets updated based on various events after the initial page has loaded. If there is an A/B testing for websites running on the page, the updated dynamic content can sometimes overwrite the changes made by the test. This hampers the consistency of the experiment. In order to address this problem, several A/B testing platforms use different approaches. In this article, we’ll discuss how two of the most popular A/B testing tools — Optimizely and Google Optimize — support dynamic pages and single page applications.

Also you can hire professional A/B Test developers at Brillmark for proper guideline and A/B testing implementation. 

How to Set Up Optimizely

Optimizely A/B Testing platform has a powerful kit of features that enables you to build experiments on dynamic pages and SPAs. These features support dynamic websites by allowing you to trigger experiments based on changes that happen on a page, even when the page does not reload.

To gain access to these features, you need to enable support for dynamic websites in your project. Here’s how you can enable support for dynamic websites or SPAs in Optimizely:

• Go to Settings > Implementation.
• Under the Dynamic Websites section, check Enable Support for Dynamic Websites.
• Save to apply changes.

Once you’ve enabled support for dynamic websites in your project, you’ll gain access to a few additional options in the page settings for activating Optimizely pages. The options are:

• When the URL changes
• When the DOM Changes.

You can use these options to define the conditions under which the page will activate or deactivate. When the page activates, the experiment will run. Here’s how to activate pages:

Step 1: Create an Optimizely page.

• Go to Implementation > Pages.
• Click New Page.

Step 2: Set up Triggers, which tell Optimizely when to start checking whether certain conditions are true.

• When the URL changes:
  • Optimizely triggers page activation each time it sees the URL changing, even if the full page does not reload. This will be triggered on initial page load and subsequent URL changes.
• When the DOM changes:
  • Optimizely triggers page activation each time an element on the page is inserted, removed or modified.

For SPAs and Dynamic Websites, you’ll mostly use the two triggers mentioned above. However, you also have access to standard page activation triggers, such as:

• Immediately
• Manually
• When a callback is called
• When a JavaScript condition is true.

These can be used as needed.

Step 3: Set up Conditions, which tell Optimizely what criteria to check for when deciding whether to activate the page.

• URL Targeting:
  • Use URL Match Types (Simple, Exact, Substring, Regular Expression) to define where the experiment should run.

• Element is present on page:
  • Add one or more CSS selectors that Optimizely should 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.

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

You can Add or Remove multiple conditions to define the exact set of conditions under which the page activates.

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 the experiment will run.

How to Deactivate Pages

The Optimizely support for dynamic websites ensures that the changes by an experiment will be continually applied, even if the visitors navigate around the site and the conditions change. The changes will still persist once the page is activated, regardless of what’s happening on the page.

Occasionally, you may not want the changes in an experiment to persist indefinitely as visitors navigate. To ensure you can deactivate a page when the conditions are no longer met, use the following steps:

• Go to Implementation > Pages.
• Select the page for deactivation.
• Click Page Settings.
• Click > Advanced to expand advanced settings.
• Check Automatically deactivate this page when the trigger fires and conditions are false.
  • An active page will deactivate when:
    • A trigger on the page fires
    • The conditions evaluate to false.
• To tell Optimizely to remove all changes when the page is deactivated, select Undo changes when this Page is deactivated:
  • Changes made with the Visual Editor are removed.
  • Variation CSS is reverted.
  • An Extension’s “Reset JS” is executed.
  • Custom JavaScript cannot be reverted.

How to Set Up Google Optimize

Google Optimize supports dynamic pages and single-page applications via a feature called Activation Events. By default, it is set to a page load event.

Here’s how to customize an Activation Event for an experiment:

• Go to the Activation Event section of your experiment details page.
• Click the Edit custom activation icon (the pencil icon beside page load).
• In the Activation Event window, select custom event from the dropdown for Evaluate on field
• Event name can be left as it is. Default value is optimize.activate.
• Click Done to save the changes

Once you have set this up, the experiment will not run until a dataLayer event with the provided event name has been fired. You can fire such dataLayer events from your page using the following JavaScript Code:

dataLayer.push({‘event’: ‘optimize.activate’});

Once you fire the targeting event, any other additional targeting conditions will be evaluated, and the experiment will move to active state only if all the conditions are true.

An AngularJS app could implement Activation Events by firing an event after every digest loop. For example:

myapp.run(function($rootScope, $timeout) {
$rootScope.$watch(function(){
$timeout(function(){
dataLayer.push({'event': 'optimize.activate'});
},0,false);
})
})


For React, you can implement Activation Events in your top level component’s ‘componentDidMount’ and ‘componentDidUpdate’ lifecycle methods to run the experiment codes immediately after the component mounts or updates on the page.

Your code may look like this:

import React from 'react';
export default class App extends React.Component {
componentDidMount() {
dataLayer.push({'event': 'optimize.activate'});
}
componentDidUpdate() {
dataLayer.push({'event': 'optimize.activate'});
}
render() {
// experiment code goes here...
}
}