分析
Google Analytics
在您的 Nuxt 应用中使用 Google Analytics。
这个可组合组件是与 GoogleChromeLabs/third-party-capital 合作，并与 Chrome Aurora 团队 共同开发的。
Google Analytics 是一个用于 Nuxt 应用的分析解决方案。
它提供了有关您的网站表现、用户如何与您的内容互动以及用户如何在您的网站上浏览的详细见解。
在您的 Nuxt 应用中全局加载 Google Analytics 的最简单方法是使用 Nuxt 配置。或者，您可以直接使用 useScriptGoogleAnalytics 可组合组件。
全局加载
如果您不打算发送自定义事件，您可以使用 环境覆盖 在开发环境中禁用脚本。
export default defineNuxtConfig({
scripts: {
registry: {
googleAnalytics: {
id: 'YOUR_ID',
}
}
}
})
useScriptGoogleAnalytics
useScriptGoogleAnalytics 可组合组件可以让您细粒度地控制何时以及如何在您的网站上加载 Google Analytics。
const googleAnalytics = useScriptGoogleAnalytics({
id: 'YOUR_ID'
})
请遵循 脚本注册表 指南，以了解有关高级用法的更多信息。
使用
要与 Google Analytics API 交互，建议使用脚本 代理。
const { proxy } = useScriptGoogleAnalytics()
proxy.gtag('event', 'page_view')
代理会公开 gtag 和 dataLayer 属性，您应该根据 Google Analytics 的最佳实践来使用它们。
GoogleAnalyticsApi
interface GTag {
(fn: 'js', opt: Date): void
(fn: 'config', opt: string): void
(fn: 'event', opt: string, opt2?: {
[key: string]: any
}): void
(fn: 'set', opt: {
[key: string]: string
}): void
(fn: 'get', opt: string): void
(fn: 'consent', opt: 'default', opt2: {
[key: string]: string
}): void
(fn: 'consent', opt: 'update', opt2: {
[key: string]: string
}): void
(fn: 'config', opt: 'reset'): void
}
interface GoogleAnalyticsApi {
dataLayer: Record<string, any>[]
gtag: GTag
}
配置模式
您必须在首次设置脚本时提供选项。
export const GoogleAnalyticsOptions = object({
/**
* The Google Analytics ID.
*/
id: string(),
/**
* The datalayer's name you want it to be associated with
*/
dataLayerName: optional(string())
})
示例
仅在生产环境中使用 Google Analytics，同时使用 gtag 发送转化事件。
<script setup lang="ts">
const { proxy } = useScriptGoogleAnalytics()
// noop in development, ssr
// just works in production, client
proxy.gtag('event', 'conversion-test')
function sendConversion() {
proxy.gtag('event', 'conversion')
}
</script>
<template>
<div>
<button @click="sendConversion">
Send Conversion
</button>
</div>
</template>