Meta Pixel

Configure the Meta Pixel

Copy the pixel ID from Meta Events Manager. Remove the original pixel snippet, its <noscript> tracking image and any tag-manager entry that loads the same pixel.

npm install @c15t/integrations@alpha

pnpm add @c15t/integrations@alpha

yarn add @c15t/integrations@alpha

bun add @c15t/integrations@alpha

import { metaPixel } from '@c15t/integrations/meta-pixel';

export const scripts = [metaPixel({ pixelId: '123456789012345' })];

Register the scripts

Complete your framework quickstart first. Keep its Inth endpoint, policy, styles and consent UI. Remove the vendor's original script, SDK initializer or tag-manager entry, so the vendor loads only through c15t.

The vendor pages put the helper in src/consent-scripts.ts. If your framework quickstart already has a scripts array, such as the one in c15t.config.ts in the Next.js guide, add the helper to that array instead of creating a second file. The scripts export is a configuration, not an initializer. Add it to the c15t provider you already have, at the registration point for your framework below. These are edits to that provider, not a second provider.

import { defineConsentConfig } from 'c15t/next';
import { scripts } from './src/consent-scripts';

export default defineConsentConfig({ scripts });

Options

Loading and revocation

metaPixel uses the marketing category. Before marketing is allowed, c15t defines no fbq function and loads nothing from Meta. When marketing becomes allowed, the helper queues fbq('consent', 'grant'), the optional data processing options, init and PageView, then loads fbevents.js.

On revocation the helper keeps the pixel script and calls fbq('consent', 'revoke'). If the visitor allows marketing again before the page reloads, it calls fbq('consent', 'grant').

Guard your own fbq calls

The helper sends the pixel's page view. Events your code sends, such as Purchase or Lead, need their own check. After revocation window.fbq still exists, so its presence does not mean marketing is allowed. Check the permission first, then that the pixel has loaded:

export function trackPurchase(marketingAllowed: boolean, value: number) {
	if (!marketingAllowed || typeof window.fbq !== 'function') return;
	window.fbq('track', 'Purchase', { currency: 'USD', value });
}

Pass the current marketing permission from your framework, for example useConsent('marketing') in React. @c15t/integrations/meta-pixel also exports typed wrappers: metaPixelEvent, metaPixelCustomEvent, metaPixelSingleEvent and metaPixelSingleCustomEvent. They do nothing while window.fbq is undefined, before the pixel's first setup. They do not check permission, and after revocation window.fbq still exists, so apply the permission check before calling them. Their last argument accepts an event ID string for Conversions API deduplication.

Verify the Meta Pixel

After you allow marketing, fbevents.js loads and a request to facebook.com/tr carries ev=PageView. Trigger one guarded event and check that its tr request appears. Then revoke marketing. Before the reload, calling trackPurchase sends nothing. With client-side navigation, check that each route change sends one page view, not two.

Test in a private window with an opt-in policy. Open DevTools Network, disable the cache and filter by the vendor's domain:

1. Load the page. No request goes to the vendor before you choose.
2. Click Reject, then reload. There is still no vendor request.
3. Open Privacy settings and allow the helper's category. The vendor script loads without a page reload.
4. Turn the category off again and save. c15t reloads the page, and the new page makes no vendor request.

c15t reloads on revocation because removing a script element does not stop code that already ran. The vendor's listeners, timers and queued events stay alive until the page unloads. If you set reloadOnConsentRevoked: false, stop the vendor yourself. Register a callback-only script whose onConsentChange calls the vendor's opt-out API, as shown in custom integrations, and check the permission before each of your own event calls. The reload does not delete cookies the vendor already set; see clear on revocation for your framework.

The helper sets vendor to its script ID, so once you declare that vendor a visitor can turn it off inside an allowed category. See vendor consent for your framework. The consent verification guide covers navigation, expiry and hosting checks.