CODEWITHSUNDEEP
angularjssingle-page-applicationmatomo
freeBSD
freeBSD

Reputation: 317

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>

Upvotes: 3

Views: 2737

Answers (2)

s4tr2
s4tr2

Reputation: 415

In my case, the following code worked even without including the onclick events attached to the specific states.

  $rootScope.$on('$locationChangeSuccess', function(event, current) {
    if(window._paq){
      window._paq.push(['setCustomUrl', $location.path() ]);
      window._paq.push(['trackPageView']);
    }
  });

You can try that too.

Upvotes: 1

yvesmancera
yvesmancera

Reputation: 2925

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

Upvotes: 6

Related Questions