A client wanted to find out which links were the most popular without using Google Analytics (yeah….I know). My initial approach was to pass all links through a script and record the details and then perform a rediect, I’ll admit a bit of a quick fix.

Having had a bit of time to sit and think about this I decided to intercept the anchor tags perform the action and then continue. The benefits of this means you can easily apply the script to an existing site.

We start off by listening for clicks on anchor tags.

$(document).ready(function(){

  $("a").click(function(e){

  });

});

Next we want to stop the click from going to its destination.

$(document).ready(function(){

  $("a").click(function(e){

    // as the name would suggest, prevent the default action.
    e.preventDefault();

  });

});

Once the default action has been stopped we can instruct the browser to do what we want. If the script you’ll be calling is on the same server you can use AJAX otherwise you’ll have to be a bit more creative, we’ll move on to that in a bit.

$(document).ready(function(){

  $("a").click(function(e){

    // as the name would suggest, prevent the default action.
    e.preventDefault();

    // put the original URL into a variable
    dest=$(this).attr('href');

    // call your script, passing the variable (you'll probably need to include a random variable to ensure the URL called is unique), once the script returns success, call the callback function, in this instance, go to the original destination.
    $.get( "[your_script]", {[the_data_you_are_passing]}, function(){ window.location.href=dest } ); 

  });

});

What about is the script your calling isn’t on the same server, AJAX prohibits this so we need a way around it. My solution is that once the link has been clicked add a div tag to the site containing an image. The image can be held on another server. Now you’re thinking how can I pass variable to an image. My solution to this was simple, the image isn’t an image but script that returns an image, you can pass any variables you like to the script.

$(document).ready(function(){

  $("a").click(function(e){
 
    e.preventDefault();
 
    // make sure we have a unique url
    random=Math.random()*999999;

    dest=$(this).attr('href');

    // the variables you want to pass to the script
    variables='boo='+yaa;

    // allocate space for the image	
    var img = new Image();

   // append the div tag to the body	
   $("body").append('
'); // load the script into the image and append to the div tag, then redirect to the original destination $(img).load(function () { $('#trackingdiv').append(this); window.location.href=dest; }).error( function () {} ).attr('src', '[the_url_of_your_script]?rand='+random+'&'+variables); }); });
Filed under: Programming — Tags: , , — admin @ 6:54 pm

About me

Jonathan Spicer

My CV

My curriculum vitae and a wealth of other facts about me.

Warhammer Quest tools

Flickering flame effect Flickering flame effect Flickering flame effect

Powered by WordPress