Using Meta Pixel with Cookie Consent

Meta 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 Meta Pixel tracks URLs and domains visited, as well as the devices used by site visitors. Site visitor actions detected by the Meta Pixel are tabulated in the Facebook Ads Manager and Analytics dashboard.

If your organization has implemented the Meta 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.

To integrate the Meta Pixel with a Cookie Banner Script

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

Note:

This method will need to be implemented for each instance of the Meta 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 Meta Pixel tag looks like this:

JSON
<<!-- Meta 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 Meta 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 Meta pixel on your site.

Note:

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.

JSON
<!-- Meta Pixel Code -->
<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 Meta 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.

Note:

You can associate the Meta Pixel with multiple categories using the following syntax:

CODE
<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.