AngularJS Helper for Optimizely Web Experimentation

  • Updated
This topic describes how to:
  • Seamlessly run Optimizely Web Experimentation on an AngularJS site

AngularJS is one of the most popular Single Page App frameworks in use today. Optimizely Web Experimentation will not work out of the box on a Single Page App, but in the case of AngularJS, there are some easy steps to follow to make it work seamlessly. Optimizely Web Experimentation runs during the page load event of the page, which is what you want in the case of a normal web page. When the browser loads the page, Optimizely Web Experimentation runs, evaluates the targeting conditions of each experiment, and executes them if they meet those conditions. In the case of a Single Page App, there is no page reload when navigating from page to page, so Optimizely Web Experimentation is not executed, and it will not activate the experiments even if they are configured to run on the current URL.

By default, Optimizely Web Experimentation experiments are executed immediately, meaning that Optimizely Web Experimentation evaluates their targeting conditions as soon as possible when the page loads. Optimizely Web Experimentation has 6 activations modes.

In the case of AngularJS, switching your experiments to be manually activated will make them run without having to do any additional configuration.

Implementation

To enable Optimizely Web Experimentation to run your experiments on an AngularJS site, you need to copy the following lines of codes to Project Javascript

Not all plans have access to Project Javascript. If that is your case, you can copy the code directly into your page.
(function() {
  'use strict';
  // Wait for angularJS to be ready
  var interval = setInterval(function () {
    if (window.angular !== undefined && window.angular.element(document.getElementsByTagName('body')).scope() !== undefined) {
      clearInterval(interval);
      var scope = window.angular.element(document.getElementsByTagName('body')).scope();
      // Listen on new page loaded
      scope.$on('$viewContentLoaded', function () {
        // Sometimes $viewContentLoaded is called too early, in that case you can use $locationChangeSuccess
        // Activate the manually activated experiments
        window.optimizely.push(["activate"]);
        // Fake a pageview event. 
        // A pageview event will be sent by default if an experiment is running.
        // They get de-duplicated server side
        window.optimizely.push(["trackEvent", document.URL]);
      });
    }
  }, 500);
})();

This code uses an AngularJS listener and the Optimizely Experimentation JS API to activate manually activated experiments every time AngularJS loads a new page. Experiments will still need to meet the URL and Audience targeting conditions to be executed. On top of that, it also fires an Optimizely Custom Event to register the pageview for every new page so it can be used as a pageview goal in your experiments.

Setting up the experiment

You need to switch the activation mode of your experiments from Immediate to Manual. Refer to Activate Pages documentation to learn how to change the activation mode. Also, refer to Support for dynamic websites for important information. 

Make sure the URL targeting is set up correctly. You can now start the experiment, and it will get activated on your AngularJS page.