Note that if you are using GTM, please refer to our GTM/FB helpdoc.
The following instructions is for integration FB code directly to your website.
The Facebook Pixel Consent Mode feature allows organisations to request user’s affirmative consent before utilising the Facebook Pixel for advertising and analytics. This consent can be triggered by the cookie category to which the user has consented.
Implementing Facebook Consent Mode
You can easily implement the Facebook Consent Mode with a few changes to the Facebook Pixel code.
Step 1: Find the Facebook Pixel Code located in the site header:
<!-- Facebook Pixel Code -->
<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('init', '{your-pixel-id-goes-here}');
fbq('track', 'PageView');
</script>
Step 2: Add the following code before the ‘init’ call in your Facebook Pixel code.
fbq('consent','revoke');
Consequently, the code should be like this:
<!-- Facebook Pixel Code -->
<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', '{your-facebook-pixel-id}');
fbq('track', 'PageView');
</script>
Integrating Facebook Consent Mode with Enzuzo
To integrate Facebook Pixel Consent Mode with Enzuzo, you need to implement callbacks that trigger based on user consent preferences. Below is an example of how to do this.
Step 1: Place the following script above the script tag that calls the Enzuzo cookie banner.
<script>
function onConsentChange({ analytics, functional, marketing, preferences }) {
handleConsent(marketing);
}
window.__enzuzoConfig = {
callbacks: {
acceptSelected: onConsentChange,
acceptAll: onConsentChange,
decline: onConsentChange,
init: onConsentChange
}
}
</script>
Step 2: In your header, ensure that the Enzuzo script and the updated Facebook Pixel code are properly implemented. Your header tag should look like this:
<head>
<script>
function onConsentChange({ analytics, functional, marketing, preferences }) {
handleConsent(marketing);
}
window.__enzuzoConfig = {
callbacks: {
acceptSelected: onConsentChange,
acceptAll: onConsentChange,
decline: onConsentChange,
init: onConsentChange
}
}
</script>
<script src="https://app.enzuzo.com/scripts/cookiebar/{your-enzuzo-id-goes-here}"></script>
<!--- Your head tag code here --->
<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', '{your-pixel-id-goes-here}');
fbq('track', 'PageView');
function handleConsent(hasConsent) {
fbq("consent", hasConsent ? "grant" : "revoke");
};
</script>
</head>
In the above example, Facebook Pixel is permitted when the user consents to the Marketing category. If you prefer to use the Analytics category for Facebook Pixel, replace the Marketing with Analytics.