A wonderfull piece of code. For my bachelors thesis, among other things, I’m researching the way patients look for information on a hospital’s website. I’ve put together a focus group, but using your script could really help me reach a larger audience! Any way you could share with us the server-side PHP script? I could send you a copy of my thesis, including all proper credits of course :)

I REALLY hope to hear from you soon,
Regards from the Netherlands,
Dennis

I just found some piece of code i created one or two years ago. The “movelogger” records the mouse movement a users does on a web site. Just before the user leaves the current page, the recorded data get posted back to the server using AJAX.
The co…

Maybe the ability to record keybord input in fields would be a nice feature to add.

and annotating the code would be a big + also :D

Best regards
Trolle

can anyone provide link to download the code … in zip file that contains php code too … please don’t say that view source… hmmmmmmm ……. i need php code too …

Thanks in advance.

In ml.js the offending code is:
if (document.all) {
$(this.id).fireEvent(“onclick”);
} else {
var evt = document.createEvent(“MouseEvents”);
evt.initMouseEvent(“click”, true, true, window,
0, 0, 0, 0, 0, false, false,
false, false, 0, null);
var el = $(this.id);
var canceled = !el.dispatchEvent(evt);
// console.log(“click cancled`:”, canceled);
}

Why are we testing for document.all, if we’re not actually using it in the code we execute in a positive result? Naughty naughty :P
I call it a bug because:
- Firefox secretly supports document.all, but doesn’t acknowledge it
- OPERA supports it, and is proud to admit that it supports it, but doesn’t support the code that comes after it :P

So here’s a patch for it, very easy. If I spot anything else I will post it back here for you guys.

– if (document.all) {
++ if ((document.all)&&(!window.opera)) {
$(this.id).fireEvent(“onclick”);
} else {
var evt = document.createEvent(“MouseEvents”);
evt.initMouseEvent(“click”, true, true, window,
0, 0, 0, 0, 0, false, false,
false, false, 0, null);
var el = $(this.id);
var canceled = !el.dispatchEvent(evt);
// console.log(“click cancled`:”, canceled);
}

Those of us who’ve never seen a patch written like that, I’ve shown you the section of code with — signs next to what to take out and ++ signs next to what to put in. The end result of course will be simply this:

if ((document.all)&&(!window.opera)) {
$(this.id).fireEvent(“onclick”);
} else {
var evt = document.createEvent(“MouseEvents”);
evt.initMouseEvent(“click”, true, true, window,
0, 0, 0, 0, 0, false, false,
false, false, 0, null);
var el = $(this.id);
var canceled = !el.dispatchEvent(evt);
// console.log(“click cancled`:”, canceled);
}

I hope that’s useful to someone.
I’ve given an explanation of the workaround, here’s an explanation of the failure:
- the little “mouse” picture never clicks anything during “playback”
- opera dumps something similar to this into the console on every failed click:

JavaScript – http://pure.rednoize.com/movelogger/
Timeout thread: delay 8572 ms
Error:
name: TypeError
message: Statement on line 131: Type mismatch (usually non-object value supplied where object required)
Backtrace:
Line 131 of linked script http://pure.rednoize.com/movelogger/ml.js
$(this.id).fireEvent(“onclick”);
… Line 52 of linked script http://pure.rednoize.com/movelogger/prototype.js
return __method.apply(object, args.concat($A(arguments)));

I’m yet to test it in KHTML +/- Webkit, I’ll get back to you on that.

So issues could be:
- browser/object detection falls over (seems fixed now though??)
- doesn’t work on scroll (should be an easy fix)
- doesn’t distinguish between mouse buttons (again, probably not the end of the world, possibly fixed by using mousedown instead of click)

wishlist:
for me, nothing, but it depends on your applciation for this ;)

Not that I took the time to look at the source. I have just made something very similar (still a prototype or working draft, no backend yet, doesn’t require external libraries) which analyses click events and the elements that were clicked on (attach it to the body, and force it to bubble upwards from the event target until it hits something or interest, or force it to fail silently if it hits a control point such as the “body” element)

I think that as script like this would play really nicely for my new script to help analyze certain things in a closed environment.

Some notes on your script:
- the “second cursor” is white. mine is black. so clearly it’s an image and nothing more (like autumn leaves) – why is this important? If you wanted that image to change on mousing over certain things like text, you would just code it in there with dom traversal like a normal person ;P

I see no point in doing so, and I think the current resolution (in time) is ideal.

- It doesn’t accurately reflect click events in this instance. That’s no huge worry because it seems more of a very very very very very nice proof of concept, but it’s by no means ready for these people who think they would just use it straight away in a mission critical situation.

I middle-clicked something (open in a new tab in a proper browser from the last half decade OR in IE7)… It opened a new tab. The replay-script followed the link instead of emulating what I’d done. Such a tiny and trivial little thing, no great problem at all – but for psychometric testing or whatever you’re planning on doing with it, you probably want to catch all these weird events – or at least as many as you can.

Thank you very much for sharing this with us all, Marcel, it is a real gem.

Great job!! right click => view source :)
What about the php?

What about the mouse pointer style? it does not change to the hand when moving over the link. It should be able to detect the mouse pointer style of an element and display the appropriate one.

I thought maybe this can be used trigger the image alt text/tool tip text on IExplorer, but from the look of the code, it cannot.

“Other bad things”, like doing pranks. :)

Marcel Oelke씨는 자바스크립트와 Ajax를 이용하여 웹사이트에 방문한 사용자의 마우스 움직임과 클릭을 기록할 수 있는 movelogger.js를 만들었습니다. 페이지에 머물러있는 동안 지속적으로 JSON…

Great script. Is is possible to get the source code?

Cheers,
Max

i think it’s a totally simple and uncomplicated way to have a look on the users mouse-behaviour without capturing video-casts and all that stuff…it’s easy and straight-forward, as it should be!