VUE-MATOMO实现埋点

matomo 原名（piwik）主要用于统计用户访问记录，其原理是在宿主系统（有统计需求的系统）应用上放置探针，即系统对接，在不影响宿主系统正常运营的条件下，统计各种主要的指标，以达到数据分析和再加工的目的。

matomo官网

Matomo/Piwik中文网地址 内有vue-matomo简单介绍以及demo.

简单介绍完毕，正文开始！！！

首先引入vue-matomo

npm i vue-matomo

在 main.js中配置

import VueMatomo from 'vue-matomo'
Vue.use(VueMatomo, {
  host: `你自己的matomo地址`,
  siteId: '这个值页需要去matomo上去申请', // siteId值
  // 根据router自动注册,需要注意的是如果有路由传值值太长的话会matomo会监听不到并报414，就不能使用此方法了
   router: router,
  // 是否需要在发送追踪信息之前请求许可
  // 默认false
  requireConsent: false,
  enableLinkTracking: true,
  // 是否追踪初始页面
  // 默认true
  trackInitialView: false,
  // 最终的追踪js文件名，因为我这边的matomo版本比较老，所以使用的是piwik，现在版本新的话此值应该为matomo
  trackerFileName: 'piwik',
  debug: true,
  userId:'当前用户登录Id,可根据需求来设置，非必传，也可以在用户登录成功之后设置'
})

 

到此，就已经可以监听到页面访问、加载时间、访问次数、访问时间、实时访客等等数据。

 

页面标题展示的就是在项目中router中设置的title.

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

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

watch: {
    $route (to, from) {
       this.$matomo.setCustomUrl('设置页面地址，可使用location.href，注意，如果使用的路由模式是hash模式，需要把url中的#号截取掉')
       this.$matomo.trackPageView(to.meta.title) //设置页面名称
    },
  },

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

//使用事件类别（视频，音乐，游戏...），事件动作（播放，暂停，时长，添加播放列表，下载，单击...）以及可选的事件名称和可选的数值来记录事件。
this.$matomo.trackEvent(category, action, [name], [value])