javascriptangularjsgoogle-analyticssingle-page-applicationgoogle-experiments

Angular.js and Google Analytics Content Experiment

So I'm trying to implement google analytics content experiment on a website which is made as angular one page website.

I had setup two versions of my home page, as / and /?v=2, pasted in the google code as instructed, at the very top of the <head> tag and it worked just fine, google sent 30% of traffic to one and 70% of traffic to the second version of the page.

The problem came when I tried to access say /contact, google would apparently think I'm still accessing / and would send me to /v=2(if I was the part of the 30% that is).

I'm not even sure why does it happen, but it does, I'm thinking what could help is if google's functions ran not right after load, but only after main page's angular controller would load.. But I could get the google code working in the said controller..

Has anyone dealt with this problem before?

Solution

  • What you can do is use API instead https://developers.google.com/analytics/devguides/collection/gajs/experiments#cxjs

    Then all you have to do is to do something like this in your route/state definition

    {
   templateUrl: function() {
      if(cxApi.chooseVariation() == 0) {
         return "version1.html";
      } else {
         return "version2.html";
      }

   }
}