跟踪
Segment
在您的 Nuxt 应用程序中使用 Segment。
Segment 允许您收集、清理和控制您的客户数据。Segment 帮助您了解您的客户并个性化他们的体验。
Nuxt Scripts 提供了一个注册表脚本可组合 useScriptSegment 以便轻松地将 Segment 集成到您的 Nuxt 应用程序中。
Nuxt 配置设置
在您的 Nuxt 应用程序中全局加载 Segment 的最简单方法是使用 Nuxt 配置。或者，您可以直接使用 useScriptSegment 可组合。
如果您不打算发送自定义事件，您可以使用 环境覆盖 在开发中禁用脚本。
export default defineNuxtConfig({
scripts: {
registry: {
segment: {
writeKey: 'YOUR_WRITE_KEY'
}
}
}
})
使用环境变量
如果您更喜欢使用环境变量配置您的 ID。
nuxt.config.ts
export default defineNuxtConfig({
scripts: {
registry: {
segment: true,
}
},
// you need to provide a runtime config to access the environment variables
runtimeConfig: {
public: {
scripts: {
segment: {
writeKey: '' // NUXT_PUBLIC_SCRIPTS_SEGMENT_WRITE_KEY
}
},
},
},
})
.env
NUXT_PUBLIC_SCRIPTS_SEGMENT_WRITE_KEY=<YOUR_WRITE_KEY>
useScriptSegment
useScriptSegment 可组合让您对 Segment 何时以及如何在您的网站上加载有细粒度控制。
const { proxy } = useScriptSegment({
id: 'YOUR_ID'
})
// example
proxy.track('event', {
foo: 'bar'
})
请遵循 注册表脚本 指南以了解有关高级用法的更多信息。
SegmentApi
interface SegmentApi {
track: (event: string, properties?: Record<string, any>) => void
page: (name?: string, properties?: Record<string, any>) => void
identify: (userId: string, traits?: Record<string, any>, options?: Record<string, any>) => void
group: (groupId: string, traits?: Record<string, any>, options?: Record<string, any>) => void
alias: (userId: string, previousId: string, options?: Record<string, any>) => void
reset: () => void
}
配置模式
您必须在首次设置脚本时提供选项。
export const SegmentOptions = object({
writeKey: string(),
analyticsKey: optional(string()),
})
示例
仅在生产中使用 Segment，同时使用 analytics 发送转换事件。
<script setup lang="ts">
const { proxy } = useScriptSegment()
// noop in development, ssr
// just works in production, client
function sendConversion() {
proxy.track('conversion', {
value: 1,
currency: 'USD'
})
}
</script>
<template>
<div>
<button @click="sendConversion">
Send Conversion
</button>
</div>
</template>