Meta Pixel
Meta Pixel lets you measure, optimise and build audiences for your Facebook ad campaigns.
Nuxt Scripts provides a registry script composable useScriptMetaPixel() to easily integrate Meta Pixel in your Nuxt app.
Script Stats
Nuxt Config Setup
The simplest way to load Meta Pixel globally in your Nuxt App is to use Nuxt config. Alternatively you can directly use the useScriptMetaPixel composable.
export default defineNuxtConfig({
scripts: {
registry: {
metaPixel: {
id: '123456789012345'
}
}
}
})useScriptMetaPixel
The useScriptMetaPixel composable lets you have fine-grain control over when and how Meta Pixel is loaded on your site.
const { proxy } = useScriptMetaPixel()
proxy.fbq('track', 'Purchase', { value: 1, currency: 'USD' })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: {
metaPixel: { id: '123456789012345'}
}
}
})To opt-out for this specific script:
useScriptMetaPixel({
id: '123456789012345',
scriptOptions: {
firstParty: false
}
})Example
Using Meta Pixel only in production while using the proxy to send events.
<script setup lang="ts">
const { proxy } = useScriptMetaPixel()
// noop in development, ssr
// just works in production, client
function handleAction() {
proxy.fbq('track', 'Purchase', { value: 1, currency: 'USD' })
}
</script>
<template>
<div>
<button @click="handleAction">
Send Event
</button>
</div>
</template>MetaPixelApi
export interface MetaPixelApi {
fbq: FbqFns & {
push: FbqFns
loaded: boolean
version: string
queue: any[]
}
_fbq: MetaPixelApi['fbq']
}
type FbqArgs =
| ['track', StandardEvents, EventObjectProperties?]
| ['trackCustom', string, EventObjectProperties?]
| ['trackSingle', string, StandardEvents, EventObjectProperties?]
| ['trackSingleCustom', string, string, EventObjectProperties?]
| ['init', string]
| ['init', number, Record<string, any>?]
| ['consent', ConsentAction]
| [string, ...any[]]
type FbqFns = (...args: FbqArgs) => 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
}
type ConsentAction = 'grant' | 'revoke'
Config Schema
You must provide the options when setting up the script for the first time.
export const MetaPixelOptions = object({
id: number(),
sv: optional(number()),
})