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.

Answer 2

I think the reason FF is giving you poor results is because your leaving the page before the action takes time to excute. 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;
  }
}

Answer 3

A second more server side approach that you may not have thought of would be to have a page that handles your redirects and logs the data then.

For example:

<a href="LoggerRedirect.ff?url=http://google.com"&gt;Click&lt;/a&gt;

Answer 4

The above poster is correct, it is unreliable because you are leaving the page before it has a chance to log it.

You could do this:

1) return false, so the href isn't active. 2) log the click 3) use location.href to redirect to the url it would have been redirected to

you might see a slight delay if it takes long time for your onclick handler to execute.

Answer 5

Use Google Analytics :)