X Pixel
X Pixel lets you collect, clean, and control your customer data. X helps you to understand your customers and personalize their experience.
Nuxt Scripts provides a registry script composable useScriptXPixel() to easily integrate X Pixel in your Nuxt app.
Script Stats
Nuxt Config Setup
The simplest way to load X Pixel globally in your Nuxt App is to use Nuxt config. Alternatively you can directly use the useScriptXPixel composable.
export default defineNuxtConfig({
scripts: {
registry: {
xPixel: {
id: 'oxxxxxx'
}
}
}
})useScriptXPixel
The useScriptXPixel composable lets you have fine-grain control over when and how X Pixel is loaded on your site.
const { proxy } = useScriptXPixel()
proxy.twq('event', 'tw-xxxxx-xxxxx')Please follow the Registry Scripts guide to learn more about advanced usage.
First-Party Mode
This script supports First-Party Mode which routes all traffic through your domain for improved privacy and ad blocker bypass.
export default defineNuxtConfig({
scripts: {
firstParty: true,
registry: {
xPixel: { id: 'oxxxxxx'}
}
}
})To opt-out for this specific script:
useScriptXPixel({
id: 'oxxxxxx',
scriptOptions: {
firstParty: false
}
})Example
Using X Pixel only in production while using the proxy to send events.
<script setup lang="ts">
const { proxy } = useScriptXPixel()
// noop in development, ssr
// just works in production, client
function handleAction() {
proxy.twq('event', 'tw-xxxxx-xxxxx')
}
</script>
<template>
<div>
<button @click="handleAction">
Send Event
</button>
</div>
</template>XPixelApi
export interface XPixelApi {
twq: TwqFns & {
loaded: boolean
version: string
queue: any[]
}
}
type TwqFns =
((event: 'event', eventId: string, data?: EventObjectProperties) => void)
& ((event: 'config', id: string) => void)
& ((event: string, ...params: any[]) => void)
interface ContentProperties {
content_type?: string | null
content_id?: string | number | null
content_name?: string | null
content_price?: string | number | null
num_items?: string | number | null
content_group_id?: string | number | null
}
interface EventObjectProperties {
value?: string | number | null
currency?: string | null
conversion_id?: string | number | null
email_address?: string | null
phone_number?: string | null
contents: ContentProperties[]
}
Config Schema
You must provide the options when setting up the script for the first time.
export const XPixelOptions = object({
id: string(),
version: optional(string()),
})