Facebook Pixel and the OneTrust Script

Last Edited: Mar 11, 2021

Facebook Pixel allows organizations to implement JavaScript code on their sites to track and dynamically provide content to site visitors. Site visitors are matched to their respective Facebook accounts and identified by the Facebook cookies on their devices. The Facebook Pixel tracks URLs and domains visited, as well as the devices used by site visitors. Site visitor actions detected by the Facebook Pixel are tabulated in the Facebook Ads Manager and Analytics dashboard.

If your organization has implemented the Facebook Pixel on its sites to track site visitors or dynamically load advertising content, you will need to ensure your banner script is capable of selectively allowing and disallowing functionality based on site visitor consent preferences.

Integration Steps

The most efficient way to ensure the Facebook Pixel is integrated with your banner script and is compliant with site visitor preferences is to use JavaScript type rewriting.

This method will need to be implemented for each instance of the Facebook Pixel appearing on your site. If your site uses a persistent header or the <head> section of the site is injected into each page by a CMS, you should apply this method there.

A sample Facebook Pixel tag looks 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('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 -->

Using script type rewriting, you will add the Cookie Category ID from your banner script that will be used to control the functionality of the Facebook pixel on your site.

The number in the class identifier is an example of a Cookie Category ID. For more information about how to find and view your cookie group IDs, see Finding the Cookie Group IDs.

<!-- Facebook Pixel Code -->
<!-- Add the optanon-category-{id} class -->
<script type="text/plain" class="optanon-category-C0002">
  !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 -->

When the site loads, the JavaScript inside of the <script> tags will not run and cookies will not be set. Then, when the consent code loads, and if the site visitor has granted consent for the specified category, the tag will dynamically change to script type="text/javascript" and the script inside of the tag will load normally.

If the site visitor has not granted consent for the specified category, the tag will not change and the script will continue to be blocked.

You can associate the Facebook pixel with multiple categories using the following syntax:

<script type="text/plain" class="optanon-category-C0002-C0003-C0005">

The values in the phrase class="optanon-category-#-#-#" correspond to the categories set up in the cookie list for the domain.

When you include multiple categories using this method, the categories are blocked concurrently. As a result, the script will not be allowed to run unless the site visitor consents to all of the categories specified.

OneTrust Internal Users: DO NOT MAKE ANY DIRECT CHANGES!

Facebook Pixel and the OneTrust Script

Integration Steps