How to implement Facebook conversion tracking onclick or when there's no separate 'Thank you' page

Question

Trying to implement Facebook conversion tracking within a Facebook Tab. You can view the page here http://www.facebook.com/StChristophersFellowship/app_366591783429546 the issue is a separate page is not run once the form has been submitted. Can I make a section of javascript run but ONLY onclick of the submit button, I think it also has the be injected into the head of the HTML doc. I found this answer to running Javascript from a link or click - Will this method work if I call the tracking/conversion code from a separate JS doc?

Any help would be greatly appreciated - Thanks!

"I have to agree with the comments above, that you can't call a file, but you could load a JS file like this, I'm unsure if it answers your question but it may help... oh and I've used a link instead of a button in my example...

<a href='linkhref.html' id='mylink'>click me</a>

<script type="text/javascript">

var myLink = document.getElementById('mylink');

myLink.onclick = function(){

var script = document.createElement("script");
script.type = "text/javascript";
script.src = "Public/Scripts/filename.js."; 
document.getElementsByTagName("head")[0].appendChild(script);
return false;

}


</script>"

Answer 1

I tried using Nicolás solution but the conversion was never verified.

However I found an article (archived version) describing a technique that worked instantly, using the URL from <noscript><img src="..." /></noscript>.

Place an element on your page like:

<div id="fb_pixel"></div>

Then declare these CSS rules for your conversions, changing the background-image for the <noscript> URL found in your own tracking code.

#fb_pixel { display:none; }
.fb_conversion
{
    background-image: url('https://www.facebook.com/offsite_event.php?id=33333333333&value=0&currency=USD');
}

When you want the tracking to occur (e.g. upon AJAX form submission), you add the fb_conversion class to the <div> using JavaScript. For instance, with jQuery:

$("#fb_pixel").addClass("fb_conversion");

This will make the browser load the image, thus tracking your conversion.

Answer 2

I had a similar issue, I solved it putting the AJAX call on the tacking callback. As follows:

$(function () {
    $('#btnSend').click(facebookTrackingSendClick);
});

function facebookTrackingSendClick(e) {
    e.preventDefault();
    var clickedElement = this;
    var fb_param = {};
    fb_param.pixel_id = '123';
    fb_param.value = '0.00';
    fb_param.currency = 'BRL';
    (function () {
        var fpw = document.createElement('script');
        fpw.async = true;
        fpw.src = '//connect.facebook.net/en_US/fp.js';
        fpw.onload = function () {
            // Callback here.
        };
        var ref = document.getElementsByTagName('script')[0];
        ref.parentNode.insertBefore(fpw, ref);
    })();
}