vue + matomo实现埋点

一、引入

npm i vue-matomo

二、在 main.js中配置

import VueMatomo from 'vue-matomo'
Vue.use(VueMatomo, {
  host: 'http://xxx.xxx.x.xxx', // 你自己的matomo地址
  siteId: 1,//siteId值，这个值页需要去matomo上去申请
  // 根据router自动注册，需要注意的是如果有路由传值值太长的话matomo会监听不到并报414，就不能使用此方法了。解决：app.vue监听路由
  router: router,
  // 是否需要在发送追踪信息之前请求许可，默认false
  requireConsent: false,
  enableLinkTracking: true,
  // 是否追踪初始页面，默认true
  trackInitialView: false,
  // 最终的追踪js文件名，matomo版本比较老，使用的是piwik，现在新版本的话此值为matomo
  trackerFileName: 'matomo',
  debug: false
});

这一步完成后，已经可以监听到页面访问、加载时间、访问次数、访问时间、实时访客等等数据了。

注意：

1、需要注意的是如果有路由传值值太长的话会matomo会监听不到并报414，就不能根据router自动注册了

解决办法是在app.vue中监听router，然后设置

watch: {
    // 如果有路由传值值太长的话matomo会监听不到并报414，就不能根据router自动注册了：解决办法是在app.vue中监听router，然后设置
    $route(to, from) {
      // 设置页面地址，可使用location.href，注意，如果使用的路由模式是hash模式，需要把url中的#号截取掉
      this.$matomo.setCustomUrl(window.location.href);
      this.$matomo.trackPageView(to.meta.title);//设置页面名称
    },
  },

2、以上就完成了前端埋点，如果需要监听点击事件的话，在点击事件方法内添加matomo方法为：

this.$matomo.trackEvent(category, action, [name], [value])