Facebook Pixel

Below is specific guidance for integrating DataGrail Consent to manage the Facebook tracking pixel. You can control the execution of this pixel either using our inline script management feature or callback functions available through our API.

Setup Overview

Here's an example of the script Facebook provides:

<!-- 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>
<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>
<!-- End Facebook Pixel Code -->

We do not recommend implementing the <noscript> portion of this, as it would be impossible to manage consent in a non-javascript environment.

You can modify your page code in one of two ways to control the execution of this pixel via DataGrail Consent:

Using inline script management

Follow the guide to create a unique ScriptID for the Facebook Pixel; then, reformat the script embedded in your site code as such:

<!-- Facebook Pixel Code -->
<script type="text/plain" data-consent-id='<code from Consent Services tab>'>
  !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', '{pixel-id-goes-here}');
  fbq('track', 'PageView');
</script>

As you can see, the script is now of type text/plain and thus will initially be not loaded until DataGrail Consent sends a signal to replace the script based on a consent preference.

Using a callback function

Alternatively, you can leave the script running, but control the pixel opt-out via the Facebook Pixel GDPR support and the callback functions described in: Programmatic Retrieval of Consent Choices.

Here's some sample code:

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

  // NOTE: do not call fbq('init', '{pixel-id-goes-here}')
  // outside of the `init_fb_prefs` function.

  window.dgEvent = window.dgEvent || [];
  function fb_prefs(preferences) {
    if (window.DG_BANNER_API.categoryEnabled('marketing')) {
      fbq('consent', 'grant');
    } else {
      fbq('consent', 'revoke');
    }
  }
  function init_fb_prefs(preferences) {
    if (window.DG_BANNER_API.categoryEnabled('marketing')) {
      fbq('consent', 'grant');
      fbq('init', '{pixel-id-goes-here}');
      // optionally
      fbq('track', 'PageView');
    } else {
      fbq('consent', 'revoke');
      fbq('init', '{pixel-id-goes-here}');
    }
  }

  window.dgEvent.push({
    event: "preference_callback",
    params: fb_prefs
  });
  window.dgEvent.push({
    event: "initial_preference_callback",
    params: init_fb_prefs
  });
</script>

We have provided two functions in this example, one that controls the pixel initialization and consent setting on every page load (init_fb_prefs) or one that controls the pixel consent setting when a consent preference is received (fb_prefs).