如何使用 Piwik 跟踪 Angular 路线浏览量和 link 点击率

Question

有人有 Piwik 与 Angular 应用程序集成的工作示例吗？我的代码中有以下代码，但只能看到页面视图，而不会显示任何路由视图。我是 Angular 的新手，如有任何帮助，我们将不胜感激。

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 报告的项目上工作，要跟踪路线变化，您可以在应用的 run 周期内添加一个 $routeChangeSuccess 侦听器：

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

    });
  });

编辑

如果你想跟踪非路由links，你可以写一个指令来跟踪link点击：

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://whosebug.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']);
    }
  });

你也可以试试

如何使用 Piwik 跟踪 Angular 路线浏览量和 link 点击率

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

matomo

angularjs

single-page-application