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

user_545469 0
Viewed 20862

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 multiple Facebook pixels on one page because we have multiple ads running.

I took the code that it gave me per pixel and placed it on the page and then we have a Cart page in which I fire or add the 'Purchase' event. But since I have the script 3 times it seems to fire 3 times. I want it to fire once per pixel.

This is what I have so far:

<!-- Facebook Pixel Code - Ad 1-->
 <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', 'xxxxxxxxxxxxx12');
 fbq('track', "PageView");
 // Purchase
 // Track purchases or checkout flow completions (ex. landing on "Thank You" or confirmation page)
 fbq('track', 'Purchase', {value: '1.00', currency: 'USD'});
 </script>
 <noscript><img height="1" width="1" style="display:none"
 src="https://www.facebook.com/tr?id=xxxxxxxxxxxxx12&ev=PageView&noscript=1"
  /></noscript>
<!-- End Facebook Pixel Code -->

 <!-- Facebook Pixel Code - Ad 2-->
 <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', 'xxxxxxxxxxxxx34');
 fbq('track', "PageView");
 // Purchase
 // Track purchases or checkout flow completions (ex. landing on "Thank You" or confirmation page)
 fbq('track', 'Purchase', {value: '1.00', currency: 'USD'});

 </script>
 <noscript><img height="1" width="1" style="display:none"
 src="https://www.facebook.com/tr?id=xxxxxxxxxxxxx34&ev=PageView&noscript=1"
  /></noscript>
<!-- End Facebook Pixel Code -->

 <!-- Facebook Pixel Code - Ad 2-->
 <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', 'xxxxxxxxxxxxx56');
 fbq('track', "PageView");
 // Purchase
 // Track purchases or checkout flow completions (ex. landing on "Thank You" or confirmation page)
 fbq('track', 'Purchase', {value: '1.00', currency: 'USD'});
 </script>
 <noscript><img height="1" width="1" style="display:none"
 src="https://www.facebook.com/tr?id=xxxxxxxxxxxxx56&ev=PageView&noscript=1"
  /></noscript>
<!-- End Facebook Pixel Code -->

Is this the way to do it? Or do I need to do something different so that the Purchase event does not get fired 4 times. I am using the FB Pixel Helper plugin for Chrome to make sure all pixels are firing, but I am getting an error that they are firing multiple times.

Would I do something like this?

 <!-- Facebook Pixel Code - ALL ADS-->
 <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', 'xxxxxxxxxxxxx12');
 fbq('init', 'xxxxxxxxxxxxx34');
 fbq('init', 'xxxxxxxxxxxxx56');
 fbq('track', "PageView");
 // Purchase
 // Track purchases or checkout flow completions (ex. landing on "Thank You" or confirmation page)
 fbq('track', 'Purchase', {value: '1.00', currency: 'USD'});
 </script>
 <noscript><img height="1" width="1" style="display:none"
 src="https://www.facebook.com/tr?id=xxxxxxxxxxxxx12&ev=PageView&noscript=1"
  /></noscript>
<!-- End Facebook Pixel Code -->
facebook javascript
8 Answers

Simply put in one JS file this code: //Facebook Multi-Pixel

    (function() {
        var fbq = (function() {
            function fbq()
            {
                if(arguments.length > 0) {
                    var action, pixel_id, type_track, content_obj;

                if( typeof arguments[0] == "string") action = arguments[0];
                if( typeof arguments[1] == "string") pixel_id = arguments[1];
                if( typeof arguments[2] == "string") type_track = arguments[2];
                if( typeof arguments[3] == "object") content_obj = arguments[3];

                var params = [];
                if(typeof action == "string" && action.replace(/\s+/gi, "") != "" && 
                   typeof pixel_id == "string" && pixel_id.replace(/\s+/gi, "") != "" &&
                   typeof type_track == "string" && type_track.replace(/\s+/gi, "")) {

                    params.push("id=" + encodeURIComponent(pixel_id));
                    switch(type_track) {
                        case "PageView":
                        case "ViewContent":
                        case "Search":
                        case "AddToCart":
                        case "InitiateCheckout":
                        case "AddPaymentInfo":
                        case "Lead":
                        case "CompleteRegistration":
                        case "Purchase":
                        case "AddToWishlist":
                            params.push("ev=" + encodeURIComponent(type_track));
                            break;
                        default:
                            return;
                    }

                    params.push("dl=" + encodeURIComponent(document.location.href));
                    params.push("rl=" + encodeURIComponent(document.referrer));
                    params.push("if=false");
                    params.push("ts=" + new Date().getTime());

                    if(typeof content_obj == "object") {
                        for(var u in content_obj) {
                            if(typeof content_obj[u] == "object" && content_obj[u] instanceof Array) {
                                if(content_obj[u].length > 0) {
                                    for(var y=0; y<content_obj[u].length; y++) { content_obj[u][y] = (content_obj[u][y]+"").replace(/^\s+|\s+$/gi, "").replace(/\s+/gi," ").replace(/,/gi, "§"); }
                                    params.push("cd[" + u + "]=" + encodeURIComponent(content_obj[u].join(",").replace(/^/gi, "[\"").replace(/$/gi, "\"]").replace(/,/gi, "\",\"").replace(/§/gi, "\,")));
                                }
                            }
                            else if(typeof content_obj[u] == "string")
                                params.push("cd[" + u + "]=" + encodeURIComponent(content_obj[u]));
                        }
                    }

                    params.push("v=" + encodeURIComponent("2.5.0"));                                

                    if(typeof window.jQuery == "function") {
                        var iframe_id = new Date().getTime();
                        jQuery("body").append("<img height='1' width='1' style='display:none;width:1px;height:1px;' id='fb_" + iframe_id + "' src='https://www.facebook.com/tr/?" + params.join("&") + "' />");
                        setTimeout(function() { jQuery("#fb_" + iframe_id).remove(); }, 1000);
                    }




                }


            }
        }

    return fbq;
    });

window.fbq = new fbq();
})();

And than, usage example:

fbq('track', "<PIXEL_ID>", "PageView");

fbq('track", "<PIXEL_ID>", "ViewContent", {
                 content_name: "name test",
                 content_category: "category test",
                 content_ids: ["test"],
                 content_type: "product",
                 value: 7.99,
                 currency: "GBP"
          });

and so on.

user_70470190
user_20082210

Wanted to give the most up-to-date link in their documentation for using multiple pixels on a page: https://developers.facebook.com/docs/facebook-pixel/advanced#multipixels

Here is the code example:

fbq('init', '<PIXEL_A>');
fbq('init', '<PIXEL_B>');
fbq('track', 'PageView'); //fire PageView for both initialized pixels

// only fire the Purchase event for Pixel A
fbq('trackSingle', '<PIXEL_A>', 'Purchase', {
      value: 4,
      currency: 'GBP',
});

// only fire the custom event Step4 for Pixel B
fbq('trackSingleCustom', '<PIXEL_B>', 'Step4',{
  //optional parameters
});
user_4372700
Related