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.
Here is how that looks:
!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');
To be able to react to consent settings, for example after the initial consent submission, the establishment of consent settings on a page load, or a withdrawal a second script is needed:
<script>
window.addEventListener('CookiebotOnConsentReady', function (e) {
fbq('consent', Cookiebot.consent.marketing ? 'grant' : 'revoke')
}, false)
</script>
More information: https://developers.facebook.com/docs/meta-pixel/implementation/gdpr
Comments
0 comments
Article is closed for comments.