Facebook Pixel Consent Mode

Last updated on August 9, 2024

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.

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>

The integration of Facebook Consent Mode with CookieYes can be done by implementing an event listener on the website.

<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');

  function handleConsent(hasConsent) {
    fbq("consent", hasConsent ? "grant" : "revoke");
  }

  document.addEventListener("cookieyes_consent_update", (eventData) => {
    const data = eventData.detail;
    handleConsent(data.accepted && data.accepted.includes("advertisement"));
  });

  document.addEventListener("cookieyes_banner_load", (eventData) => {
    const data = eventData.detail;
    handleConsent(data.categories && data.categories.advertisement);
  });
</script>

In the above illustration, Facebook Pixel is permitted when the user consents to the Advertisement category. If you prefer to use the Analytics category for Facebook Pixel, replace the Advertisement with Analytics.