Jquery clicktracking mousedown vs click

Go To StackoverFlow.com

0

I need to track outbound clicks from a directory on our site, and would like to do this so that the actual url is in the href. Something like:

 <a href="http://www.example.com" id="a24" class="link" >Go to Example</a>

This is the JQuery I'm using below. The click.php file is basically looking up the link id and then inserting the click information into a mysql table.

This seems to work fine even if the click.php takes a long time to complete. In other words, the user immediately links through to the destination url, even if I set the the click.php to sleep for 10 seconds before completing.

I'm using $('a.link').mousedown instead of $('a.link').click When I use .click, then it doesn't work (the click is not recorded). I'm just curious why it wouldn't work with using the .click function and only works with the .mousedown function.

Is this a good way to capture the clicks with JQuery or is there a better way? (I realize that anyone with Javascript turned off wouldn't be counted).

$('a.link').mousedown( function(e){

        var my_id = $(this).attr('id');

        $.ajax({    
          type: "GET",
          url: "/tiger/sal/clicks/click.php?id=my_id"
        });

        return true;

});
2012-04-04 01:19
by Frank


2

You're not giving jQuery enough time to compute everything before your browser directs. Why don't you try something like:

$('a.link').click( function(e){

   // Prevent the browser from running away
   e.preventDefault();

   // I've changed this to POST to make it a bit more secure
   // You can access the link ID with $_POST['link_id'] now
   $.post('/tiger/sal/clicks/click.php', { link_id: $(this).attr('id') });

   // Wave goodbye
   window.location.href = $(this).attr('href');

});
2012-04-04 01:22
by hohner
Thanks, but even with the mousedown and the click.php taking 10 seconds to complete (I include sleep(10) in the click.php file) it will work. So it immediately sends the user to the site, and then about 10 seconds later the click record is entered in the table. That's what I want it to do, I guess I'm just wondering why it works with mousedown and not click, and whether I'm doing anything that could cause problems in clicktracking - Frank 2012-04-04 01:28
Okay. I've edited my answer. You want to send a $.post() request using jQuery -- this will send the request to the server and not wait for it to be completed before shipping the user off to the link destination. This sends all the necessary information to your script to be processed without needing the user to wait around for it to finish. Also, I'd try and avoid using sleep() as much as possible because it's not that good for UI - hohner 2012-04-04 01:32
Thanks very much I need to leave right now, but will test this as soon as I can. Also, I just put the sleep in there to see what would happen if the server was really slow, and whether it would slow down people getting to the destination url. So I would remove that in production - Frank 2012-04-04 01:50


0

I don't see why it wouldn't work.

This works when I tested it but the url endpoint needs to be fixed in your AJAX call:

$(function(){
  $('a.link').click( function(e){
    var my_id = $(this).attr('id');
    var href = $(this).attr('href');
    $.ajax({    
      type: "GET",
      url: "/tiger/sal/clicks/click.php?id=" + my_id,
      success: function(d){
          // allow it to successfully call the server before redirecting.
          window.location = href;
      }
    });
    return false;
  });
});

I wouldn't do it in a "mousedown" since that doesn't guarantee that the user actually clicked on the link.

2012-04-04 01:31
by Dennis Rongo
Thanks very much, but somehow this isn't executing the script for me. It redirects the user, but doesn't add the record to the table like it does when using the mousedown without the success - Frank 2012-04-04 01:52