- For technical users: use Optimizely with Single Page Applications built with frameworks like AngularJS, Backbone.js, Ember.js, React, or Meteor
- For non-technical users: collaborate with your developer to write the needed code
Do you create Optimizely experiments on pages using AngularJS, Backbone.js, Ember.js or an entirely different front-end framework? Do you have questions? Ask us in the Developer forum on Optiverse!
How are Single Page Applications different from traditional websites?
On traditional websites, when visitors click links, the links generally lead to a new URL and load an entirely new page. In SPAs, the whole page doesn’t reload; instead, certain content is changed, loaded, and swapped out within the same page.
Think of the page like a sheet of stationery with a letterhead. In a traditional web page, each page would use a new sheet, even though the letterhead doesn't change; this leads to high waste. With SPAs, however, you use the same sheet all the time, write content under the letterhead, and erase it once you need the space for new content.
One of the biggest advantages of SPAs is that they reduce data transfer (after all, the "letterhead" is only downloaded once). As a result, pages after the initial loading usually can be displayed faster and seem more interactive.
How does Optimizely work with Single Page Applications?
When using Optimizely on SPAs, consider that Optimizely generally loads once per pageload, in the <head> tag of a page (the “letterhead” from our previous example).
Optimizely’s default activation mode presents a problem for SPAs: because the snippet is never reloaded when the visitor takes action, Optimizely won’t re-check for URL Targeting or Audiences, and it won’t load any new variation code. Even if you see the URL changing, the whole page will not be reloading.
Three steps to using Optimizely on Single Page Applications
Due to the unique challenge presented by SPAs, use the following three tactics to ensure your Optimizely experiment runs successfully on your SPA. You will need developer assistance to generate code for Optimizely and add code to your site.
1. Identify states in your Single Page App
Traditionally, when you run an experiment, you identify the pages to target by their URL. Since a SPA is a single page, however, you should identify the “states” of the page that you want to target, and use Optimizely's conditional activation to start the experiment when the SPA reaches the desired state.
For example, say you want to run an experiment testing different layouts for your site's search results. In that case, you don't want the experiment to start until your SPA is in the "showing results" state.
How does Optimizely know when your SPA reaches a state? Under the hood, the SPA page is changing when you take any action, like opening or collapsing a navigation section, clicking on a button, or scrolling past a certain depth. Most often, these changes are identified by the addition or removal HTML/CSS classes. The conditional activation feature allows you to prevent an experiment from running until a class is added or removed, or any other condition that you define is met.
Once you’ve identified the visual state of the page that you want to run your experiment on, ask your developer to identify the corresponding, behind-the-scenes code that is characteristic of that state.
While changes in HTML/CSS classes are the most common, we have sample code that your developer may use to identify states by the existence, absence, or value of the following:
- Meta tag data
- DOM elements
- Button clicks
- AJAX responses
- Angular page changes
- DOM mutation activation
Show your developer our conditional activation mode configuration and ask them to provide you with the code condition that will only be true when the SPA reaches the desired state. To enter this condition in Optimizely, click Options > Activation Mode in the Editor, select Conditional activation mode, then enter the condition in the code box.
Conditional activation prevents the experiment from starting until a visitor enters the desired state, but the experiment will not stop once the visitor leaves that state. Also, the variation changes will not display again if the visitor returns to the state.
Stopping the variation changes requires writing additional code to nullify the changes made by the experiment. Running the changes again for a visitor that returns to the state requires Manual Activation to reactivate the experiment.
2. Broaden URL Targeting
Once your experiment is set up for conditional activation, the next step is to broaden your URL targeting to include your entire site. This will ensure that your experiment will be primed to activate if the condition you defined is met.
On a traditional site, an experiment running on the tutorials section would have it's URL targeting set to:
On an SPA website, however, this would only work if your visitor landed directly on that page when they first arrive to your site. If your visitor arrives at any other location, Optimizely would see that that URL doesn’t match the URL targeting of the experiment, and it would not run again even if they later navigate to /resources/tutorials
Therefore, we broaden our URL targeting to the entire site, https://onepagelove.com/, with conditional activation set to activate the experiment once the “tutorial page” state is identified.
Sometimes, the condition you are activating the experiment with may occur elsewhere on your site and you do not want the experiment running there. In that case, you can narrow the the URL targeting by incorporating those URL requirements into your conditional activation. Using the window.location.href command, your developer can modify the conditional code so that the experiment only runs on the URLs that you want to include.
3. Use Custom Event Goals
Due to the nature of SPAs, click goals and pageview goals are not suitable methods for tracking events. To ensure that your goals are being reliably tracked, you must use Custom Event goals. Custom Event goals require your developer to implement code on your site that will tell Optimizely when an event has occurred. Our article on Custom Event goals includes the required code your developer will need as well as instructions on how to add the custom event goal in Optimizely.