Click Tracking with jQuery


Generally I use only Google Analytics for the stats of my web apps, but for one of my current projects (Bröllopia – sökmotorn för ditt bröllop – a swedish wedding site) I needed a bit more. I wanted to have detailed statistics for links leading to other sites to use these stats in the app itself. One way of doing this is of course to make all these links go to a page on my site and then when this page loads I record all the stats I want and then redirects to the external site, for example the link loads tracker.php and logs a click on the link with the id “123” (this id needs to be mapped to a link in the database) and then forwards to The link on my site would then look like this:

<a href=''>WebHostNinja</a>

The problems with this is that it is slow (one more page load) and that the link the user sees does not lead to the page, ie the link text “WebHostNinja” and then the user expects the link to be something like “” and nothing else. I don’t like this from a usability point of view. Not that I have any evidence for it, but I suspect that relevant outgoing links help the sites Google juice. Definitly it helps the Page Rank of the site I link to, and why should I not help them?

My solution is to use some jQuery magic. Download and install jQuery (btw, if you like jQuery, then take a look at the fantastic jQuery tools). Then add the class “track_this_link” to each link tag that you want to track as well as give each link tag an unique id (so you can track which link is which). The href attribute should point to the external site directly and not to some internal page. The link above would now look like this:

<a href='' id='123' class='track_this_link'>WebHostNinja</a>

Next step is to add a some javascript that adds an onClick event to all the links with the class “external_link”:

$('a.track_this_link').click(function() {
$.post(, {});
return true;

This means that each time an external link is clicked a post request is sent to with a unique id for the link in question. What is left is to implement the tracker.php script so that it can handle the post and save the data you are interested in to the database in a secure and correct way. I am happy to just summarize the number of clicks per link on a daily basis, but if you want to save detailed data for each click.

Do you have a better solution to this problem? Let me know!

12 thoughts on “Click Tracking with jQuery

  1. Here is the problem. What if user is using Firefox and he clicks links with the scroll button or right clicks and opens the url in new tab? Can we handle this actions too?

  2. @Hasan No matter how a user clicks on an element the click event should be fired. Some browsers do not handle right-clicks very well (or like early Opera not at all). Check the individual browsers docs for details on how to handle javascript events.

  3. Webpagelottery: I don’t think it’ll be messed up if you improve your statistics system:
    1. capture ip address to detect unique visitors. you can allow ipaddress to enter database tracking with time margins.
    2. stamp time
    also if you’re really concerned. you can develop an expiry for URLs. one of the parameters you can pass is an encrypted time and specify on your tracker page to validate the time.

    i think the above suggestions are still not bullet proof and may raise a lot of concerns but just ideas of how it can improve the system.

  4. Here is the problem. What if user is using Firefox and he clicks links with the scroll button or right clicks and opens the url in new tab? Can we handle this actions too?

  5. TIm

    This does *Not* work in chrome/Firefox. Which is soon to surpass IE by a long shot. If there is a way to make it cross browsers, that would be awesome.

  6. @Tobias The reason to do this on the site directly and not via Google Analytics was that the data was used in different sorting mechanisms in the backend. Sure, I could probably gotten the data from the Analytics API, but using jQuery was easier.

  7. So basically the click event is fired before the url from the href attribute is opened? or the tracker.php script has a redirect and this url is open ?

Comments are closed.