vue2使用 matomo 追踪统计用户行为

最新推荐文章于 2025-04-19 07:08:51 发布

七号程序员

最新推荐文章于 2025-04-19 07:08:51 发布

阅读量635

点赞数 5

文章标签： vue.js 前端

本文链接：https://blog.csdn.net/m0_56976301/article/details/143188284

版权

项目开发中应需求接入 matomo 追踪用户行为，获取统计数据。

大部分准备工作在于如何将 matomo 部署到私有服务器上，前端只需要在已有项目中引入 matomo 即可，部署好的 matomo 网站如下：

点击“嵌入跟踪代码”，选择vue.js，点击“此指南”

会看到详细的安装步骤：

其中 host 对应的是自己的 matomo 服务器地址，siteId 是跟项目绑定的唯一标识，通过该变量索引查找到对应项目，在项目里使用时，务必替换为自己的地址和ID。

vue项目接入 matomo 需要安装 vue-matomo，这是官方提供的库：

npm install --save vue-matomo

vue2接入：

import { createApp } from 'vue'
import VueMatomo from 'vue-matomo'
import App from './App.vue'
import router from './router'

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

window._paq.push(['trackPageView']);

new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

此时我们已经成功将 matomo 接入到项目中来，接下来可以在网站上查看统计数据。

另外 matomo 支持接入多个项目，只需在所有网站中新增一个网站，录入相应的页面地址即可。