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?
How about writing it yourself ? :) Let's consider this simple jquery code :
put this in your < head >
<script src="http://code.jquery.com/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.net mvc page to deserialize json and store it into db / xml whaterver you need ) and you're ready to go :)
as per the comment 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 complete 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.com/support/video_tutorials
