Click Logging with JavaScript

Question

I want to log all clicks on a link.

I've written a little logger, which can be called by an url (returns an empty page). This url is called with a jquery-ajax-method. But unfortunately not every click is logged, if the user uses firefox (everything looks ok in IE).

I've tried many things but have no solution to this problem, have anybody a glue?

HTML-Code:

<a href="http://google.com" onclick="return loggClick();">Click</a>

JS-jQuery-Skript:

function loggClick(){
   $.ajax({
        type: "POST",
        url: "Logger.ff", //dynamic url to logging action
        data: {
            sid: 'abc123' //random data
        },
        contentType: "application/x-www-form-urlencoded; charset=UTF-8",
        cache: false
    });
    return true;
}

EDIT: I've missed in the example that i have to pass dynamic parameters in the js-call, so it's "not possible" to remove the onclick-event :(

Answer 1

I would start getting rid of the inline 'onclick' code and binding the event later:

  <a href="http://google.com" rel="outbound" >Click</a>


   $("a[rel=outbound]").click(function(){ 
        var url = this.href; 
        $.ajax({
        async: false,
        type: "POST",
        url: "Logger.ff", //dynamic url to logging action
        data: {
                sid: 'abc123' //random data
                clicked: url
        },
        contentType: "application/x-www-form-urlencoded; charset=UTF-8",
        cache: false
     });
     return true; 
  }); 

Also, you might have a "Race Condition" occurring. In my example I have set async to false.

This will stop the function returning and following the link before the request has been performed.

About Async

The reason I use async: false here is because with the default, aync is true, which means the AJAX request may only be partially transmitted by the time the browser sees return: true, and navigates away from the page.

This is that "race condition" I was mentioning. Here, its a cheap trick that avoids it by making the browser essentially come to a halt until the request is complete, and then allowing the browser to click the link.

A more sophisticated answer would be having it return "false", ( which will kill the browsers native "follow link" behaviour ), and then having the real redirection performed in the complete function.

This is not without its own issues mind, and could result in slow browsing behaviour while requests complete, allowing users time to click other links, which appear to do nothing, and then eventually one request gets through at a random time, and a seemingly random redirection occurs.

Hence, advanced solutions include blocking the rest of the page and giving some sort of progress indication while the request completes.

( And hence, the complexity of this solution is an order of magnitude harder to pull off in a simple example than async: false )

Answer 2

I think the reason FF is giving you poor results is because you're leaving the page before the action takes time to execute. As mhartman's link mentions if you use a target on your external link it should work fine. If you can't do that then you may have to wait for the log to complete, although you may see delays in navigation.

HTML code

<a href="http://google.com" onclick="return loggClick(event);">Click</a>

the

function loggClick(e) {
  if (!e) e = window.event;

  e.preventDefault();  // cancels the link

  var theLink = this.href;  // stores the link for later

  $.ajax({
     async: false,
     type: "POST",
        url: "Logger.ff", //dynamic url to logging action
        data: {
            sid: 'abc123' //random data
        },
        contentType: "application/x-www-form-urlencoded; charset=UTF-8",
        cache: false,
         complete: function() {
           // navigate when the log completes
           this.location.href = theLink;
         }
    });
    return true;
  }
}