---
title: "Meta Pixel · Nuxt Scripts"
meta:
  description: "Nuxt Scripts lets you load third-party scripts with better performance, privacy, security and DX. It includes many popular third-parties out of the box."
  "og:description": "Nuxt Scripts lets you load third-party scripts with better performance, privacy, security and DX. It includes many popular third-parties out of the box."
  "og:title": "Meta Pixel · Nuxt Scripts"
---

```

Nuxt Scripts on GitHub

**

**Tracking**# **Meta Pixel**[Copy for LLMs](https://scripts.nuxt.com/scripts/v0/tracking/meta-pixel.md) [**~~Meta Pixel~~**](https://www.facebook.com/business/tools/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. ### 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. If you don't plan to send custom events you can use the [**~~Environment overrides~~**](https://nuxt.com/docs/getting-started/configuration#environment-overrides) to disable the script in development.```
export default defineNuxtConfig({
  scripts: {
    registry: {
      metaPixel: {
        id: 'YOUR_ID'
      }
    }
  }
})
``````
export default defineNuxtConfig({
  $production: {
    scripts: {
      registry: {
        metaPixel: {
          id: 'YOUR_ID',
        }
      }
    }
  }
})
```#### With Environment Variables If you prefer to configure your id using environment variables.nuxt.config.ts```
export default defineNuxtConfig({
  scripts: {
    registry: {
      metaPixel: true,
    }
  },
  // you need to provide a runtime config to access the environment variables
  runtimeConfig: {
    public: {
      scripts: {
        metaPixel: {
          id: '', // NUXT_PUBLIC_SCRIPTS_META_PIXEL_ID
        },
      },
    },
  },
})
```.env```
NUXT_PUBLIC_SCRIPTS_META_PIXEL_ID=<YOUR_ID>
```## useScriptMetaPixel The `useScriptMetaPixel` composable lets you have fine-grain control over when and how Meta Pixel is loaded on your site.```
const { proxy } = useScriptMetaPixel({
  id: 'YOUR_ID'
})
// example
proxy.fbq('track', 'ViewContent', {
  content_name: 'Nuxt Pixel',
  content_category: 'Nuxt',
})
``` Please follow the [**~~Registry Scripts~~**](https://scripts.nuxt.com/docs/guides/registry-scripts) guide to learn more about advanced usage. ### 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()),
})
```## Example Using Meta Pixel only in production while using `fbq` to send a conversion event.```
<script setup lang="ts">
const { proxy } = useScriptMetaPixel()

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

<template>
  <div>
    <button @click="sendConversion">
      Send Conversion
    </button>
  </div>
</template>
```[~~Edit this page~~](https://github.com/nuxt/scripts/edit/0.x/docs/content/scripts/v0/tracking/meta-pixel.md) [~~Markdown For LLMs~~](https://scripts.nuxt.com/scripts/v0/tracking/meta-pixel.md) [**Google Tag Manager** Use Google Tag Manager in your Nuxt app.](https://scripts.nuxt.com/scripts/v0/tracking/google-tag-manager) [**Reddit Pixel** Use Reddit Pixel in your Nuxt app.](https://scripts.nuxt.com/scripts/v0/tracking/reddit-pixel)**On this page **- [Nuxt Config Setup](#nuxt-config-setup) - [useScriptMetaPixel](#usescriptmetapixel) - [Example](#example)