CODEWITHSUNDEEP
javascripthtmlajax
Allyn
Allyn

Reputation: 20441

How can I monitor users clicking on links via Javascript?

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.

Upvotes: 4

Views: 7001

Answers (10)

Luke_P
Luke_P

Reputation: 709

in RXJS:

        import { fromEvent } from 'rxjs';

        const source = fromEvent(document, 'click').pipe(
            filter(value => (value as any).toElement.localName === 'a'),
            map(value => (value as any).toElement)
        ).subscribe(value => {
            track('Clicked Outbound Link', {link: value.href})
        })

Upvotes: 0

lasseschou
lasseschou

Reputation: 1480

Another great tool you might want to check out is http://mouseflow.com. Mouse tracking, video playback and heatmaps.

Upvotes: 0

Cory R. King
Cory R. King

Reputation: 2796

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?"

Upvotes: 1

ЯegDwight
ЯegDwight

Reputation: 25257

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

Upvotes: 1

Joe Di Stefano
Joe Di Stefano

Reputation: 2267

Actually, Google Analytics does track this data. If you go to the Content Overview page of your report, there is a link for Site Overlay. This will show you your website overlaid with the number of clicks on each link on the page.

site overlay example http://okay-plus.com/dropbox/img/site_overlay.jpg

Upvotes: 8

Ramesh
Ramesh

Reputation: 13266

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

Upvotes: 2

Per Stilling
Per Stilling

Reputation: 876

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.

Upvotes: 3

cdmckay
cdmckay

Reputation: 32290

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

Upvotes: 1

cletus
cletus

Reputation: 625427

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).

Upvotes: 2

GEOCHET
GEOCHET

Reputation: 21323

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

Upvotes: 3

Related Questions