分析
Plausible Analytics
在你的 Nuxt 应用中使用 Plausible Analytics。
Plausible Analytics 是一款针对 Nuxt 应用的隐私友好型分析解决方案，可让您跟踪网站流量，而不会损害用户的隐私。
在你的 Nuxt 应用中全局加载 Plausible Analytics 的最简单方法是使用 Nuxt 配置。或者，您可以直接使用 useScriptPlausibleAnalytics 组合式 API。
全局加载
如果您不打算发送自定义事件，可以使用 环境覆盖 来在开发环境中禁用脚本。
export default defineNuxtConfig({
scripts: {
registry: {
plausibleAnalytics: {
domain: 'YOUR_DOMAIN'
}
}
}
})
useScriptPlausibleAnalytics
组合式 API useScriptPlausibleAnalytics 可让您对 Plausible Analytics 在网站上的加载时间和方式进行细粒度控制。
const plausible = useScriptPlausibleAnalytics({
domain: 'YOUR_DOMAIN'
})
请遵循 注册表脚本 指南，了解有关高级用法的更多信息。
自托管 Plausible
如果您使用的是自托管版本的 Plausible，则需要为脚本提供显式的 src，以便 API 事件发送到正确的端点。
useScriptPlausibleAnalytics({
scriptInput: {
src: 'https://my-self-hosted-plausible.io/js/script.js'
}
})
PlausibleAnalyticsApi
export interface PlausibleAnalyticsApi {
plausible: ((event: '404', options: Record<string, any>) => void) &
((event: 'event', options: Record<string, any>) => void) &
((...params: any[]) => void) & {
q: any[]
}
}
配置模式
您必须在首次设置脚本时提供选项。
export const PlausibleAnalyticsOptions = object({
domain: string(), // required
extension: optional(union([union(extensions), array(union(extensions))])),
})
示例
仅在生产环境中使用 Plausible Analytics，同时使用 plausible 发送转换事件。
<script setup lang="ts">
const { proxy } = useScriptPlausibleAnalytics()
// noop in development, ssr
// just works in production, client
proxy.plausible('event', { name: 'conversion-step' })
function sendConversion() {
proxy.plausible('event', { name: 'conversion' })
}
</script>
<template>
<div>
<button @click="sendConversion">
Send Conversion
</button>
</div>
</template>