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;
  }
}

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">Click</a>

Answer 4

This example will fire off an ajax post before the link click is processed. I found I had to call ajax synchronously or the POST will not be executed. In this example my ajax post is to a PHP page which appends a log file. This example is efficient since it only attaches a click event to the window. It also will not interfere with a user clicking a link.

//attach click event to window
attachClickEvent = function() {
    $(document).on('click', function(e) { //document for IE8 compatibility
        var element = $(e.target);
        var tag = element.prop('tagName');

        if (tag === 'A') {
            var data = {'title':document.title, 'URL':element.attr('href'), 'origin':location.href};
            logData(data);
        }
    });
}

logData = function(data) {
    $.ajax({
        async: false,
        cache: false,
        type: "POST",
        data: data,
        url: 'logger.php',
        success: function(msg) { 
            //debugging
        },
        error: function() {
            //debugging
        }
    });
}

Answer 5

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.