Search code examples
javascripthtmluser-experience

Javascript capturing user activity

Is there an existing js lib for capturing user activity browser side?

ie. Scrolling, mouse moving, mouse clicking etc. I've been googling, searching stackoverflow and github but I keep getting links to paid analytic programs which aren't quite what I'm after.

I'm tempted to start building something myself, but the more I think about it, the harder I realise it'll be and I'd be better off using some existing lib if available.

What I'm thinking. Would this be an appropriate way to go about it?

  • I'm assuming the best way is to listen on the body or window element and capture all desired events that haven't had bubbling disabled.
  • It'd be nice to batch and minify data before emitting/posting to the server. As in remove mode or frequently occurring data. If a user scrolls I don't need all the scroll events, only the meaningful ones where they start, accelerate or stop.
  • Could emit batches every X number of events or X seconds. And send final batch window.onbeforeunload.

I found these two questions here & here. But aren't quite what I'm after.

I want to be able to configure the event aggregation to ask a question on user interaction. Admittedly I'm out of date with Google Analytic, and maybe I'm wrong, but at a glance custom event tracking doesn't seem to fit the bill. Logging specific individual actions isn't what I'm after.

Solution

  • You must write it yourself ( or at least that's what i did ).

    Backup question : Is there any javascript library to capture mouse/keyboards events and send them to external server?

    Here is a working jsfiddle: http://jsfiddle.net/94dd343y/

            $(document).ready(function(){
        $('html').mousemove(function(event){
            console.log("mouse move X:"+event.pageX+" Y:"+event.pageY);
        });

        $('html').click(function(event){
            console.log("mouse click X:"+event.pageX+" Y:"+event.pageY);
        });

        $('html').keyup(function(event){
            console.log("keyboard event: key pressed "+event.keyCode);
        });
    });

    And so on.

    If you want to capture all the events, here is a list: