a weblog by Ed Eliot

Full of lovely web standards information and a large helping of PHP

Improved click tracking

2 years, 2 months ago

Originally posted on 1st March but significantly updated since, therefore the change of date.

A few days ago I posted a blog entry describing a possible method for unobtrusively tracking all links clicked on a web site using JavaScript and the DOM. Whilst I was generally happy with the approach I took there is one aspect of the implementation which has been bothering me and still isn't right. The problem is that the current mechanism resets the "href" attribute of each link to include the redirect URL. This means that when a user hovers over a link they see the redirect information. Worse still if they want to copy a link to the clipboard the redirect part of the URL is copied too. This behaviour hardly subscribes to the unobtrusive approach so some new thinking is needed.

Originally I had planned to dynamically set up a "click" handler for each link which would fetch a link's "href" attribute when clicked, call "document.location.href" and prefix the redirect URL. This would log the click, redirect the user to the site referenced in the link while a final "return false;" statement would prevent the link's default navigation behaviour. This method worked well for opening links in the same window but didn't work well when middle clicking (mouse scroll wheel) to open a new tab. It seemed that the "click" event didn't fire and to add to this there seemed to be no way to have "document.location.href" reference the newly opened tab.

Today I tried a new mechanism and it seems to work quite well. It solves the link display and copy to clipboard problems whilst at the same maintaining the functionality of the original implementation.

In this version I used an "mouseup" handler to log the link click. When the user clicks a link the script loads a server side tracking script through the "src" attribute of a newly created JavaScript image object. A short delay is added to give this request time to complete before the browser loads the requested URL.

For users browsing links with the keyboard the same mechanism is used the only addition being a surrounding "if" statement which looks for character 13 (the return key) before logging the "click".

JavaScript Class

The new JavaScript routine is shown below:

  1. // create object
  2. var linkTracking = {}
  3. // assign properties
  4. linkTracking.redirectUrl = '/redirect.php';
  5. // constructor (sort of)
  6. linkTracking.init = function() {
  7. // check for support of required methods
  8. if (!document.getElementsByTagName) {
  9. return false;
  10. }
  11. // get all links on the page
  12. var links = document.getElementsByTagName('a');
  13. // assign event handlers
  14. YAHOO.util.Event.addListener(links, 'mouseup', linkTracking.mouseUp);
  15. YAHOO.util.Event.addListener(links, 'keypress', linkTracking.keyPress);
  16. return true;
  17. }
  18. linkTracking.mouseUp = function(e) {
  19. linkTracking.redirectHandler(YAHOO.util.Event.getTarget(e));
  20. }
  21. linkTracking.keyPress = function(e) {
  22. // check for return key press
  23. if (YAHOO.util.Event.getCharCode(e) == 13) {
  24. linkTracking.redirectHandler(YAHOO.util.Event.getTarget(e));
  25. }
  26. }
  27. linkTracking.delay = function(mseconds) {
  28. var currentTime = new Date();
  29. var endTime = currentTime.getTime() + mseconds;
  30. while (currentTime.getTime() < endTime) {
  31. currentTime = new Date();
  32. }
  33. }
  34. linkTracking.redirectHandler = function(link) {
  35. // check for valid href, don't want to track anchors
  36. if (link.getAttribute('href')) {
  37. var url = link.getAttribute('href');
  38. var title = link.childNodes[0].nodeValue;
  39. // check for title attribute, otherwise use link text
  40. if (link.getAttribute('title')) {
  41. title = link.getAttribute('title');
  42. }
  43. // track click by requesting URL through new image object
  44. var currentDate = new Date();
  45. var trackImg = new Image();
  46. trackImg.src = linkTracking.redirectUrl + '?url=' + escape(url) + '&title=' + escape(title) + '&rnd=' + currentDate.getTime();
  47. linkTracking.delay(300);
  48. }
  49. }
  50. YAHOO.util.Event.addListener(window, 'load', linkTracking.init);

I've used the newly released Yahoo! User Interface Library to handle the brunt of the event work in a reliable cross browser fashion. It's been a joy to use and if you haven't already checked it out I recommend you take a look.

This mean the script tags you need to include in your HTML are now as follows:

  1. <script type="text/javascript" src = "/js/YAHOO.js" ></script>
  2. <script type="text/javascript" src = "/js/event.js" ></script>
  3. <script type="text/javascript" src="/js/link-tracking.js"></script>

You can download the Yahoo! libraries here.

PHP Tracking Script

The SQL to log the click uses "insert delayed" which buffers insertion of the record and allows the PHP script to return immediately regardless of how busy the DB server is.

  1. <?php
  2. if (isset($_GET['url']) && isset($_GET['title'])) {
  3. require('includes/db.inc.php');
  4. $oDb = new Database();
  5. $sUrl = $oDb->EscapeQuotes($_GET['url']);
  6. $sTitle = $oDb->EscapeQuotes($_GET['title']);
  7. $oDb->Run("insert delayed into click_logs (url, title, click_date) values ('$sUrl', '$sTitle', now())");
  8. $oDb->Close();
  9. } else {
  10. echo 'URL or title not set.';
  11. }
  12. ?>

Other Details

All other details, including the DB structure and SQL queries stay the same as before.

Check out the original post and method here.

Comments

  • The mousedown action doesn't guarantee a link being open. If you mousedown on a link and suddenly you change your mind not to open it, you just drag away from the link and release the button (mouseup) and the link won't open. With your code, it will be tracked even if the link is not opened.

    glenngv - 7th March 2006

  • @glenngv - Yes quite true. I've updated the code to use the mouseup event instead. The normal click event is no good as it doesn't fire for middle button clicks.

    With this method of tracking I do think that one has to accept overall percentages rather than exact figures as there are also a number of other situations where tracking won't take place as well, for example if a user has JavaScript disabled or if they right click a link and select open in a new window.

    Ed Eliot - 7th March 2006

  • This works a treat. Thanks for sharing it. A small question:

    As far as I can see it is not implemented in your pages. Did you have to remove it for a certain reason, say it was offending search engines? Thanks.

    Ingram - 22nd June 2006

  • When testing this in IE, it seems to insert 2 records into my database, whereas (correctly) in Firefox only one. I'm having trouble tracking the source of this, but it must be sending 2 requests to my tracking script. Do you find the same with yours in IE or have I messed something up?

    Ingram - 22nd June 2006

  • My bad! I had left in the original addLoadEvent function and call which made IE load it twice. I have taken it out and now just use the YAHOO YAHOO.util.Event.addListener(window, 'load', linkTracking.init);

    All works very well. Thanks for this article!

    Ingram - 22nd June 2006

  • @Ingram - I'm pleased it works well for you. I originally wrote the script just to see how feasible it was. I don't particularly need to track clicks on my site so it's not there at the moment - I'm certainly not aware of it causing any problems with search engines.

    Ed Eliot - 25th June 2006

  • Cheers for this one Ed!

    I think i will be implementing a slightly tweaked version of this on nildram.net and most likely f2s.net too!

    Simon Chettle - 2nd November 2006

  • Hi Simon - np, I'm glad the tracking is useful to you. I look forward to seeing it on your sites.

    Ed Eliot - 6th November 2006

  • I can't get this working; I'm having trouble seeing what I need to merge between the two blog posts, it would be super if you could just condense them into a single post.

    The yahoo scripts make simon's scripts unneeded, right?

    My page isn't even calling the redirect script, so I'm not exactly sure what I'm missing. I've got the 3 yahoo library JS calls and the redirect script just dumps some info into the db (it works when i call redirect.php directly) but the php isn't executed when I'm clicking links.

    What could be the issue? I have no JS errors/warnings in firefox.

    dave - 5th April 2007

  • I spoke too soon. My issues were: couldn't call ../redirect.php, so I moved redirect.php into the JS folder and had to rename yahoo.js YAHOO.js (it came lowercase from the yahoo library download)

    All is working great. Excellent script!

    Dave - 5th April 2007

  • I just wrote a link tracker that's purely JavaScript - no need of the Yahoo! JS libraries. It's in such a less amount of code, I wonder how it even works! :)

    Aalaap - 24th September 2007

  • Hi Ed, the tracker works fine in Ie and Firefox but I've problems getting it to work in Opera (9.21), did you test the script with this browser ?

    mutui - 1st November 2007

  • I would be interested in hearing the response to mutui's post about Opera issues.

    I would also love to see Aalaap's JS-only link tracker.

    Roy - 19th December 2007

Help make this post better

Notes: Standard BBCode for links, bold, italic and code are supported. rel="nofollow" is added to all links. Your email address will never be displayed on the site.

Back to index