Will it cause any issue if I use multiple Facebook Pixel in one page?
I had the same requirement and I found that it is possible and you don't need to hack the Facebook pixel code.
Even if it is not documented, the fbq object support multiple pixel ids.
Just call multiple times the init function with different pixel ids. Then, then when you do fbq('track', "PageView"); it will issue one event per pixel. You can call fbq('track', '{{your_event_name}}')as many times as you want and it will track the event for all previously initialized pixels.
So your final code would 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','//connect.facebook.net/en_US/fbevents.js');
fbq('init', '{{pixel_id_1}}');
fbq('init', '{{pixel_id_2}}');
fbq('track', "PageView");
</script>
<noscript>
<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id={{pixel_id_1}}&ev=PageView&noscript=1" />
<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id={{pixel_id_2}}&ev=PageView&noscript=1" />
</noscript>
Edited April 2019 @chuck-le-butt found that a blog post from facebook document how to use the pixel: https://developers.facebook.com/ads/blog/post/2017/11/28/event-tracking-with-multiple-pixels-tracksingle/
https://www.facebook.com/business/help/community/question/?id=10100525729830570
According to Facebook Help Team :
Although this should be fine we're unable to guarantee the accuracy of the results if multiple pixels are installed on the same webpage and have received reports of discrepancies from people who've tried this in the past.
FWIW, Facebook has added trackSingle and trackSingleCustom events (as of November 2017) to allow selectively firing events on specific pixels when multiple pixels are initialized on a page.
Docs: https://developers.facebook.com/docs/facebook-pixel/events-advanced-use-cases/v2.12#multipixels.
Blog Post: https://developers.facebook.com/ads/blog/post/2017/11/28/event-tracking-with-multiple-pixels-tracksingle/
Having multiple pixels on your site shouldn't create any issues on your site itself (i.e. there won't be JavaScript errors, and all events will be sent for all the initialized pixel IDs). I wrote a blog post about this issue, so feel free to read there for a more full discussion.
After including the full Facebook pixel code snippet once on the site, you can then simply add additional pixel ID inits before calling any track events. So your full pixel code snippet on the site would 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','//connect.facebook.net/en_US/fbevents.js');
fbq('init', '[first-pixel-id]');
fbq('init', '[second-pixel-id]');
fbq('track', 'PageView');
</script>
<noscript>
<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=[first-pixel-id]&ev=PageView&noscript=1" />
<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=[second-pixel-id]&ev=PageView&noscript=1" />
</noscript>
Once you have initialized all the pixel IDs on your site with fbq('init'), you can confirm they have been loaded by running the following code in the JavaScript console:
fbq.getState().pixels
You should also install the Facebook Pixel Helper. It gives some detailed information about each pixel and each track event sent to Facebook.
The next natural question is how to track events to only one of those pixel IDs. If you're handling a product catalog for Facebook Dynamic Ads, you may need to track events and pass Facebook your unique product ID for the product on the site.
As of late 2017, Facebook finally announced functionality to track pixel events to single pixel IDs. You simply use the actions trackSingle and trackSingleCustom rather than track and trackCustom, like so:
fbq("trackSingle, "[your-pixel-id]", "ViewContent", { content_type: "product", content_ids: ['892185001003'] });
But a problem remains with this paradigm: if even one developer on a site with multiple pixels doesn't use the new actions, his events will track to everyone's pixel IDs on the site. From what I've seen in the past few months, nearly every developer still uses the track action. I should say here that it's not the end of the world if other developers track their events to your pixel, but I like the idea of not junking up my data and possibly throwing off analytics and/or conversion measurement.
So, the problem remains: how do you track pixel events to only your pixel, and not let anyone else track their events to your pixel too?
The <noscript> method of tracking a pageview event to Facebook gave me a hint that you can do this, just not via the fbq object.
In an answer by Flavio Wuensche, he actually implemented this idea. I took it, cleaned it up, and modified it.
Code
(function (window, document) {
if (window.myfbq) return;
window.myfbq = (function () {
if (arguments.length > 0) {
var pixelId, trackType, contentObj;
if (typeof arguments[0] == 'string') pixelId = arguments[0];
if (typeof arguments[1] == 'string') trackType = arguments[1];
if (typeof arguments[2] == 'object') contentObj = arguments[2];
var params = [];
if (typeof pixelId === 'string' && pixelId.replace(/\s+/gi, '') != '' &&
typeof trackType === 'string' && trackType.replace(/\s+/gi, '')) {
params.push('id=' + encodeURIComponent(pixelId));
switch (trackType) {
case 'PageView':
case 'ViewContent':
case 'Search':
case 'AddToCart':
case 'InitiateCheckout':
case 'AddPaymentInfo':
case 'Lead':
case 'CompleteRegistration':
case 'Purchase':
case 'AddToWishlist':
params.push('ev=' + encodeURIComponent(trackType));
break;
default:
return;
}
params.push('dl=' + encodeURIComponent(document.location.href));
if (document.referrer) params.push('rl=' + encodeURIComponent(document.referrer));
params.push('if=false');
params.push('ts=' + new Date().getTime());
if (typeof contentObj == 'object') {
for (var u in contentObj) {
if (typeof contentObj[u] == 'object' && contentObj[u] instanceof Array) {
if (contentObj[u].length > 0) {
for (var y = 0; y < contentObj[u].length; y++) { contentObj[u][y] = (contentObj[u][y] + '').replace(/^\s+|\s+$/gi, '').replace(/\s+/gi, ' ').replace(/,/gi, '§'); }
params.push('cd[' + u + ']=' + encodeURIComponent(contentObj[u].join(',').replace(/^/gi, '[\'').replace(/$/gi, '\']').replace(/,/gi, '\',\'').replace(/§/gi, '\,')));
}
}
else if (typeof contentObj[u] == 'string')
params.push('cd[' + u + ']=' + encodeURIComponent(contentObj[u]));
}
}
params.push('v=' + encodeURIComponent('2.7.19'));
var imgId = new Date().getTime();
var img = document.createElement('img');
img.id = 'fb_' + imgId, img.src = 'https://www.facebook.com/tr/?' + params.join('&'), img.width = 1, img.height = 1, img.style = 'display:none;';
document.body.appendChild(img);
window.setTimeout(function () { var t = document.getElementById('fb_' + imgId); t.parentElement.removeChild(t); }, 1000);
}
}
});
})(window, document);
Usage
myfbq("[your-pixel-id]", "PageView");
myfbq("[your-pixel-id]", "ViewContent");
myfbq("[your-pixel-id]", "ViewContent", { content_type: "product", content_ids: ['892185001003'] });
Further Discussion
Note that this myfbq function has no association or ties to the fbq object. It simply dynamically inserts <img> tags on the site that make calls to Facebook to track events for individual pixels. So, you can track events to all pixels initialized on the site (or a single pixel using the new functionality) via the normal Facebook pixel code snippet, or to just your own pixel ID with the myfbq function, or you can do both!
If you want to do both, include the myfbq function on the site, then your Facebook pixel code snippet could 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','//connect.facebook.net/en_US/fbevents.js');
fbq('init', '12345678');
fbq('init', '87654321');
fbq('track', 'PageView'); //tracks a PageView event to all initialized pixels
myfbq("87654321", "ViewContent", { content_type: "product", content_ids: ['892185001003'] }); //tracks a ViewContent event to only one pixel, with your own unique ProductId
</script>
<noscript>
<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=12345678&ev=PageView&noscript=1" />
<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=87654321&ev=PageView&noscript=1" />
</noscript>