How would I put multiple Facebook tracking pixels on one web page?

Question

We are trying to use Facebook\'s Ad tracking pixels to track ads. we looked at Facebook\'s documentation and that led me no where.

I need to know how to trigger mult

Answer 1

@ClosDesign, you're on the right track! As you suspected, you can call fbq('init', '[your-pixel-id]') multiple times, which adds each pixel ID to the list of IDs that all events will be tracked to. I wrote a blog post about this issue of using multiple Facebook pixels on one site, so read there for more details.

Using your example code, you first want to include Facebook's JavaScript pixel code. This will load the JavaScript from Facebook that is needed to send pixel events with their fbq object:

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

Then, it's time to init all pixel IDs:

fbq('init', 'xxxxxxxxxxxxx12');
fbq('init', 'xxxxxxxxxxxxx34');
fbq('init', 'xxxxxxxxxxxxx56');

Once you have initialized all the pixel IDs on your site with fbq('init'), use the Facebook Pixel Helper to confirm all pixels have been loaded. You can also manually confirm they have been loaded by running the following code in the JavaScript console:

fbq.getState().pixels

After that, any calls you make to track an event will be tracked to all pixel IDs you initialized above. So if you call:

fbq('track', "PageView");

A PageView event will be sent to Facebook for all three pixels. Your Purchase event works the same way.

When it comes to the

Note that if the user has JavaScript turned off, those tags only send a request to Facebook to track a PageView event. The Purchase event will not be tracked unless you create another tag for each pixel ID and specify data for tracking the Purchase event also.

A natural next question is, "Can I track an event to only one of many pixels initialized on my site?" Not using Facebook's fbq object, no.

There is a workaround to this, however. Using the tag method above, you can send events to Facebook and only track the event to one pixel ID. This method bypasses the fbq object entirely and dynamically builds an tag with the event information you specify.

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'] });