分析
Cloudflare 网站分析
在您的 Nuxt 应用程序中使用 Cloudflare 网站分析。
Cloudflare 网站分析 与 Nuxt 是一个很棒的隐私分析解决方案。 它为您的网站提供免费的、以隐私为中心的分析。 它不会从您的访问者那里收集个人数据，但会提供有关您的网页性能的详细见解，这些见解是您的访问者体验到的。
在您的 Nuxt 应用程序中全局加载 Cloudflare 网站分析的最简单方法是使用 Nuxt 配置。 或者，您可以直接使用 useScriptCloudflareWebAnalytics 组合。
全局加载
如果您希望避免在开发中加载分析，您可以在您的 Nuxt 配置中使用 环境覆盖。
export default defineNuxtConfig({
scripts: {
registry: {
cloudflareWebAnalytics: {
token: 'YOUR_TOKEN_ID'
}
}
}
})
useScriptCloudflareWebAnalytics
The useScriptCloudflareWebAnalytics 组合让您可以对 Cloudflare 网站分析在您的网站上何时以及如何加载进行细粒度控制。
function useScriptCloudflareWebAnalytics<T extends CloudflareWebAnalyticsApi>(_options?: CloudflareWebAnalyticsInput) {}
请遵循 注册表脚本 指南以了解有关高级用法的更多信息。
组合具有以下默认值
- 触发器：客户端 脚本将在 Nuxt 处于水合状态时加载，以保持网络重要指标的准确性。
CloudflareWebAnalyticsInput
export const CloudflareWebAnalyticsOptions = object({
/**
* The Cloudflare Web Analytics token.
*/
token: string([minLength(32)]),
/**
* Cloudflare Web Analytics enables measuring SPAs automatically by overriding the History API’s pushState function
* and listening to the onpopstate. Hash-based router is not supported.
*
* @default true
*/
spa: optional(boolean()),
})
CloudflareWebAnalyticsApi
export interface CloudflareWebAnalyticsApi {
__cfBeacon: {
load: 'single'
spa: boolean
token: string
}
}
示例
通过 Nuxt 准备就绪时的 app.vue 加载 Cloudflare 网站分析。
app.vue
<script setup lang="ts">
useScriptCloudflareWebAnalytics({
token: '12ee46bf598b45c2868bbc07a3073f58',
scriptOptions: {
trigger: 'onNuxtReady'
}
})
</script>
Cloudflare 网站分析组合将一个 window.__cfBeacon 对象注入全局作用域。 如果您需要访问它，您可以通过等待脚本来实现。
const { onLoaded } = useScriptCloudflareWebAnalytics()
onLoaded(({ cfBeacon }) => {
console.log(cfBeacon)
})