跟踪
Google 标签管理器
在您的 Nuxt 应用程序中使用 Google 标签管理器。
此可组合组件是在与 Chrome Aurora 团队 合作的情况下使用 GoogleChromeLabs/third-party-capital 生成的。
Google 标签管理器 是一种标签管理系统，它允许您快速轻松地更新网站或移动应用程序上的标签和代码片段，例如用于流量分析和营销优化的代码片段。
您可能不需要在 Nuxt 脚本中使用 Google 标签管理器。GTM 的大小为 82kb，会减慢您的网站速度。Nuxt 脚本提供了许多功能，您可以轻松地在您的 Nuxt 应用程序中实现。如果您使用 GTM 来实现 Google 标签管理器，则可以使用
useScriptGoogleAnalytics 可组合组件代替。全局加载
如果您想避免在开发过程中加载分析，您可以在 Nuxt 配置中使用 环境覆盖。
export default defineNuxtConfig({
scripts: {
registry: {
googleTagManager: {
id: '<YOUR_ID>'
}
}
}
})
useScriptGoogleTagManager
useScriptGoogleTagManager 可组合组件允许您对 Google 标签管理器在您网站上的加载时间和方式进行细粒度控制。
const { proxy } = useScriptGoogleTagManager({
id: 'YOUR_ID' // id is only needed if you haven't configured globally
})
// example
proxy.dataLayer.push({ event: 'conversion', value: 1 })
请遵循 注册表脚本 指南以了解有关 proxy 的更多信息。
指南：发送页面事件
如果您想手动将页面事件发送到 Google 标签管理器，可以使用 useScriptEventPage 可组合组件的 proxy。此可组合组件将在页面标题更新后，在路由更改时触发提供的函数。
const { proxy } = useScriptGoogleTagManager({
id: 'YOUR_ID' // id is only needed if you haven't configured globally
})
useScriptEventPage((title, path) => {
// triggered on route change after title is updated
proxy.dataLayer.push({
event: 'pageview',
title,
path
})
})
GoogleTagManagerApi
interface GoogleTagManagerApi {
dataLayer: Record<string, any>[]
google_tag_manager: GoogleTagManager
}
配置模式
您必须在首次设置脚本时提供选项。
export const GoogleTagManagerOptions = object({
/**
* The Google Tag Manager ID.
*/
id: string(),
/**
* The name of the dataLayer you want to use
* @default 'defaultGtm'
*/
dataLayerName: optional(string())
})
示例
仅在生产环境中使用 Google 标签管理器，同时使用 dataLayer 发送转换事件。
<script setup lang="ts">
const { dataLayer } = useScriptGoogleTagManager()
// noop in development, ssr
// just works in production, client
dataLayer.push({ event: 'conversion-step', value: 1 })
function sendConversion() {
dataLayer.push({ event: 'conversion', value: 1 })
}
</script>
<template>
<div>
<button @click="sendConversion">
Send Conversion
</button>
</div>
</template>