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中加上此段代码

<script type="text/javascript">
  var _paq = window._paq || [];
  _paq.push(['setCustomUrl', 'http://h5t.namektest.xyz/hyhlc/car']);//自定义每个页面链接
  _paq.push(['setDocumentTitle', 'hyhlc-car']);//自定义每个页面名称
  /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
  _paq.push(['trackPageView']);
  _paq.push(['enableLinkTracking']);
  (function() {
    var u="//matomo.name.xyz/";// // 这里配置你自己的piwik服务器地址和网站ID
    _paq.push(['setTrackerUrl', u+'matomo.php']);
    _paq.push(['setSiteId', '5']);//setId
    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+'matomo.js'; s.parentNode.insertBefore(g,s);
  })();
</script>

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

猜你喜欢