Proper method/tips for setting up Facebook Pixels with no errors

I'm finding a lot of people lately complaining about their Facebook Pixels throwing an infamous "duplicate pixel" error:

fbevents.js:9 Facebook Pixel Error: Duplicate Pixel ID: XXXXXXXXXXXXXXXXX

This  error is thrown because we're trying to initialize a pixel ID twice and therefore FB complains about it. And nope you are not alone :)

For example you may have a FB pixels that fires on the page load like this:

fbq('track', "PageView");

And then you may have another Add To Cart event like this:

fbq('track', 'AddToCart'
   , { 
    brand: 'Apple',
    sku: 'MN4L2LL',
    content_ids: 'JET BLACK',
    content_name: 'Iphone 7 Plus',
    content_type: 'product',
    value: '1130.33',
    currency: 'EUR'
});

fbq('init', 'MY_FB_PIXEL_ID');
fbq('track', 'AddToCart'
   , { 
    brand: 'Apple',
    sku: 'MN4L2LL',
    content_ids: 'JET BLACK',
    content_name: 'Iphone 7 Plus',
    content_type: 'product',
    value: '1130.33',
    currency: 'EUR'
});

The code above will show that ugly error into your browser console, despite you didn't do anything really bad at all. ( I don't really get why the FBEvents.js doesn't just silently ignore the init if the pixel Id is already initialized :X )

This said, let's explain how Facebook Pixel works:

As you can see each 'init' method call, puts that pixel id into an internal array. And then each track call will loop through that array firing a hit for each already "initialized pixel id" on it.

Yep, this means that after a pixel has been initialized any call to the "track" or "trackCustom" method will forcedly be sent for all current initialized pixels !! Meaning that you won't be able to control which pixels should be sending the current action. I can't really understand why each pixel doesn't own their own namespace to have a better control.

Now let's see which would be the best way to setup our Facebook Pixels using Google Tag Manager.

1. One that that is going to take care of initializing all our Facebook Pixels.

2. On each different action we want to track on FB (eg: "Add To Cart", "ViewContent"). We'll be adding just the method call, since the main library an object are already in place! 

Techie Fix Alternative

Another way of fixing this error is checking if the current pixel we're using is already initialized before calling the "init" method. As usual some coding may help us, we can check it using the following JS snippet:

if (window.fbq.__fbeventsModules.fbevents().getState().pixels.map(function(pixel) {
        return pixel.id;
    }).indexOf('MY_FB_PIXEL_ID') == -1) { // PIXEL NOT INITIALIZED. DO YOUR STUFF }