jquery - Is there any javascript library to capture mousekeyboards events and send them to external server? - Stack Overflow

What I need is something which:

• can catch all keyboard events
• can catch all mouse events (clicks, movement)
• can catch page scrolling, possibly taking care about browsers differences
• send data to external server using JSONP (or anything else, but need to work not only in newest browsers)
• is quite small, at most xx kB I hope

I would like to find something which have at least 3 of above implemented properly. I can also look at js frameworks like Dojo or JQuery if they can help me, but then will I be able to to keep it small enough?

What I need is something which:

• can catch all keyboard events
• can catch all mouse events (clicks, movement)
• can catch page scrolling, possibly taking care about browsers differences
• send data to external server using JSONP (or anything else, but need to work not only in newest browsers)
• is quite small, at most xx kB I hope

I would like to find something which have at least 3 of above implemented properly. I can also look at js frameworks like Dojo or JQuery if they can help me, but then will I be able to to keep it small enough?

• javascript
• jquery
• ajax
• dojo
• jsonp

Share Improve this question Follow asked Nov 28, 2011 at 18:49 Piotr KukielkaPiotr Kukielka 3,87233 gold badges3333 silver badges4040 bronze badges 4

• When you use the word ALL do you mean keyboard and mouse events inside and outside the browser? (Cause thats not possible with Javascript) – Erik Philips Commented Nov 28, 2011 at 18:56
• 1 No, obviously not ;) I mean all events inside the browser tab (if it's active). – Piotr Kukielka Commented Nov 28, 2011 at 18:57
• Just curious, why do you need to stalk the user so much? – zzzzBov Commented Nov 28, 2011 at 19:16
• For statistical analyse of user behavior. Adobe Omniture from the Erik Philips answer is good example of such kind of thing. – Piotr Kukielka Commented Nov 28, 2011 at 19:22

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 9

How about writing it yourself ? :) Let's consider this simple jquery code :

put this in your < head >

    <script src="http://code.jquery./jquery.min.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(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);
            });
        });
    </script>

If you'll go to Firefox firebug, or IE/Chrome developer tools / javascript console you'll see all the values. You will need to implement simple event object with the data you need, and some mechanism to post the gathered data every couple of seconds (using jquery post or ajax method and JSON object )

Summarizing :

• all keyboard events ? yes (key presses)
• mouse movement and clicks ? yes
• can catch page scrolling ? doable
• possibly taking care about browsers differences - that's jquery main goal
• send data to external server using JSONP ? sure just use $.ajax or $.post
• is quite small, at most xx kB I hope - jquery it'self is around 31kb minfied/gzipped

It's not bulletproof, you'll need the server part (simple php/asp mvc page to deserialize json and store it into db / xml whaterver you need ) and you're ready to go :)

as per the ment below about batching up the data - very good point. Changeing the .mousemove event to :

            $('html').mousemove(function(event){
                console.log("mouse move X:"+event.pageX+" Y:"+event.pageY);
                var color = 'red';
                var size = '2px';
                $("body").append(
                    $('<div></div>')
                        .css('position', 'absolute')
                        .css('top', event.pageY + 'px')
                        .css('left', event.pageX + 'px')
                        .css('width', size)
                        .css('height', size)
                        .css('background-color', color)
                );
            });

will make it easier to imagine how much data it will be - each dot would be a single POST to the remote server

This question sounds like a XY Problem. I think what you ACTUALLY looking for is a system that will allow you to log user events on a webbrowser AND report on these events. Typically this type of functionality doesn't exist as a partial product but a plete solution. The only solution I know of that does this type of tracking AND provides reporting is Adobe Omniture (from personal experience). Whats terrible as of this writing the website appears to be down.

There is a service http://www.clicktale./support/video_tutorials

In the case of using RXJS, you can do it in a more elegant way.

import { fromEvent, merge } from "rxjs";
import { debounceTime } from "rxjs/operators";

merge(
  fromEvent(document, "keyup"),
  fromEvent(document, "mousemove")
).pipe(debounceTime(1000))
  .subscribe(response => {
    console.log(response);
});

I know the question is very old. Just wanted to add an answer with the RXJS approach.