freeBSD freeBSD - 5 months ago 81
AngularJS Question

How to track Angular route views and link click through using Piwik

Does anybody have a working example of Piwik integration with an Angular App? I have the following code in mine but only see views of the page and no route views ever show up. I'm new to Angular so any help would be greatly appreciated.

Angular

var app = angular.module('angularTest', ['ui.utils','ui.bootstrap','ui.router','piwik','ngSanitize', 'ui.highlight']);


Piwik settings

var _paq = _paq || [];
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
function onSuccess(data, request) {
var spUserData = data.d;
//get login name
var loginName = spUserData.LoginName.split('|')[1];
piwikEmpid = loginName.replace("domain\\","");
//get display name
piwikEmpname = spUserData.Title;
var u="//piwikServer/";
_paq.push(['setUserId', piwikEmpid]);
_paq.push(['setTrackerUrl', u+'piwik.php']);
_paq.push(['setSiteId', 1]);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);
};
function onError() {
var u="//piwikServer/";
_paq.push(['setTrackerUrl', u+'piwik.php']);
_paq.push(['setSiteId', 1]);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);
};


Route menu

<ul class="nav nav-tabs" role="tablist" id="topTabMenu" data-position="right">
<li role="presentation" ui-sref-active="active"><a aria-controls="home" role="tab" ui-sref="home" onclick="javascript:_paq.push(['trackPageView', 'home']);"></a></li>
<li role="presentation" ui-sref-active="active"><a aria-controls="home" role="tab" ui-sref="offices" onclick="javascript:_paq.push(['trackPageView', 'offices']);">
Offices</a></li>



Answer

I worked on a project with piwik reporting a while ago, to track route changes you can add a $routeChangeSuccess listener during your app's run cycle:

var app = angular.module('angularTest', ['ui.utils','ui.bootstrap','ui.router','piwik','ngSanitize', 'ui.highlight']).
    run(function($rootScope, $location) {

    $rootScope.$on('$routeChangeSuccess', function(event, current) {      

      if(window._paq) {
        window._paq.push(['setCustomUrl', $location.path() ]);
        window._paq.push(['trackPageView']);
      }

    });
  });

EDIT

If you want to track non-route links, you can write a directive to track link clicks:

angular.module('myApp', [])
.directive('reportPiwik', function() {
  return {
    restrict: 'A',
    link: function(scope, element, attributes) {

      var href = attributes.href;

      element.on('click', function() {
        if (window._paq) {
          window._paq.push(['setCustomUrl', href]);
          window._paq.push(['trackPageView']);
        }
      });

    }
  };

});

And use it in your views like this:

<a href="http://stackoverflow.com" report-piwik>External link</a>

Here's a plunkr, I didn't add piwik reporting, but it shows the directive firing the click listener and showing an alert with the href. http://plnkr.co/edit/mMzwY6wz9XhTpTUKuhiU?p=preview

Comments