angularjs – 如何使用Piwik跟踪角度路径视图和链接点击

发布时间：2020-12-17 07:09:12 所属栏目：安全来源：网络整理

导读：有没有人有Piwik与Angular App集成的实例？我在我的代码中有以下代码,但只能看到页面的视图,并且没有显示任何路径视图.我是Angular的新手,所以任何帮助都会非常感激. 角 var app = angular.module('angularTest',['ui.utils','ui.bootstrap','ui.router','pi

有没有人有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',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>

解决方法

我刚刚在piwik上报道了一个项目,为了跟踪路线变化,您可以在应用程序的运行周期中添加$routeChangeSuccess监听器：

var app = angular.module('angularTest','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="https://stackoverflow.com" report-piwik>External link</a>

这是一个plunkr,我没有添加piwik报告,但它显示指令触发点击监听器并显示带有href的警报. http://plnkr.co/edit/mMzwY6wz9XhTpTUKuhiU?p=preview

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!