Skip to main content
menu_icon.png

Everything you need to switch from Optimizely Classic to X in one place: See the Optimizely X Web Transition Guide.

x
Optimizely Knowledge Base

Single Page Applications in Optimizely X

This article is about Optimizely X. If you're using Optimizely Classic, check this article out instead.
 
relevant products:
  • Optimizely X Web Experimentation
  • Optimizely X Web Personalization

THIS ARTICLE WILL HELP YOU:
  • For technical users: Use Optimizely X 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

Using Optimizely with a Single Page Application (SPA) generally requires a different approach from what you might be used to. This article will help you quickly and easily create Optimizely experiments in frameworks like AngularJS, Backbone.js, Ember.js, Meteor, or React, all without much technical effort.

If you have questions, ideas or suggestions about using frameworks like these to create experiments in Optimizely, you should check out the Developer forum on Optiverse and share them with other like-minded Optimizely users!

Single page apps vs traditional websites

With a traditional website, content is organized on individual pages. These pages are usually static: they don't change in response to a user's actions. Instead, when the user clicks on a button or a link, the site will usually serve them a brand-new page, with its own static content.

By contrast, a SPA contains the same full range of content, but is built to be faster, more responsive and more compact. It does this by simply swapping out old content for new, without serving any new pages to the user. The SPA and all its content is only loaded once, when the user first views the site - so there's no extra back-and-forth between the browser and the server. This reduces the amount of data that has to be transferred, and it gives the user an experience that feels faster and easier.

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 can quickly become wasteful. Now imagine that instead of writing directly on these sheets, you put all your content on post-it notes. You can add, remove and rearrange these post-it notes on the sheet - in any configuration you want, in response to anything your users do - and you never need more than one sheet of stationery.

How Optimizely works with SPAs

The reason Optimizely requires a different approach on SPAs is because Optimizely's snippet (which is in your page's <head> tag) generally loads each time the page loads.

With a traditional website, that's fine, because pages are often loaded and re-loaded in response to a visitor's action. But this doesn't happen with SPAs. The snippet is only loaded once, and it's not reloaded when the visitor takes action. Because of that, Optimizely’s default activation mode won’t re-check for URL Targeting or Audiences, and Optimizely won’t load any new variation code. Even if you see the URL change, that does not mean the whole page will reload.

Instead, you can trigger your experiments on SPAs using one of two activation methods: page-level conditional activation, or navigation-based activation.

Conditional activation on SPAs

Traditionally, when you run an experiment, you identify the pages to target by their URL. But you can't do that with an SPA, since by definition it's a single page, and the snippet only loads once, when the page first loads. 

You can get around that by identifying the "states" of the page that you want to target instead. For example, maybe you only want your experiment to run after the user clicks a link and is able to view a particular block of content. You can use conditional activation to identify when this happens, and then launch your experiment.

An SPA changes whenever the user takes any kind of action, like opening or collapsing a navigation section, clicking on a button, or scrolling past a certain point on the page. Usually, these changes come about through the addition or removal of certain 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 defines that state.

For code samples that can be reused with Optimizely's three conditional activation modes, see our developer documentation.

Navigation-based activation on SPAs

Because SPAs have only a single URL, you can't rely on the Optimizely snippet to reload whenever your visitors navigate to different parts of your SPA. However, you can still set up navigation-driven experiments. By using Optimizely's navigation-based activation modes, you can effectively mimic the behavior of a more traditional website, and launch experiments when your visitors click on certain links or otherwise navigate to specific areas of your SPA.

To do this, you'll have to add a small amount of custom code to your Project JavaScript. This code initiates Optimizely's "activate" API call, which restarts Optimizely and forces it to evaluate all campaigns or experiments on that page.

Navigation-based activation works for SPAs that rely on either hash changes or HTML5's history API for navigation. 

For code samples that can be reused for navigation-based activation modes, see our developer documentation.