如何使用Piwik跟踪Angular路线视图并链接点击

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

    });
  });

编辑

如果要跟踪非路由链接，可以编写指令来跟踪链接点击：

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

    }
  };

});

并在您的视图中使用它，如下所示：

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

你也可以尝试一下。