分析
Matomo Analytics
在您的 Nuxt 应用中使用 Matomo Analytics。
Matomo Analytics 是 Nuxt 应用的一个很棒的分析解决方案。
它提供了关于您的网站性能、用户如何与您的内容交互以及他们如何浏览您的网站的详细信息。
在您的 Nuxt 应用中全局加载 Matomo Analytics 的最简单方法是使用 Nuxt 配置。或者，您可以直接使用 useScriptMatomoAnalytics 可组合函数。
全局加载
以下配置假设您使用的是默认 siteId 为 1 的 Matomo Cloud。
如果您自托管，则需要提供 matomoUrl。如果您想跟踪其他网站，可以使用 siteId 添加它们。
export default defineNuxtConfig({
scripts: {
registry: {
matomoAnalytics: {
cloudId: 'YOUR_CLOUD_ID', // e.g. nuxt.matomo.cloud
}
}
}
})
useScriptMatomoAnalytics
可组合函数 useScriptMatomoAnalytics 使您能够精细控制 Matomo Analytics 在您网站上的加载时间和方式。
const matomoAnalytics = useScriptMatomoAnalytics({
cloudId: 'YOUR_CLOUD_ID', // e.g. nuxt.matomo.cloud
})
默认情况下，使用 siteId 为 1，并且不跟踪页面。您可以通过将 trackPageView 设置为 true 来启用跟踪。
const matomoAnalytics = useScriptMatomoAnalytics({
cloudId: 'YOUR_CLOUD_ID', // e.g. nuxt.matomo.cloud
trackPageView: true,
siteId: 2,
})
如果您想更全面地控制跟踪，例如设置自定义维度，可以使用 proxy 对象发送事件。
const { proxy } = useScriptMatomoAnalytics({
cloudId: 'YOUR_CLOUD_ID', // e.g. nuxt.matomo.cloud
})
// set custom dimension
proxy._paq.push(['setCustomDimension', 1, 'value'])
// send page event
proxy._paq.push(['trackPageView'])
请参阅 配置模式 以了解所有可用选项。
使用自托管的 Matomo
对于自托管的 Matomo，请设置 matomoUrl 以自定义跟踪，您可能需要设置 trackerUrl（如果您对其进行了自定义）。
const matomoAnalytics = useScriptMatomoAnalytics({
// e.g. https://your-url.com/tracker.js & https://your-url.com//matomo.php both exists
matomoUrl: 'https://your-url.com',
})
使用 Matomo 白标
对于 Matomo 白标，请设置 trackerUrl 和 scriptInput.src 以自定义跟踪。
const matomoAnalytics = useScriptMatomoAnalytics({
trackerUrl: 'https://c.staging.cookie3.co/lake',
scriptInput: {
src: 'https://cdn.cookie3.co/scripts/analytics/latest/cookie3.analytics.min.js',
},
})
请遵循 注册表脚本 指南以了解有关高级用法的更多信息。
MatomoAnalyticsApi
interface MatomoAnalyticsApi {
_paq: unknown[]
}
配置模式
您必须在首次设置脚本时提供选项。
// matomoUrl and site are required
export const MatomoAnalyticsOptions = object({
matomoUrl: optional(string()),
siteId: optional(string()),
trackerUrl: optional(string()),
trackPageView: optional(boolean()),
enableLinkTracking: optional(boolean()),
disableCookies: optional(boolean()),
})
示例
仅在生产环境中使用 Matomo Analytics，同时使用 _paq 发送转换事件。
<script setup lang="ts">
const { proxy } = useScriptMatomoAnalytics()
// noop in development, ssr
// just works in production, client
function sendConversion() {
proxy._paq.push(['trackGoal', 1])
}
</script>
<template>
<div>
<button @click="sendConversion">
Send Conversion
</button>
</div>
</template>