vue使用matomo进行数据统计，区别每个路由

首先在main.js找那个引入vue-matomo

安装一下matomo  

import VueMatomo from 'vue-matomo'

Vue.use(VueMatomo, {
  host: 'http://matomo.na.xyz', // 这里配置你自己的piwik服务器地址和网站ID
  siteId: 3,//siteId值
  // 根据router自动注册
  router: router,
  // // 是否需要在发送追踪信息之前请求许可
  // // 默认false
  requireConsent: false,
  enableLinkTracking: true,
  // // 是否追踪初始页面
  // // 默认true
  trackInitialView: false,
  // // 最终的追踪js文件名
  // // 默认 'piwik'
  trackerFileName: 'matomo',
  debug: false
});

然后下面是关键一步，就是需要在app.vue中监听路由变化

 watch: {
      '$route' () {
        let locationHash = window.location.hash;
        sessionStorage.setItem("hashLocation",locationHash);//把路由存在缓存中，此处你可以console.log看出路由变化

      }
    },

然后再每个组件中发送追踪信息就行了，注意是每个组件哦

    created(){
      const hashLocation= sessionStorage.getItem("hashLocation");//缓存中获取当前页面的路由名称
    
      const newLocation = hashLocation.split("#/")[1];
      this.$matomo.setCustomUrl("http：baidu.com"+"/"+newLocation);//覆盖页面报告的url，可以自定义页面url，加上本页面路由
      // this.$matomo.trackEvent(shopCode,hashLocation);//事件
      this.$matomo.trackPageView(hashLocation);//页面名称,可以自定义页面名称


    }

然后就可以在matomo网站中查看这些数据如下图，在页面名称选项中可以看到自定义名字的页面

 

 

 

 

matomo参数说明官方网站https://developer.matomo.org/api-reference/tracking-javascript

 

 

 

 

 

以下是js版本使用matomo的，比较简单，需要在每个html中加上此段代码