Vue-Matomo 安装与配置指南

Vue-Matomo 安装与配置指南

vue-matomoVue plugin for Matomo Analytics项目地址:https://gitcode.com/gh_mirrors/vu/vue-matomo

1. 项目目录结构及介绍

Vue-Matomo 的目录结构一般包括以下几个主要部分：

your-project/
|-- src/
|   |-- main.js                 # 应用入口文件，用于初始化Vue和Vue-Matomo
|   |-- components/             # 自定义组件目录
|   ...
|-- public/
|   |-- index.html              # 主页模板
|   ...
|-- package.json                # 项目依赖及脚本配置
|-- .env.example               # 示例环境变量文件（可选）
|-- .gitignore                  # Git 忽略规则
|-- README.md                   # 项目说明文档

在这里，main.js 是我们关注的重点，因为它是应用的启动点，用于引入 vue-matomo 包并设置跟踪参数。

2. 项目的启动文件介绍

在 src/main.js 文件中，你需要导入 vue-matomo 并配置你的 Matomo 实例细节。例如：

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

const app = createApp(App)
app.use(VueMatomo, {
  host: '[YOUR_MATOMO_INSTANCE_URL]', // 你的 Matomo 实例URL
  siteId: [YOUR_SITE_ID],            // 网站ID
})
.mount('#app')

// 添加页面视图跟踪
window._paq.push(['trackPageView'])

这段代码首先创建一个 Vue 应用实例，然后注册 vue-matomo 插件，提供你的 Matomo 实例的 URL 和网站 ID。最后将应用挂载到 HTML 中的指定元素上，并调用 trackPageView 追踪页面访问。

3. 项目的配置文件介绍

Vue-Matomo 的配置通常通过传递给 app.use() 方法的选项对象完成。这里的关键配置有：

• host：你的 Matomo 实例的完整URL，不带尾部斜线。
• siteId：在 Matomo 后台为你的网站分配的唯一标识ID。
• 可选配置还包括其他跟踪参数，如用户自定义事件 (trackEvent) 或者设置额外的 Matomo 属性 (additionalParameters)。

此外，如果你的项目使用环境变量来管理敏感信息（如 MATOMO_HOST 和 MATOMO_SITE_ID），你可以创建 .env 文件来存储这些值，然后在你的配置中使用它们：

app.use(VueMatomo, {
  host: process.env.MATOMO_HOST,
  siteId: process.env.MATOMO_SITE_ID,
})

确保在运行项目时正确加载了这些环境变量。对于开发模式，你可能需要创建一个 .env.development 文件，并在命令行中使用 npm run serve 时自动加载它。

完成上述步骤后，你就可以在 Vue.js 应用中成功集成 Matomo 跟踪代码，并开始收集数据了。要验证安装是否成功，访问你的网站并在 Matomo 后台检查是否有数据显示。如果有任何问题，可以参考官方文档或联系支持团队获取帮助。

vue-matomoVue plugin for Matomo Analytics项目地址:https://gitcode.com/gh_mirrors/vu/vue-matomo