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.
The simplest way to load Meta Pixel globally in your Nuxt App is to use Nuxt config. Alternatively you can directly use the useScriptXPixel composable.
If you don't plan to send custom events you can use the Environment overrides to disable the script in development.
export default defineNuxtConfig({
scripts: {
registry: {
xPixel: {
id: 'YOUR_ID'
}
}
}
})
export default defineNuxtConfig({
$production: {
scripts: {
registry: {
xPixel: {
id: 'YOUR_ID',
}
}
}
}
})
If you prefer to configure your id using environment variables.
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
},
},
},
},
})
NUXT_PUBLIC_SCRIPTS_X_PIXEL_ID=<YOUR_ID>
The useScriptXPixel composable lets you have fine-grain control over when and how X Pixel is loaded on your site.
const { proxy } = useScriptXPixel({
id: 'YOUR_ID'
})
// example
proxy.twq('event', '<EventId>', {
value: 1,
})
Please follow the Registry Scripts guide to learn more about advanced usage.
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[]
}
You must provide the options when setting up the script for the first time.
export const XPixelOptions = object({
id: string(),
version: optional(string()),
})
Using X Pixel only in production while using twq to send a conversion event.
<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>