Facebook has enabled support for managing cookies that are set by their advertising pixels. For this you need to make a few adjustments. More information can be found here.
Changing your Facebook Pixel code
Copy the code below and add the pixel ID in the Init. The difference with your default pixel code is that by default consent is set to revoke, this means no cookies are set before consent has been given.
<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'); //add this line above init
fbq('init', 'YOUR FB PIXEL ID');
fbq('track', 'PageView');
</script>
Add helper script
Add the following script under the FB pixel code to make the banner fire an event to update consent when in this case the advertising category is accepted by the user. This will set the cookies from Facebook.
<script>
function callbackFnc(e) {
var consent = e.detail || CookieFirst.consent;
// no consent yet or advertising not accepted, return
if (!consent || !consent.advertising) {
return;
} else {
fbq('consent', 'grant');
}
};
window.addEventListener("cf_consent", callbackFnc);
window.addEventListener("cf_init", callbackFnc);
</script>