Is the code (the PHP code too) available somewhere? I’d like to try playing with this a little.

I think it could be used to perform some low budget usability tests. Replacing in some way the eye tracking technologies.
It also can be used to learn how the users interact with Ajax enabled GUI’s, how they react to the system responses like clicking and displaying hidden things or others GUI responses.

I’ve been looking for something JUST like this! Awesome!
I’d like to record keypresses — specifically typing in a textarea. And, no, not for nefarious Bad Things. Are you planning to open up the source?

Hey, nice work.

Is an article comming? Will you GPL it or something?

.::AleX::.

wow…is that cool! really, really nice…and all put together with HTML + JS on the front-end…

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!

is there any way to lay our hands on it? maybe a .zip with the back-end files? ;-)

no ideas, but… Amazing :O

That is cool! It can be used to do some user experience analysis work!

Other uses:
1) Multiple users work on the same project (e.g. drawing a picture) and you can see who make the changes, how and in what order as if you are looking over their shoulder.
2) Use it instead the video guides a la Basecamp. Just load the demo dataset for the current application page, start performing prerecorded mouse movements and actions that operate on this dataset.
3) One can also store recorded actions into the error log on exception throws to debug later. On the second thought, it won’t be that much useful.

Would be nice for remote-website-support… You call a the support – lets say via skype – the support agent takes control of your session and guides you through the website…

This script is fantastic! You are a genious! Would you consider to make this code opensource or to sell it? Please let me know. Thank you :)

Hi,

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

Cheers,
Max

Very nice script.
I was just thinking, how about creating a path heat map.
because otherwise it’s difficult to remember where the user went if we record a long session. May be we can use the mouse pointer as a brush (1px might not be a very good idea, 5px-10px might be ok, I believe) and start drawing on the canvas. The ink will be in overlay mode and on overlapping of two paths heat of that area will increase (same as eye tracking)

Maybe this can be integrated into Selenium for functional testing.

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

Any way to get my hands on the code for this? We’re working on some mouse tracking metric (for uncertainty) at our psych lab, and would love to use it in a web site!

@Davin.
I promised to write something about the code some time ago. But I am currently realy busy in my real life job. So for now, right click => view source.

@Marcel.
Good that you are busy (hopefully). I will take a look at the source :)

Hi Marcel,

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

Can I make a WordPress plugin based on it?

the recorded data get posted back to the server using AJAX to a file named record.php How can one obtain the server side file?

Guys, the code for the frontend is already worked out here. What you need is code for the backend, yes, but that should be easy. Without stopping and really looking at what’s happening, it seems all you need to do is stick it in a database to save it, pull it out and send it back to restore it. Analysis might be a bigger push but won’t be the end of the world, I think it would be easy in a lab.

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.

The only thing it’s missing, is recording the window scrolling. The whole thing falls apart if the user scrolls down.

I love it enough that I’ve just taken a peek at the code now and started playing with it. Anoyone interested in using this I found a bug. It’s so trivial it’s not funny :) but bad news if you’re using Opera.

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

very useful mouse movement info thanks

Hi,

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.

This is really nice. I seen larger and more complex scripts doing things like this, but the beauty of this is the simplicity.

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

That is cool! It can be used to do some user experience analysis work!

Marcel,

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 want this code…can you please send the code you used in “record mouse movements” please help.