Meta Pixel + ConsentLayer
The Meta Pixel (also called the Facebook Pixel) is an advertising tracker, so it belongs in the Marketing category. This guide shows how to make sure it only fires after a visitor consents to marketing.
Without the SDK (banner only)
If you're using the banner script, the Meta Pixel is handled automatically. Its
domains — connect.facebook.net (the pixel loader) and facebook.com/tr (the
tracking endpoint) — are in ConsentLayer's default blocking rules under
Marketing, so the pixel is blocked until marketing consent is given, then
released. No extra code needed.
It's also in the service library as Facebook Pixel (category: Marketing), so a scan will detect it and slot it into Marketing for you.
With the SDK (React)
If you inject the pixel snippet yourself, gate it behind marketing consent:
import { ConsentGate } from '@consentlayer/sdk/react'
function MetaPixel() {
return (
<ConsentGate category="marketing">
<script
dangerouslySetInnerHTML={{
__html: `
!function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;
n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window,
document,'script','https://connect.facebook.net/en_US/fbevents.js');
fbq('init', 'YOUR_PIXEL_ID');
fbq('track', 'PageView');
`,
}}
/>
</ConsentGate>
)
}With the SDK (vanilla JS)
import { hasConsent, onConsentChange } from '@consentlayer/sdk'
let loaded = false
function loadMetaPixel() {
if (loaded || !hasConsent('marketing')) return
loaded = true
;!(function (f, b, e, v, n, t, s) {
if (f.fbq) return
n = f.fbq = function () {
n.callMethod ? n.callMethod.apply(n, arguments) : n.queue.push(arguments)
}
if (!f._fbq) f._fbq = n
n.push = n; n.loaded = !0; n.version = '2.0'; n.queue = []
t = b.createElement(e); t.async = !0; t.src = v
s = b.getElementsByTagName(e)[0]; s.parentNode.insertBefore(t, s)
})(window, document, 'script', 'https://connect.facebook.net/en_US/fbevents.js')
fbq('init', 'YOUR_PIXEL_ID')
fbq('track', 'PageView')
}
loadMetaPixel()
onConsentChange(() => loadMetaPixel())Verification
Open your site in a fresh session and watch the Network tab before
consenting: there should be no request to connect.facebook.net or
facebook.com/tr. Accept marketing (or click "Accept all") and confirm the
pixel then loads and sends its PageView. Meta's Pixel Helper extension is a
handy second check.