前端埋点VueMatomo

npm install vue-matomo

main.js

//埋点
import VueMatomo from 'vue-matomo'

Vue.use(VueMatomo, {
  host: 'xxxxxx', // 自己的matomo服务器地址,根据tracking code中填写
  siteId: xxx, // siteId值,根据tracking code中填写
  router: router,  // 根据router自动注册
  requireConsent: false, // 是否需要在发送追踪信息之前请求许可,默认false
  enableLinkTracking: true,
  trackInitialView: false, // 是否追踪初始页面,默认true
  trackerFileName: 'matomo', // 最终的追踪js文件名,默认'matomo'
  debug: false
});

App.vue
第一次进入this.$matomo为undefined,加setTimeout

watch: {
    $route(to, form) {
      setTimeout(() => {
        if (this.first) {
        this.$matomo.setRequestMethod("GET");
        this.$matomo.setUserId('用户id');
        this.first = false
      }
      this.$matomo.setCustomUrl(window.location.href);
      this.$matomo.trackPageView(document.title);
      }, 500);
    },
  },
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一、概念介绍 Vue.js和React.js分别是目前国内和国外最火的前端框架,框架跟类库/插件不同,框架是一套完...
    刘远舟阅读 1,095评论 0 0
  • 一:什么是闭包?闭包的用处? (1)闭包就是能够读取其他函数内部变量的函数。在本质上,闭包就 是将函数内部和函数外...
    彩云_789d阅读 1,020评论 0 1
  • vue面试题 一、vue优点 1.轻量级框架:只关注视图层,是一个构建数据的视图集合,大小只有几十kb; 2.简单...
    没糖_cristalle阅读 1,633评论 0 3
  • 响应式布局的理解 响应式开发目的是一套代码可以在多种终端运行,适应不同屏幕的大小,其原理是运用媒体查询,在不同屏幕...
    懒猫_6500阅读 809评论 0 0
  • 2018web前端最新面试题总结 一、Html/Css基础模块 基础部分 什么是HTML?答:​ HTML并不是...
    duans_阅读 4,690评论 3 27