Firing the Facebook Conversion Pixel

javascript facebook google-analytics analytics

25,850

Solution 1

EDIT: I've updated my code as what I had mentioned previously did not work. Thanks to @Flambino to pointing out.

This is my revised answer using a pixel rather than a script to pass the conversion pixel. I reference the How to track a Google Adwords conversion onclick? SO post:

<head>
<script type="text/javascript"> 
function facebookConversionPixel(fb_pixel, fb_value){
    var image = new Image(1,1); 
    image.src = "//www.facebook.com/offsite_event.php?id=" + fb_pixel + "&amp;value=" + fb_value + "&amp;currency=USD";
}
</script>
</head>

<body>
<a href="#" onclick="facebookConversionPixel(123456,0.00);">FBCONV</a>
</body>

Solution 2

From the FB docs "How to track in-page events":

After the base code snippet is installed, you can track in-page actions, such as clicks on a button, by making a _fbq.push('track') call for the conversion pixel through registering different event handlers on an HTML DOM element. For example:

function trackConversionEvent(val, cny) {
  var cd = {};
  cd.value = val;
  cd.currency = cny;
  _fbq.push(['track', '<pixel_id>', cd]);
}
<button onClick="trackConversionEvent('10.00','USD');" />

Solution 3

Just move the entire original code into the event of your choice. Then just change 1 part of the code. The thing you will have to do is make the fb_param global instead of local.

See below at the comment

$('.button').click(function() {
    window.fb_param = {}; // must be global by adding `window.`
    fb_param.pixel_id = '123456789';
    fb_param.value = '0.00';
    fb_param.currency = 'USD';
    (function(){
        var fpw = document.createElement('script'); fpw.async = true; fpw.src = '//connect.facebook.net/en_US/fp.js';
        var ref = document.getElementsByTagName('script')[0];
        ref.parentNode.insertBefore(fpw, ref);
    })();
});

25,850

Author by

dataprointhemaking

Updated on March 25, 2020

Comments

dataprointhemaking about 4 years
I'm still pretty new to Javascript, but I was wondering what would be the best way to fire the Facebook conversion pixel (below) without actually loading a "confirmation"/"Thank You" page?
```
<script type="text/javascript">
var fb_param = {};
fb_param.pixel_id = 'XXXXXXXXXXX';
fb_param.value = '0.00';
fb_param.currency = 'USD';
(function(){
  var fpw = document.createElement('script');
  fpw.async = true;
  fpw.src = '//connect.facebook.net/en_US/fp.js';
  var ref = document.getElementsByTagName('script')[0];
  ref.parentNode.insertBefore(fpw, ref);
})();
</script>
<noscript><img height="1" width="1" alt="" style="display:none"
src="https://www.facebook.com/offsite_event.php?id=XXXXXXXXXX&amp;value=0&amp;currency=USD" /></noscript>
```
Facebook says that we should plug this into our "Thank You pages" that visitors see after they convert (fill out a form, make a purchase, etc). However, some of our forms are popups or forms on sidebars next to content that we don't want readers to be directed away from by a confirmation page.

With Google Analytics, I can create an "invisible" pageview by firing _gaq.push(['_trackPageview']); code that can tell GA that it should count that invisible pageview as a goal completion.

Is there something similar to that that's general enough to tell my site to fire the FB pixel?