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 www.digitalistic.com/tracker.php?id=123 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 www.webhostninja.com. The link on my site would then look like this:
<a href='http://www.digitalistic.com/tracker.php?id=123'>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 “http://www.webhostninja.com” 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='http://www.webhostninja.com' 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”:
$(document).ready(function(){
$('a.track_this_link').click(function() {
$.post(http://www.digitalistic.com/tracker.php, {id:this.id});
return true;
});
});
This means that each time an external link is clicked a post request is sent to digitalistic.com/tracker.php 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!
Great this will do the job 😀
Best!
Probably tracking every link in my site will be like:
$.post(http://www.digitalistic.com/tracker.php, {page:this.href});
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?
@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.
This is the solution I had been looking online. But if someone would have to keep refreshing http://www.digitalistic.com/tracker.php, then your tracking is gonna messed up. Anyway, thanks.
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.
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?
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.
Why not keep all statistics in Google Analytics though? Especially when you are already using it.
The key to tracking this kind of data is using GA events. I wrote a post about it a while ago: http://vvv.tobiassjosten.net/symfony/tracking-google-analytics-events-with-symfony
It’s centered around Symfony usage but you can just skip to the JavaScript parts and reuse that.
@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.
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 ?