My pal and fellow Cubano, Juan has always hated how I track my links on this site. When I first started it up, I wanted to create a shared library on here, where I could sync up all of my links from del.icio.us in a table in my local database, and use those links all over, in my posts, etc., track their clicks, and then have a listing of all my links by tag, and, from tracking clicks, also be able to sort them by popularity. It still might happen eventually, but I haven't been thoroughly motivated to finish it up. I used to want to finish it really badly so I could use it for my own purposes. I use Firefox along with the Delicious plugin, and I always want to search links by all of the tags I enter. For example, if I put in 'Subversion Manual' (that combo is used a lot), I only want to see the links that have both of those tags, not either of them. Well it seems with the update to Firefox 3 there was also an update to the Delicious plugin that takes care of this for me. Motivation fully depleted.

Either way, I have been thinking of reworking the link tracking for quite some time. I've been using the format '/links/go/123' to track the links, rather than the URL itself. I think this frustrated Juan because he likes to see his status bar update at the foot of his browser and decide if he wants to go to that link or not. There have been a number of projects I've worked on where link tracking has been asked for by the client, so I decided to throw something together today.

I created a MooTools class called 'LinkTrack' that, in a simple 19 lines of code, scans the page for the links you specify, and, on the click event, sends the link information to a specified URL via AJAX. Here's what the class looks like:

var LinkTrack = {
    track: function(links, url) {        
        links.each(function(item) {
            item.addEvent('click', function() {
                var request = new Ajax(url, {
                    method: 'post', 
                    data: {
                        'url': item.getProperty('href'),
                        'title': item.getProperty('title')
                    },
                }).request();
            });
        });
    }
};

And here's what the function call looks like:

window.addEvent('domready', function() {
    LinkTrack.track($$('a[target=_blank]'), '/links/track/');
});

So here I passed in all 'a' tags with a '_blank' target, so I track every link leading away from the site. You could easily change this to track all links with the class 'link', or whatever else you can think up. I've got this site running in CakePHP, so I made a 'track' method in my 'links' controller that looks like this:

<?php

class LinksController extends AppController {
    
    ...
    
    function track() {
        $this->autoRender = false;
        if (preg_match('/http:\/\/(www\.)?ascendvisual.com(.*)/', $_SERVER['HTTP_REFERER']) && $this->RequestHandler->isAjax() && !empty($_POST['url'])) {
            
            $data = $_POST;

            if ($find = $this->Link->find(array('url' => $data['url'])) {
                $this->id = $find['Link']['id'];
                $out = $this->Link->saveField('clicks', ($find['Link']['clicks'] + 1));
            } else {
                $data['clicks'] = 1;
                $out = $this->Link->save($data);
            }
            
        }
    }
}

?>

I run a check to make sure the request is coming from my own site, that it's an AJAX request (using CakePHP's RequestHandler Component), and that a URL is set. The I scan my links table to see if that URL is already in there. If it is, I increment the click count, if not, the record is created with a click value of '1'. Pretty simple eh?

Feel free to let me know what you think, and, if you'd like, you can download the MooTools LinkTrack class I made by clicking here or over on the right under 'Related Snippets'. That's all for now folks, have a fantastic 4th of July weekend!