Using the Meta Pixel Consent API with Consent Studio as your consent management platform (CMP) of choice
How is consent processed?
When a user first loads a page and/or consent has not yet been parse, we will revoke the consent for the Meta/Facebook Pixel.
To ensure this step, we also ask you to make a modification to your Meta/Facebook Pixel base code. This guide will help you do so.
When a user grants Marketing (cookie) consent through the Consent Studio banner on your website, we will grant the consent for the Meta Pixel.
How to enable this integration?
1. Consent Studio dashboard
Log in to your Consent Studio dashboard.
Open the Consent Studio dashboard and head to General Settings under Banner.
Scroll down until you find Consent Modes and Integrations.
Toggle the Meta Pixel Consent API integration by clicking on it. Enabled integrations have a highlighted (green) border.
Don't forget to save your changes by clicking the Save changes button at the bottom of the page.
Now, continue to the actual code snippets of your Meta Pixel that are being placed on your website.
2. Modify the Meta Pixel Javascript base code
Modify the script that Meta/Facebook has provided. It can be recognized easily due to it starting with <script> and ending with </script>.
Regardless of whether you do this in Google Tag Manager or directly in the code of your website, you will need to add one line of code before (!) the init command.
The init command looks like this:
fbq('init', '...');
Please insert this code above it:
fbq('consent', 'revoke');
Your final code will look something like this:
<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');
fbq('consent', 'revoke');
fbq('init', '...');
fbq('track', 'PageView');
</script>
3. Non-GTM only: remove the <img /> element
Meta/Facebook offers a fallback for when its Javascript cannot be executed. They do this by wrapping an <img ... /> inside a <noscript></noscript> element.
When this image gets loaded on a website, Facebook is informed of a user's page visit on said website. This tracking mechanism requires consent too and is often overlooked.
You can recognize this image from the following code;
<noscript> <img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id={your-pixel-id-goes-here}&ev=PageView&noscript=1"/> </noscript>
Remove this code entirely.
The contents of a <noscript> element are only rendered by a web browser when Javascript is disabled. Nowadays, this is rare. Moreover, since Consent Studio is fully Javascript dependent, we have no way to access this code since Javascript is disabled altogether.