Meta pixel consent mode

Meta Pixel (formerly Facebook pixel) is a code you can add to your website to measure the impact of your ads on Facebook. Meta pixels track website activities and conversions and automatically deliver ads to Facebook users.

Meta Pixel consent mode has built-in functionality that allows users to trigger Meta Pixel consent mode based on what cookie category the user has agreed to. More information about this is available in the Meta Pixel GDPR implementation documentation.

CookieScript has full integration with Meta Pixel consent mode, the CookieScript dashboard also allows you to select which category of cookies should Meta Pixel enable. 

To use Meta Pixel consent mode, you first need to enable it on the CookieScript dashboard, and then implement it on your website. Read the guide on how to enable Meta Pixel consent mode.

There are two ways to implement Meta Pixel consent mode on your website: either as a custom HTML tag with Google Tag manager (GTM), or manually.

How to implement Meta Pixel Consent Mode was a Custom HTML Tag (recommended)

This is the easiest implementation method since it requires no coding and the Meta Pixel consent mode will be auto updating. However, it only applies to users who are using Google Tag Manager (GTM). If you are not using GTM, skip to the next section with manual Meta Pixel consent mode implementation.

Follow the steps below to implement Meta pixel (Facebook Pixel) Consent Mode was a Custom HTML Tag:

1. Log in to your GTM account and click Add a new tag:
   

   

2. At the Tag configuration section, click Custom HTML Tag and enter a name for your tag:
   

   

3. Find the Meta Pixel code on the Facebook page:
   Go to Settings in Facebook Business Manager and select your business.
   Click Data Sources > Pixels > Add button.

   Type in a name for your Pixel, enter your website URL, and click Continue.

   Click Set up the Pixel Now to get the Facebook Pixel code like this one:

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

4. Insert the following code before init call:

   fbq('consent', 'revoke');

   
   At the end, the resulting code should look like this:

   <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');
     fbq('init', '{your-pixel-id-goes-here}');
     fbq('track', 'PageView');
   </script>

5. Return to GTM and paste the Facebook code in the HTML field at the bottom of the header section, just above the closing head tag:
   

   

6. Choose the trigger to fire the Meta Pixel consent mode:
   

   

7. Select the Initialization- All pages firing trigger:
   

   

8. Click Save to apply your custom HTML tag changes to your website.

All done, you have implemented Meta pixel consent mode as a custom HTML tag.

Note: It is important to choose the trigger type Initialization. If you choose Page View, Meta pixel may not fire at all or fire randomly.

How to implement Facebook Pixel consent mode manually with CookieScript

Implementing Meta pixel (Facebook Pixel) consent mode manually is not recommended, but could be useful if you don't want to use Meta Pixel Consent Mode firing by default or you don't use GTM.

To implement Meta Pixel consent mode manually, perform the following steps:

1. Find this line copied from Facebook:

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

2. Insert the following code before init call:

   fbq('consent', 'revoke');

3. So the resulting code should look like this:

   <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');
     fbq('init', '{your-pixel-id-goes-here}');
     fbq('track', 'PageView');
   </script>

4. Click Publish to apply your changes to your website.

All done, you have implemented Meta pixel consent mode manually.

Note: Implementing Meta Pixel consent mode manually requires you to update inserted Facebook code.

You can also read the guide on Meta pixel consent mode troubleshooting.