Running Experiments on an AngularJS Page

THIS ARTICLE WILL HELP YOU:

Running Experiments on AngularJS
Using dataLayer events to keep page state

Important

If you use the latest version of the Convert script, none of what is described in this article is relevant, as it has built in and optimized features for SPAs.

Running Experiments on AngularJS

For running experiments on any version of AngularJS (herein referred to simply as "Angular"), you will need a developer to help you set up the experiments.

Experiments on Angular have to be handled differently than with other experiments. Because the Convert script cannot usually read the URL that a website visitor is navigating, it cannot trigger experiments with the standard methods.

However, Convert provides other methods to trigger experiments within single-page frameworks such as Angular.

1) Triggering the Polling

Polling is the process by which the experience conditions are tested to determine if said experience should be triggered. This includes monitoring the visitor URL, audience conditions or JavaScript conditions to run the test. Polling is usually triggered by Convert when a new page is loaded. However, because Angular is a single-page framework, no new pages are loaded on an Angular app. You would need the following code to start the polling.

_conv_q = _conv_q || []; _conv_q.push(["run","true"]);

You should determine what the best Angular event is to trigger the above code. Here are provided two ways to achieve that.

a) You can utilize the onpopstate javascript event. This will trigger the code every time Angular triggers this event when changing state.

window.onpopstate = function(event) {
  _conv_q = _conv_q || []; 
  _conv_q.push(["run","true"]); 
};

The beauty of this method is that you will not need to insert any code on the framework's code, and it would work with any framework that will trigger this event when changing app states. You can just add it to the Project Global Javascript section on your convert Project Configuration. For this to work you would need for the tracking code to be inserted on your app, in the same way, you would insert the Google Analytics tracking code.

b) Another method you can use in Angular, which is not necessarily better, is to trigger the polling based on the locationChangeSuccess Angular event.

For example, on your Angular page you can add the above snippet inside your Angular controller, similar to the following:

$rootScope.$on("$locationChangeSuccess", function(event, next, current) {
         _conv_q = _conv_q || [];  
         _conv_q.push(["run","true"]);
});

Here is a long version of the code:

// Triggering Polling
// Self invoking function is optional. Only useful in global scope.
(function() {
  // copy from here.
  let _conv_q: string[][]
  if (typeof window.hasOwnProperty('_conv_q')) {
    _conv_q = window['_conv_q']
  } else {
    _conv_q = []
  }
  _conv_q.push(["run", "true"])
})()

// Second example in Triggering Polling.
window['$rootScope'].$on("$locationChangeSuccess", function(event, next, current) {
  let _conv_q: string[][]
  if (typeof window.hasOwnProperty('_conv_q')) {
    _conv_q = window['_conv_q']
  } else {
    _conv_q = []
  }
  _conv_q.push(["run", "true"])
});

// Goals checked through polling
// Self invoking function is optional. Only useful in global scope.
(function() {
  // copy from here
  let _conv_q: string[][]
  if (typeof window.hasOwnProperty('_conv_q')) {
    _conv_q = window['_conv_q']
  } else {
    _conv_q = []
  }
  _conv_q.push(['recheck_goals'])
})()
});

This code should also work in the JS and Typescript versions of Angular.

2) Use JavaScript Conditions in the Locations

Because the Convert script cannot read URL changes in an Angular app, you should use a JavaScript condition instead of a URL match condition to trigger an experiment. You can find a more thorough explanation on how to do this in the following article.

3) Manually Activate an Experiment

You can trigger experiments manually after you determine that a certain flow has happened. In this method, "Locations" and "Audience" conditions will still be tested after triggering the polling with code. Please read the following article about how this could be done.

With the above 3 methods, you should be able to trigger experiments at the right moment in an Angular app.

** Be aware that changes triggered by the experiment will not be reset as with a normal web page. For example, if you change a page element after a menu element has been clicked, clicking on the home page menu element will not reset that change. You will have to undo the element with code. You may want to do this by (for example) adding code to the Custom JavaScript area within the Visual Editor.

4) Goals checked through polling

A majority of goals are checked in Convert through the polling process. This polling process occurs when a page is initially loaded and is done by the Convert script. However, with single-page applications such as Angular, page loading does not occur when navigating through the application. For these types of scenarios, Convert has a specific function to call to activate the polling for monitoring only goal conditions. The code for calling it is the following:

window._conv_q = window._conv_q || [];
_conv_q.push(['recheck_goals']);

Using dataLayer events to keep page state

We see many customers using dataLayer events to keep track of the website state. You can use these dataLayer events to trigger experiments with polling or any of the methods mentioned above. You can configure Google Tag Manager (GTM) to trigger the polling code or manual experiment activation code when an event is pushed onto the dataLayer. Please reference GTM documentation or contact Convert Support if you need help.

Please contact us via the Support channels if you have any further questions about configuring these types of applications with Convert. We love to help.