Skip to main content
Scripts

Meta Pixel

Copy for LLMs

Meta Pixel sends conversion and audience events to Meta Ads.

useScriptMetaPixel() loads the pixel and exposes the fbq queue.

Meta Pixel

View source

Nuxt Config Setup

Add this to your nuxt.config.ts to load Meta Pixel globally. Alternatively you can use the useScriptMetaPixel composable for more control. 

export default defineNuxtConfig({
  scripts: {
    registry: {
      metaPixel: {
        id: '123456789012345',
        trigger: 'onNuxtReady',
      }
    }
  }
})

This config automatically enables first-party mode (bundle + proxy). See below to customise.

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: Privacy Focused Proxy

No extra config needed. The script is bundled from your domain (faster loads, no extra DNS lookup) and runtime requests are reverse-proxied through your server with automatic anonymisation (user IPs stay hidden from Meta Pixel, works with ad blockers). Learn more.

Mode
Bundle Proxy Partytown
Privacy
All identifying data is stripped: IP, user agent, language, screen size, timezone, and hardware fingerprints.
export default defineNuxtConfig({
  scripts: {
    // ✅ First-party mode: bundled + proxied
    registry: {
      metaPixel: {
        id: '123456789012345',
        trigger: 'onNuxtReady',
      },
    },
  },
})

Example

Using Meta Pixel in a component with 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>
idstring | number required

Your Meta (Facebook) Pixel ID.

defaultConsent'granted' | 'denied'

Default consent state. `'granted'` fires `fbq('consent', 'grant')`, `'denied'` fires `fbq('consent', 'revoke')`, both called before `fbq('init', id)`.

Consent Mode

Meta Pixel exposes a binary consent toggle. Set the initial state with defaultConsent (fires fbq('consent', 'grant'|'revoke') before fbq('init', id)) and call consent.grant() / consent.revoke() at runtime:

<script setup lang="ts">
const { consent } = useScriptMetaPixel({
  id: 'YOUR_PIXEL_ID',
  defaultConsent: 'denied',
})

function acceptAds() {
  consent.grant()
}
function rejectAds() {
  consent.revoke()
}
</script>

defaultConsent: 'denied' queues a revoke command before pixel initialization, but it does not delay the SDK request. If your consent policy requires no request to Meta before opt-in, use a binary load gate for the script itself.

Edit this page
Markdown For LLMs

Matomo Analytics

Track Matomo page views and events with built-in consent controls.

Mixpanel

Load Mixpanel and track product events, identities, profiles, and consent.