Reddit 像素
在你的 Nuxt 应用中使用 Reddit 像素。
Reddit 像素 帮助你跟踪转化并为你的 Reddit 广告活动构建受众。
Nuxt Scripts 提供了一个注册脚本组合式函数 useScriptRedditPixel，可让你轻松地在 Nuxt 应用中集成 Reddit 像素。
Nuxt 配置设置
在你的 Nuxt 应用中全局加载 Reddit 像素的最简单方式是使用 Nuxt 配置。或者，你也可以直接使用 useScriptRedditPixel 组合式函数。
如果你不打算发送自定义事件，可以使用 环境变量覆盖 来在开发环境中禁用该脚本。
export default defineNuxtConfig({
scripts: {
registry: {
redditPixel: {
id: 'YOUR_ID'
}
}
}
})
export default defineNuxtConfig({
$production: {
scripts: {
registry: {
redditPixel: {
id: 'YOUR_ID',
}
}
}
}
})
使用环境变量
如果你更喜欢通过环境变量来配置你的 id。
nuxt.config.ts
export default defineNuxtConfig({
scripts: {
registry: {
redditPixel: true,
}
},
// 你需要提供运行时配置以访问环境变量
runtimeConfig: {
public: {
scripts: {
redditPixel: {
id: '', // NUXT_PUBLIC_SCRIPTS_REDDIT_PIXEL_ID
},
},
},
},
})
.env
NUXT_PUBLIC_SCRIPTS_REDDIT_PIXEL_ID=<YOUR_ID>
useScriptRedditPixel
useScriptRedditPixel 组合式函数让你可以精细控制 Reddit 像素在你的站点上何时以及如何加载。
const { proxy } = useScriptRedditPixel({
id: 'YOUR_ID'
})
// 示例
proxy.rdt('track', 'Lead')
请参阅 注册脚本 指南以了解更多高级用法。
RedditPixelApi
export interface RedditPixelApi {
rdt: RdtFns & {
sendEvent: (rdt: RedditPixelApi['rdt'], args: unknown[]) => void
callQueue: unknown[]
}
}
type RdtFns
= & ((event: 'init', id: string) => void)
& ((event: 'track', eventName: string) => void)
配置模式
首次设置脚本时，你必须提供选项。
export const RedditPixelOptions = object({
id: string(),
})
第一方模式
此脚本支持 第一方模式，该模式通过你的域名路由所有流量，以提升隐私保护并绕过广告拦截器。
当全局启用 scripts.firstParty: true 时，此脚本将：
- 从你的域名加载，而非
alb.reddit.com - 通过你的服务器转发跟踪请求
- 完全隐私匿名化 — IP、用户代理、语言、屏幕、时区和硬件指纹全部匿名化（不信任广告网络）
nuxt.config.ts
export default defineNuxtConfig({
scripts: {
firstParty: true,
registry: {
redditPixel: { id: 'YOUR_ID' }
}
}
})
若想为此特定脚本选择退出：
useScriptRedditPixel({
id: 'YOUR_ID',
scriptOptions: {
firstParty: false // 直接从 Reddit 加载
}
})
示例
仅在生产环境使用 Reddit 像素，同时使用 rdt 发送跟踪事件。
<script setup lang="ts">
const { proxy } = useScriptRedditPixel()
// 在开发环境和 SSR 中无操作
// 仅在生产环境客户端有效
function trackConversion() {
proxy.rdt('track', 'Lead')
}
</script>
<template>
<div>
<button @click="trackConversion">
跟踪转化
</button>
</div>
</template>