How can I monitor users clicking on links via Javascript?

Question

I've been tasked with determining if it's possible to detect link clicks with javascript.

I'm aware of the onclick attribute, which gets me part of the way there. Other then that, I don't know what the best approach is. I've already told my boss that it will likely involve some form of ajax, which probably involves a big library, which is not acceptable.

Is there any other way then to use ajax, or anyway to use ajax that won't add a lot of time?

Edit: He wants to be able to tell how many times users use the links on the homepage of the site. Unfortunately, we can't do a slick server side solution because nearly all of the pages on the site are just plain html . I would love to convert all the pages to php or some other alternative and just take note of HTTP_REFERRER data, but that's not currently possible.

We're already using Google analytics; it doesn't record the referrer data.

Edit again: It turns out that my boss hadn't seen the overlay, and I assumed he clicked through all the tabs. Upon my investigation, initially they were all reporting zero clicks, but I discovered that we had the old version of google's analytics blurb in place. A quick upgrade to the new hotness one and the problem is solved.

Thanks to all the responses.

Answer 1

If this is for data collection about website usage, have you considered Google Analytics instead?

Answer 2

jQuery.min.js is 30k in size or under. That's not big.

Why does your boss want to monitor link clicking anyway? If it's to URLs on your own site then you should be able to get that from access logs or Google Analytics anyway (or some more useful variant of that information).

Answer 3

Wont go into discussion about whether this is a good idea or not, but here is some code that does what your header asks.

As you put it yourself, the onclick event is one way to go. You need to create a script that loops through the a tags and assigns an onclick event to them. Something like this:

<script type="text/javascript">
window.onload = function() {
  var a = document.getElementsByTagName("a");
  for(var i=0; i < a.length; i++ ){
    a[i].onclick = function() { alert("link clicked"); };
  }
}
</script>

If you want to tell the server about the click you would need an AJAX call instead of the alert :) That snippet goes into the head section to work.

Another way to go about this is to listen on the general window.onclick event and trace the object being clicked, if it's an a tag you can execute whatever code you wish.

Answer 4

For some reason, if you cannot use google analytics, try handling the window.onclick event and from the event object you can read the src element. This would tell you the object on which click event is triggered. (I believe click will be triggered for both keyboard and mouse.

Sample code written only for IE. If you need other browsers, you may have to modify the code

document.onclick = function()
{
    alert(window.event.srcElement.id);
}

Answer 5

If you end up using jQuery (as one of the posters here have recommended) you can intercept all link fairly easily. For example, if you wanted to count how many times each link was clicked (indexed by id), you could code something like this:

var clickCount = [];
$('a').click(function() { clickCount[$(this).attr("id")]++; return true; });

Answer 6

In addition to Google Analytics, you might wish to check out ClickTale. It offers site overlay plus quite a few features Google doesn't.

Answer 7

By the way, you can also tag up your external links and get GA to track them as well:

"How do I manually track clicks on outbound links?"