Rich-text Reply

How to track Single page Applications and modern web app?

ellabanez 04-22-16
Accepted Solution

How to track Single page Applications and modern web app?

 
DavidS 04-25-16
 

Re: How to track Single page Applications and modern web app?

Hi there,

 

Thanks for reaching out!

 

Optimizely’s default activation mode presents a problem for AngularJS: 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.

 

To overcome this issue, we usually recommend using Manual Activation. With Manual Activation, a single Javascript API call to Optimizely is enough to activate an experiment on the page. You can find out more about Manual Activation via this Knowledge Base article. On your website, you would use Manual Activation to run your experiment every time the page content changes.

 

To activate an experiment when an AngularJS location change happens, setup an event listener on the $locationChangeSuccess event and activate the experiment if the page change meets the right criteria. Here is some sample code that achieves this feature:

 

window.optimizely = window.optimizely || [];
$rootScope.$on("$routeChangeSuccess", function(event, next, current) {
if (next.indexOf('/productPage') != -1) {
window.optimizely.push(["activate"]);
}
});

This sample code checks for the presence of /productPage in the URL and activate this experiment if this condition is met. Your developer should be able to adapt this code to make it work with your AngularJS implementation.

 

I hope that is helpful. 

 

Best,
David

 

Optimizely