Как отслеживать просмотр углового маршрута и ссылку, используя Piwik

Question

Есть ли у кого-нибудь рабочий пример интеграции Piwik с Angular App? У меня есть следующий код в моем, но видны только просмотры страницы, и никаких просмотров маршрутов не появляется. Я новичок в Angular, поэтому любая помощь будет очень признательна.

Угловые

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

настройки Piwik меню

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); 
}; 

Маршрут

<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 1

Я работал над проектом с Piwik отчетности некоторое время назад, чтобы отслеживать изменения маршрута вы можете добавить $routeChangeSuccess слушателя во время run цикла вашего приложения:

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

Если вы хотите вы можете написать директиву для отслеживания кликов по ссылкам:

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']); 
     } 
     }); 

    } 
    }; 

}); 

И использовать его i п ваши мнения, как это:

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

Вот plunkr, я не добавлял Piwik отчетности, но он показывает директиву запуская щелчка слушателя и показывая предупреждение с HREF. http://plnkr.co/edit/mMzwY6wz9XhTpTUKuhiU?p=preview

Answer 2

В моем случае следующий код работал даже без включения событий onclick, связанных с конкретными состояниями.

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

Вы также можете попробовать это.