TLDR: Meta Pixel without consent = GDPR violation + ad account risk. GetCookies automatically calls fbq('consent', 'grant/revoke') so you can add the pixel normally and stay compliant.
Read full summary
Meta Pixel is essential for Facebook and Instagram advertising. But firing it without consent violates GDPR and risks your ad account. This guide covers how Meta's consent API works and how GetCookies handles it automatically.
Summary by Claude AI
Your Meta Pixel is Probably Non-Compliant
Open your site in incognito. Don't click the cookie banner.
Now check the Network tab. Filter for "facebook."
See requests going out? That's your Meta Pixel firing before consent. You're violating GDPR right now.
For EU users, this means:
- Legal risk: Fines up to €20M or 4% of revenue
- Ad account risk: Meta can suspend accounts for compliance issues
- Attribution waste: Non-consented conversions may not attribute properly
Let's fix it.
How Meta Pixel Consent Works
Meta provides a consent API that most developers don't know about:
// Revoke consent (before user chooses)
fbq('consent', 'revoke');
// Grant consent (after user accepts marketing)
fbq('consent', 'grant');
When consent is revoked:
- Pixel fires in "limited data use" mode
- No cookies are set
- Data collection is restricted
- Conversion tracking is limited
When consent is granted:
- Full pixel functionality
- Cookies are set
- Full conversion tracking
- Audience building works
The DIY Implementation (The Hard Way)
Here's what proper consent handling looks like without a CMP:
<!-- Step 1: Load pixel in revoked state -->
<script>
!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');
// CRITICAL: Revoke consent by default
fbq('consent', 'revoke');
fbq('init', 'YOUR_PIXEL_ID');
fbq('track', 'PageView');
</script>
Then you need to:
- Build a consent UI
- Store consent in localStorage
- Listen for consent changes
- Call
fbq('consent', 'grant')when marketing is accepted - Handle page refreshes
- Handle consent withdrawal
- Handle consent expiry
This takes hours and is error-prone.
The GetCookies Way (The Easy Way)
<!-- Add GetCookies -->
<script src="https://getcookies.co/api/v1/widget/loader.js"
data-domain-id="YOUR_DOMAIN_ID"
async></script>
<!-- Add Meta Pixel normally -->
<script>
!function(f,b,e,v,n,t,s){...}
fbq('init', 'YOUR_PIXEL_ID');
fbq('track', 'PageView');
</script>
GetCookies automatically:
- Calls
fbq('consent', 'revoke')before user makes a choice - Calls
fbq('consent', 'grant')when marketing consent is given - Handles consent withdrawal
- Persists consent across sessions
No additional code. No consent management logic. Just add both scripts.
Three Implementation Patterns
Pattern 1: Automatic (Recommended)
Add both scripts. GetCookies detects Meta Pixel and manages consent:
<head>
<!-- GetCookies first -->
<script src="https://getcookies.co/api/v1/widget/loader.js"
data-domain-id="YOUR_DOMAIN_ID"
async></script>
<!-- Meta Pixel second -->
<script>
!function(f,b,e,v,n,t,s){...}
fbq('init', 'YOUR_PIXEL_ID');
fbq('track', 'PageView');
</script>
</head>
Pattern 2: Block Until Consent
Don't load the pixel at all until consent:
<head>
<script src="https://getcookies.co/api/v1/widget/loader.js"
data-domain-id="YOUR_DOMAIN_ID"
async></script>
<!-- This script only runs after marketing consent -->
<script type="text/plain" data-cookieconsent="marketing">
!function(f,b,e,v,n,t,s){...}
fbq('init', 'YOUR_PIXEL_ID');
fbq('track', 'PageView');
</script>
</head>
Pattern 3: JavaScript API
For dynamic loading:
window.addEventListener('getcookies:consent', (e) => {
if (e.detail.marketing && !window.fbPixelLoaded) {
loadMetaPixel();
window.fbPixelLoaded = true;
}
});
function loadMetaPixel() {
!function(f,b,e,v,n,t,s){...}
fbq('init', 'YOUR_PIXEL_ID');
fbq('track', 'PageView');
}
Conversion Tracking
Standard Events
Track events normally after consent:
fbq('track', 'Purchase', {value: 29.99, currency: 'USD'});
fbq('track', 'AddToCart');
fbq('track', 'Lead');
Server-Side Events (Recommended)
For best results, combine browser pixel with Meta Conversions API:
// Browser pixel (consent-gated)
fbq('track', 'Purchase', {...});
// Server-side API (runs on your server)
// More reliable, not affected by browser blocking
Testing Your Implementation
1. Meta Pixel Helper
Install the Meta Pixel Helper Chrome extension.
Before consent:
- Pixel should show "Consent Revoked" or limited mode
- No cookies should be set
After accepting marketing:
- Pixel should show full functionality
- Cookies are set
2. Events Manager
In Meta Events Manager:
- Go to Test Events
- Load your site in incognito
- Reject consent → Should see limited data
- Accept consent → Should see full events
Common Issues
Pixel fires before consent Cause: Script order wrong. Fix: Ensure GetCookies loads before Meta Pixel.
Conversions not tracking Cause: Events fire before consent. Fix: Use event listeners or Pattern 2 (block until consent).
Consent not persisting GetCookies uses localStorage, which works even with third-party cookie blocking.
Best Practices
- Use Conversions API - Browser tracking is increasingly limited
- Set up first-party domain - Better tracking reliability
- Test regularly - Meta's policies change
- Include user data - Improve matching with hashed email/phone (with consent)
The Bottom Line
Meta Pixel requires consent in the EU. You can spend hours implementing consent logic, or you can add one GetCookies script and move on.
GetCookies calls fbq('consent', 'grant/revoke') automatically. Your pixel is compliant. Your ads work. You ship features.
Ready to make your Meta Pixel compliant?