FBJS and Ajax to acheive Facebook profile link tracking

In interactive application development we love our ability to track and analyze the behavior of our users. Through tools like Google analytics and Urchin, web sites can monitor and analyze where their users are going, and more importantly how those users are getting there.

As our company delves deeper into creating applications for the Facebook platform, we have realized that analysis of users behavior is extremely important. It is no secret that very few companies have mastered how to create a success Facebook application. Those that have seen moderate success do one thing consistently, they all leverage the social graph, but outside of that there is no clear blue print to success. Using techniques such as user tracking we can begin to tune the way a Facebook applications evolves as a way to change its presentation based on the behaviors of its users.

Integrating analytics into a canvas view it is pretty simple, slap in some Google analytics and you can begin to monitor and tune user traffic. The profile view is much more challenging. In the profile view an applications FBML and images are cached and delivered from a Facebook server. Using traditional Google analytics in the profile is not possible. I hope someday Facebook will show us how many users view and interact with a users profile, but until then we need some way to track a users interaction with our application. Back in October Facebook gave developers the ability to do some restricted Javascript and Ajax. With these two features, we can begin to track what links a user click and how those clicks relate to a users interaction with the canvas view. The following snip of FBJS will post a small JSON array to a external location, which in turn will asynchronously store that data for later analysis.

1
2
3
4
5
6
7
8
9
10
11
12

<script><!--
    var uid = '111111';
    function track(a, pid, method) {
        // ajax query
        var ajax = new Ajax();
        ajax.responseType = Ajax.RAW;
        ajax.requireLogin = false;
        var queryParams = { "pid" : pid, "method" : method, "uid": uid, "source": "profile"};
        ajax.post("http://url.com/tracker.ashx", queryParams);
	return true;
    }
//--></script>

To enable this tracking we must add the following callback attached to that elements onclick event. In our example we are attaching tracking to a link which provides an external vendors affiliate link for a series of consumer products.

One caveat, this approach only works correctly in Firefox if your <a> target is set to blank. If you need to use the same window, the only approach I have found is to use the anchor that is passed into the track method combined with the ajax.ondone callback to set the document.setLocation to the anchors href.

1
2
3
4
5
6

ajax.ondone = function() {
var href = a.getHref();
   if (href.length > 1) {
      document.setLocation(a.getHref());
   }
}

1

<a href="http://www.amazon.com" onclick="track(this,12345,'buy');" class="buy" target="_blank">BUY</a>

On the back end we have a page that is waiting for this specific Ajax post, and will return a 1 for success and a 0 for failure. It is extremely important to keep this tracking as efficient as possible. Facebook Ajax has a <10 second maximum timeout on all requests. In our design, the storing of the data is done using a asynchronous thread that queues up the incoming requests in hoped to avoid Facebook having to wait for us to store the data correctly.