views:

486

answers:

5

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 :(

+3  A: 

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.

Kent Fredric
+1 I like this, although the OP would have to have control of the server-side code to perform the location-redirect right?
bendewey
@bendewey what? your last part made no sense.
Kent Fredric
Why is this better? Is something wrong with the onclick? Do you think it will solve the problem or do you suggest it only because it is better?
Josef Sábl
its is better, there's 2 parts solution here. But making the code "right" as well as "working" is always a good 2-for-one deal
Kent Fredric
Also, I've seen weirdnesses with the inline way that didn't make sense, so I generally avoid them like the plague.
Kent Fredric
my fault, I didn't notice the async=false part, I thought you were passing the url to the logger.ff to do a redirect. totally read your post wrong
bendewey
@kent fredric, quick question why do you use outbound and not nofollow?
bendewey
because nofollow doesn't do what you think it does. nofollow is abused by SEO people for the wrong things. rel is an attribute describing the links relation to the page. thus, "nofollow" is sematically meaningless.
Kent Fredric
+3  A: 

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;
  }
}
bendewey
thanks for your answer, worked fine in Firefox but not in IE. But async:true was enough.
gamue
A: 

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;
bendewey
I've implemented something like this on one of my sites, the problem is that its really hard to sort the "noise" out of the click logs. I found that there was about a 50:1 ratio of spider clicks to human clicks. AFAIK most spiders don't bother loading a JS interpreter for each page they visit, so using JS to log outbound clicks seems reasonable enough.
Prairiedogg
A: 

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.

A: 

Use Google Analytics :)

Pete Duncanson