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

AngularJS Helper

THIS ARTICLE WILL HELP YOU:
  • Seamlessly run Optimizely on an AngularJS site

AngularJS is one of the most popular Single Page App framework in use today. Optimizely 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 pretty seamlessly. Optimizely runs during the pageload event of the page which is what you want in the case of a normal web page. When the browser loads the page Optimizely 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 is not executed and it will not activate the experiments even if they are configured to run on the current URL.

By default Optimizely experiments are executed immediately, meaning that Optimizely evaluates their targeting conditions as soon as possible when the page loads. Optimizely has 2 other activations modes, Conditional and Manual. Both those activation modes can be used to run experiments on a Single Page App but 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 to run your experiments on an AngularJS site you need to copy the following lines of codes to Project Javascript (Note that not all plans have access to Project Javascript, if that's your case you can just 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 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

As mentioned above, the only thing you need to do is switch the activation mode of your experiments from Immediate to Manual. You can do that under the Options menu of the Editor.

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