Require consent before loading Facebook pixel – Cookiebot Support

Applying Mark Up

A Facebook Pixel consists of 2 parts:

The ordinary script tag that should be marked up as described in the manual mark up guide.
The <noscript> tag that should be removed completely

An example of how the ordinary Facebook pixel script tag may look.

<!-- 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 -->

Below is how the script should look to enable prior consent.
Note the added mark-up (in bold) and the removal of the <noscript> tags:

<!-- Facebook Pixel Code -->
<script type="text/plain" data-cookieconsent="marketing">
    !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>
<!-- End Facebook Pixel Code -->

The <noscript> tags must be removed since Cookiebot is a JavaScript solution, and noscript is for browsers that do not support JavaScript.
If you do include the <noscript> tag, then you may unintentionally be setting cookies without a visitor's consent.

Consent API

Meta has made a consent API available:

fbq('consent', 'revoke'); // Withdraws permission for cookies
fbq('consent', 'grant'); // Grants permission for cookies

You can use this API to prevent cookies from being set prior consent. Once cookie consent has granted, cookies can be utilized.
To implement the API you'll need to set the initial permission to 'revoke' using the fbq('consent', 'revoke') method.

You'll also need to update the consent settings as soon as they are known.

The following script both sets the initial (revoked) state, and updates the settings according to your visitor's choices:

<!-- Facebook Pixel Code -->
<script data-cookieconsent="ignore">
    !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');
    window.addEventListener('CookiebotOnConsentReady',function(e){
    fbq('consent',Cookiebot.consent.marketing?'grant':'revoke')},!1)
</script>
<!-- End Facebook Pixel Code -->

More information: https://developers.facebook.com/docs/meta-pixel/implementation/gdpr