跟踪
Meta Pixel
在您的 Nuxt 应用中使用 Meta Pixel。
Meta Pixel 允许您衡量、优化和构建 Facebook 广告系列的受众。
Nuxt Scripts 提供一个注册表脚本可组合函数 useScriptMetaPixel，以便轻松地将 Meta Pixel 集成到您的 Nuxt 应用中。
Nuxt 配置设置
在您的 Nuxt 应用中全局加载 Meta Pixel 的最简单方法是使用 Nuxt 配置。或者，您可以直接使用 useScriptMetaPixel 可组合函数。
如果您不打算发送自定义事件，则可以使用 环境覆盖 在开发中禁用该脚本。
export default defineNuxtConfig({
scripts: {
registry: {
metaPixel: {
id: 'YOUR_ID'
}
}
}
})
使用环境变量
如果您希望使用环境变量配置您的 ID。
nuxt.config.ts
export default defineNuxtConfig({
scripts: {
registry: {
metaPixel: true,
}
},
// you need to provide a runtime config to access the environment variables
runtimeConfig: {
public: {
scripts: {
metaPixel: {
id: '', // NUXT_PUBLIC_SCRIPTS_META_PIXEL_ID
},
},
},
},
})
.env
NUXT_PUBLIC_SCRIPTS_META_PIXEL_ID=<YOUR_ID>
useScriptMetaPixel
useScriptMetaPixel 可组合函数使您可以对 Meta Pixel 何时以及如何在您的网站上加载进行细粒度控制。
const { proxy } = useScriptMetaPixel({
id: 'YOUR_ID'
})
// example
proxy.fbq('track', 'ViewContent', {
content_name: 'Nuxt Pixel',
content_category: 'Nuxt',
})
请按照 注册表脚本 指南了解更多有关高级用法的知识。
MetaPixelApi
export interface MetaPixelApi {
fbq: FbqFns & {
push: FbqFns
loaded: boolean
version: string
queue: any[]
}
_fbq: MetaPixelApi['fbq']
}
type FbqFns = ((event: 'track', eventName: StandardEvents, data?: EventObjectProperties) => void)
& ((event: 'trackCustom', eventName: string, data?: EventObjectProperties) => void)
& ((event: 'init', id: number, data?: Record<string, any>) => void)
& ((event: 'init', id: string) => void)
& ((event: string, ...params: any[]) => void)
type StandardEvents = 'AddPaymentInfo' | 'AddToCart' | 'AddToWishlist' | 'CompleteRegistration' | 'Contact' | 'CustomizeProduct' | 'Donate' | 'FindLocation' | 'InitiateCheckout' | 'Lead' | 'Purchase' | 'Schedule' | 'Search' | 'StartTrial' | 'SubmitApplication' | 'Subscribe' | 'ViewContent'
interface EventObjectProperties {
content_category?: string
content_ids?: string[]
content_name?: string
content_type?: string
contents: { id: string, quantity: number }[]
currency?: string
delivery_category?: 'in_store' | 'curbside' | 'home_delivery'
num_items?: number
predicted_ltv?: number
search_string?: string
status?: 'completed' | 'updated' | 'viewed' | 'added_to_cart' | 'removed_from_cart' | string
value?: number
[key: string]: any
}
配置模式
您必须在首次设置脚本时提供选项。
export const MetaPixelOptions = object({
id: number(),
sv: optional(number()),
})
示例
仅在生产环境中使用 Meta Pixel，同时使用 fbq 发送转化事件。
<script setup lang="ts">
const { proxy } = useScriptMetaPixel()
// noop in development, ssr
// just works in production, client
function sendConversion() {
proxy.fbq('trackCustom', 'conversion', {
value: 1,
currency: 'USD'
})
}
</script>
<template>
<div>
<button @click="sendConversion">
Send Conversion
</button>
</div>
</template>