vue+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,可根据需求来设置,非必传,也可以在用户登录成功之后设置'
})

到此,就已经可以监听到页面访问、加载时间、访问次数、访问时间、实时访客等等数据。如图:
vue+vue-matomo实现埋点_第1张图片
vue+vue-matomo实现埋点_第2张图片

vue+vue-matomo实现埋点_第3张图片
页面标题展示的就是在项目中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])

点击查看更多参数

你可能感兴趣的:(VUE,vue)