分析
Fathom Analytics
在你的 Nuxt 应用中使用 Fathom Analytics。
Fathom Analytics 是一款适用于 Nuxt 应用的隐私分析解决方案。 它不会收集来自访客的个人数据，但会提供有关网站使用情况的详细见解。
全局加载
在你的 Nuxt 应用中全局加载 Fathom Analytics 最简单的方法是使用 Nuxt 配置，提供你的站点 ID 作为字符串。
export default defineNuxtConfig({
scripts: {
registry: {
fathomAnalytics: {
site: 'YOUR_TOKEN_ID'
}
}
}
})
Composable useScriptFathomAnalytics
Composable useScriptFathomAnalytics 可让你对 Fathom Analytics 在网站上的加载时间和方式进行精细控制。
useScriptFathomAnalytics(options)
默认值
- 触发器：当 Nuxt 完成 hydration 时，脚本将加载。
选项
export const FathomAnalyticsOptions = object({
/**
* The Fathom Analytics site ID.
*/
site: string(),
/**
* The Fathom Analytics tracking mode.
*/
spa: optional(union([literal('auto'), literal('history'), literal('hash')])),
/**
* Automatically track page views.
*/
auto: optional(boolean()),
/**
* Enable canonical URL tracking.
*/
canonical: optional(boolean()),
/**
* Honor Do Not Track requests.
*/
honorDnt: optional(boolean()),
})
此外，与所有注册表脚本一样，你可以提供额外的配置
scriptInput- 要添加到脚本标签的 HTML 属性。scriptOptions- 查看 脚本选项。 不支持打包，bundle: true不会执行任何操作。
返回值
Fathom Analytics composable 会将 window.fathom 对象注入到全局作用域中。
export interface FathomAnalyticsApi {
beacon: (ctx: { url: string, referrer?: string }) => void
blockTrackingForMe: () => void
enableTrackingForMe: () => void
isTrackingEnabled: () => boolean
send: (type: string, data: unknown) => void
setSite: (siteId: string) => void
sideId: string
trackPageview: (ctx?: { url: string, referrer?: string }) => void
trackGoal: (goalId: string, cents: number) => void
trackEvent: (eventName: string, value: { _value: number }) => void
}
你可以直接作为代理访问 fathom 对象，或者等待 $script promise 来访问该对象。 建议对任何 void 函数使用代理。
const { proxy } = useScriptFathomAnalytics()
function trackMyGoal() {
proxy.trackGoal('MY_GOAL_ID', 100)
}
示例
当 Nuxt 准备就绪时，通过 app.vue 加载 Fathom Analytics。
app.vue
<script setup>
useScriptFathomAnalytics({
site: 'YOUR_SITE_ID',
scriptOptions: {
trigger: 'onNuxtReady'
}
})
</script>