X 像素 · Nuxt 脚本

X 像素允许您收集、清理和控制您的客户数据。X 可以帮助您了解您的客户并个性化他们的体验。

Nuxt 脚本提供了一个注册表脚本可组合函数 useScriptXPixel，以便轻松地将 X 像素集成到您的 Nuxt 应用中。

Nuxt 配置设置

在您的 Nuxt 应用中全局加载 Meta 像素的最简单方法是使用 Nuxt 配置。或者，您可以直接使用 useScriptXPixel 可组合函数。

如果您不打算发送自定义事件，可以使用环境覆盖在开发中禁用脚本。

export default defineNuxtConfig({
  scripts: {
    registry: {
      xPixel: {
        id: 'YOUR_ID'
      }
    }
  }
})

使用环境变量

如果您希望使用环境变量配置您的 ID。

nuxt.config.ts

export default defineNuxtConfig({
  scripts: {
    registry: {
      xPixel: true,
    }
  },
  // you need to provide a runtime config to access the environment variables
  runtimeConfig: {
    public: {
      scripts: {
        xPixel: {
          id: '', // NUXT_PUBLIC_SCRIPTS_X_PIXEL_ID
        },
      },
    },
  },
})

.env

NUXT_PUBLIC_SCRIPTS_X_PIXEL_ID=<YOUR_ID>

useScriptXPixel

可组合函数 useScriptXPixel 允许您对 X 像素在您的网站上的加载时间和方式进行细粒度控制。

const { proxy } = useScriptXPixel({
  id: 'YOUR_ID'
})
// example
proxy.twq('event', '<EventId>', {
  value: 1,
})

请遵循注册表脚本指南，以了解更多有关高级用法的知识。

XPixelApi

export interface XPixelApi {
  fbq: FbqFns & {
    push: FbqFns
    loaded: boolean
    version: string
    queue: any[]
  }
  _fbq: XPixelApi['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 XPixelOptions = object({
  id: string(),
  version: optional(string()),
})

示例

仅在生产环境中使用 X 像素，同时使用 twq 发送转换事件。

<script setup lang="ts">
const { proxy } = useScriptXPixel()

// noop in development, ssr
// just works in production, client
function sendConversion() {
  proxy.twq('event', 'Purchase', {
    value: 1,
    currency: 'USD'
  })
}
</script>

<template>
  <div>
    <button @click="sendConversion">
      Send Conversion
    </button>
  </div>
</template>

Segment

在您的 Nuxt 应用中使用 Segment。

NPM

在您的 Nuxt 应用中从 NPM 加载 IIFE 脚本。