How to create an opt-out option for Facebook pixel in a website?

Question

**What I'm looking for: ** What I am looking for is, how to limit the facebook pixel on my site to track and send my website user's information to Facebook.

What I already know: Facebook pixel track user's data like google tags. But Google provides a script which allows the user to opt this option out, which means user's information will be tracked but will not be sent to Google.

Here is the opt-out option's code provided by google (source):

<script>
// Set to the same value as the web property used on the site
var gaProperty = 'UA-XXXX-Y';

// Disable tracking if the opt-out cookie exists.
var disableStr = 'ga-disable-' + gaProperty;
if (document.cookie.indexOf(disableStr + '=true') > -1) {
window[disableStr] = true;
}

// Opt-out function
function gaOptout() {
document.cookie = disableStr + '=true; expires=Thu, 31 Dec 2099 23:59:59 UTC; path=/';
window[disableStr] = true;
}
</script>

Now I want to have a similar option for my facebook pixel, so the user can disable data tracking from facebook. What I actually use is the provided code by facebook which track information about a specific event on my website. Here is the Code I use now (source):

<!-- 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');
// Insert Your Facebook Pixel ID below. 
fbq('init', 'FB_PIXEL_ID');
fbq('track', 'PageView');
</script>
<!-- Insert Your Facebook Pixel ID below. --> 
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=FB_PIXEL_ID&amp;ev=PageView&amp;noscript=1"
/></noscript>
<!-- End Facebook Pixel Code -->

Answer 1

I've created an opt-out system that opts out of both GA and FB tracking, combining the many code sources already out there. I've posted the details here: https://stackoverflow.com/a/51217955/3817964

Not only did I want to remove developer tracking from GA and FB, but I also wanted to have some folks within the company not be counted in GA and FB. So I wanted a relatively easy method for those folks to exclude themselves from analytics without a plugin, or ruling out a domain ip (as folks with laptops wander).

I created a webpage that users can go to and click a link to opt out of the GA and FB tracking. It places a cookie for the site. Then I check that cookie to determine if we should send data to GA and FB.

Answer 2

This should work. If you call "customOptout()" before the facebook code runs the opt-out cookie will get set and the facebook pixel won't get initialized.

<!-- Modified 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');

var disableStr = 'custom-disable';
if (document.cookie.indexOf(disableStr + '=true') > -1) {
  // don't fire facebook beacon
} else {
  // Insert Your Facebook Pixel ID below. 
  fbq('init', 'FB_PIXEL_ID');
  fbq('track', 'PageView');
}


function customOptout() {
  document.cookie = disableStr + '=true; expires=Thu, 31 Dec 2099 23:59:59 UTC; path=/';
}

</script>
<!-- Insert Your Facebook Pixel ID below. --> 
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=FB_PIXEL_ID&amp;ev=PageView&amp;noscript=1"
/></noscript>
<!-- End Modified Facebook Pixel Code -->