Stop Facebook Pixel tracking on localhost and development server

Question

I'm using Facebook Pixel for tracking on my website.

<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', 'xxxxxxxxxxxxx');
    fbq('track', 'PageView');
  </script>
  <noscript><img height="1" width="1" style="display:none"
    src="https://www.facebook.com/tr?id=320956065128864&ev=PageView&noscript=1"
  /></noscript>

Any solution to stop or filter like GA filter excludes domain or IP? Thanks.

Answer 1

Code snipet for adding FB pixel is first checking if FB pixel is already added, by checking for variable fbq:

if(f.fbq)return;

So the simplest way to skip FB pixel script from initial injection is to define fbq variable before FB snipet.

<script>
    const list = ['localhost'];
    if (list.includes(window.location.hostname)) {
        window.fbq = function() {};
    }
    // ...original Facebook Pixel code here
</script>

Add any domain to the list array in order to block FB pixel execution.

Answer 2

In Traffic permissions, you can allow only the production domain, which will automatically block localhost.

Details here: https://www.facebook.com/business/help/278125336598935?id=1205376682832142