Record mouse movement using Javascript and AJAX

18 Oct, 2007  Javascript, Discoveries, PHP

53 Comments so far »

1. Ajaxian » JavaScript Mouse Move Logger said

   am October 19 2007 @ 5:15 pm

   […] Oelke has resurrected some code that he wrote to record mouse movement using JavaScript and Ajax. The “movelogger” records the mouse movement a users does on a web site. Just before the user […]

2. James Blair said

   am October 19 2007 @ 6:14 pm

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

3. cherta said

   am October 19 2007 @ 6:29 pm

   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.

4. Javascript News » Blog Archive » JavaScript Mouse Move Logger said

   am October 19 2007 @ 6:50 pm

   […] Oelke has resurrected some code that he wrote to record mouse movement using JavaScript and Ajax. The “movelogger” records the mouse movement a users does on a web site. Just before the user […]

5. Loggea el movimiento del ratón de tus usuarios | aNieto2K said

   am October 19 2007 @ 6:54 pm

   […] Ajaxian, descubro como loggear el movimiento del ratón de tus usuarios mediante javascript y ajax. Puede ser una forma muy útil de conocer que hacen los usuarios en tu página. [Demo] Compártelo […]

6. Ajax Girl » Blog Archive » JavaScript Mouse Move Logger said

   am October 19 2007 @ 7:22 pm

   […] Oelke has resurrected some code that he wrote to record mouse movement using JavaScript and Ajax. The “movelogger” records the mouse movement a users does on a web site. Just before the user […]

7. tmonkey said

   am October 19 2007 @ 7:32 pm

   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?

8. jeka911 » Blog Archive » Лог движений курсора с javascript said

   am October 19 2007 @ 7:37 pm

   […] Oelke в своем блоге выложил демо страницу со скриптом, который записывает […]

9. Alex Hernandez said

   am October 19 2007 @ 7:49 pm

   Hey, nice work.

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

   .::AleX::.

10. Lorenz said

    am October 19 2007 @ 8:24 pm

    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!

11. Lorenz said

    am October 19 2007 @ 8:33 pm

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

12. Usabilidad: Registra el movimiento de ratón de tus usuarios | Yago Arbeloa said

    am October 19 2007 @ 8:42 pm

    […] planteado, obtienen conclusiones sobre la usabilidad. Pero, tras leer en anieto2k que existe un loggeador de movimientos de ratón, hecho entre javascript y ajax, creo que puede resultar muy útil para hacer estudios de usabilidad […]

13. napyfab:blog» Blog Archive » links for 2007-10-19 said

    am October 20 2007 @ 12:35 am

    […] puRe aka Marcel Oelke » Record mouse movement using Javascript and AJAX (tags: javascript mouse logging code ajax library programming webdev web development move movement replay) […]

14. Victor De la Rocha said

    am October 20 2007 @ 1:28 am

    no ideas, but… Amazing :O

15. links for 2007-10-20 « Simply… A User said

    am October 20 2007 @ 1:44 am

    […] puRe aka Marcel Oelke » Record mouse movement using Javascript and AJAX (tags: javascript ajax logging mouse tracking programming tools webdev **) […]

16. Denis au fil du web » links for 2007-10-20 said

    am October 20 2007 @ 1:52 am

    […] puRe aka Marcel Oelke » Record mouse movement using Javascript and AJAX Un système de mouse tracking en JS & php. Plutôt bluffant (tags: ajax mouse tracking) […]

17. links for 2007-10-20 at The New Reader said

    am October 20 2007 @ 3:29 am

    […] puRe aka Marcel Oelke » Record mouse movement using Javascript and AJAX Sweet (tags: ajax keyboard orality) Published by ichen October 20th, 2007 in General […]

18. John said

    am October 20 2007 @ 5:19 am

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

19. Anton Muraviev said

    am October 20 2007 @ 6:19 am

    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.

20. red said

    am October 20 2007 @ 11:32 am

    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…

21. Mark said

    am October 20 2007 @ 7:59 pm

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

22. Max said

    am October 21 2007 @ 8:55 am

    Hi,

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

    Cheers,
    Max

23. Firejune Blog said

    am October 21 2007 @ 10:34 pm

    자바스크립트와 Ajax로 방문객 마우스 활동 기록하기…

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

24. Los Links de Tolito » Blog Archive » Links del 22 de Octubre del 2007 said

    am October 22 2007 @ 7:45 am

    […] Logea el movimiento del ratón de tus usuarios con Ajax […]

25. Testy użyteczności przy pomocy JavaScript/AJAX » Dotmariusz Labs said

    am October 22 2007 @ 10:03 am

    […] blogu Marcela Oelke pojawił się ciekawy artykuł wraz z kodem w JavaScripcie (z użyciem Prototype/script.aculo.us) o […]

26. puRe aka Marcel Oelke » Record mouse movement using Javascript and AJAX said

    am October 22 2007 @ 10:45 am

    […] betovarg wrote an interesting post today onHere’s a quick excerpt […]

27. Bram.us » Record mouse movement using Javascript and AJAX said

    am October 22 2007 @ 12:44 pm

    […] It would even be possible to record keyboard strokes and other type of events.” - Wow! Spread the […]

28. Ajax Blog : Archivio : Registrare i movimenti del mouse in Javascript said

    am October 22 2007 @ 1:00 pm

    […] del mouse in Javascript   Pubblicato in Script No Tags 22Ott Vi segnalo un interessante script Javascript realizzato da Marcel Oelke per registrare i movimenti compiuti dal mouse su una pagina e gli eventuali click. Lo script […]

29. Ajax Girl » Blog Archive » Registrare i movimenti del mouse in Javascript said

    am October 22 2007 @ 1:41 pm

    […] segnalo un interessante script Javascript realizzato da Marcel Oelke per registrare i movimenti compiuti dal mouse su una pagina e gli eventuali click. Lo script […]

30. Suman Paul said

    am October 22 2007 @ 1:56 pm

    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)

31. dashda » Blog Archiv » Record mouse movement using Javascript and AJAX said

    am October 22 2007 @ 2:41 pm

    […] here Der Beitrag wurde am Thursday, den 18. October 2007 um 07:40 Uhr veröffentlicht und wurde […]

32. VT’s Tech Blog » Blog Archive » Record mouse movement using AJAX said

    am October 22 2007 @ 3:20 pm

    […] to try out a demo ? Check this link: http://pure.rednoize.com/movelogger/ Link: puRe aka Marcel Oelke » Record mouse movement using Javascript and AJAX Bookmark and share: These icons link to social bookmarking sites where readers can share and […]

33. rascunho » Blog Archive » links for 2007-10-22 said

    am October 22 2007 @ 9:28 pm

    […] puRe aka Marcel Oelke » Record mouse movement using Javascript and AJAX 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. (tags: pure.rednoize.com 2007 mes9 dia22 at_tecp usability movelogger movement mouse record javascript) […]

34. links for 2007-10-22 said

    am October 22 2007 @ 9:30 pm

    […] puRe aka Marcel Oelke ? Record mouse movement using Javascript and AJAX 마우스의 움직임을 기록하는 자바스크립트..놀랍다 +_+; (tags: javascript ajax mouse logging) […]

35. links for 2007-10-22 « toonz said

    am October 23 2007 @ 12:26 am

    […] puRe aka Marcel Oelke » Record mouse movement using Javascript and AJAX (tags: Javascript ajax mouse) […]

36. All in a days work… said

    am October 23 2007 @ 11:50 am

    […] Record mouse movement using Javascript and AJAX The cursor animation I saw was jerky and sporadic, but he is definitely on the right course with this stuff! (tags: Cursor Highlight Fade) […]

37. Webjamy’s blog » Archive du blog » Quelques liens à voir said

    am October 23 2007 @ 7:32 pm

    […] de mouse tracking à base de JS et […]

38. Fatih Hayrioğlu’nun not defteri » 24 Ekim 2007 Web’den Seçme Haberler said

    am October 24 2007 @ 2:49 pm

    […] Javascript ve ajax ile fare imlecinin hareketlerini kaydetme işlemi. Bağlantı […]

39. dhwang said

    am October 25 2007 @ 2:21 am

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

40. Weekend Links - PHP Regular Expressions, XMLHttpRequest, Internet Explorer, Mouse Tracker, MooTools Gallery, Endless Pageless | David Walsh :: PHP, CSS, MooTools, and Everything Else said

    am October 28 2007 @ 10:48 pm

    […] http://pure.rednoize.com/2007/10/18/record-mouse-movement-using-javascript-and-ajax/ […]

41. Técnica para grabar movimientos del ratón mediante javaScript said

    am November 7 2007 @ 11:46 am

    […] pure.rednoize.com veo un interesante post con un muy buen ejemplo, de cómo grabar los movimientos del ratón de nuestros […]

42. <blog> interfce.com </blog> » Blog Archive » bookmark dump said

    am November 20 2007 @ 9:33 pm

    […] puRe aka Marcel Oelke » Record mouse movement using Javascript and AJAX […]

43. Record mouse movement using Javascript and AJAX said

    am December 5 2007 @ 11:21 pm

    […] Drum & Bass and Hip Hop Beats.            Record mouse movement using Javascript and AJAX I just found some piece of code i created one or two years ago. The “movelogger” […]

44. Davin said

    am February 4 2008 @ 8:16 pm

    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!

45. Marcel Oelke said

    am February 4 2008 @ 9:34 pm

    @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.

46. Davin said

    am February 6 2008 @ 8:21 pm

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

47. Sharkoon said

    am February 15 2008 @ 3:59 pm

    Hi Marcel,

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

48. David Jacques-Louis said

    am February 23 2008 @ 12:31 am

    Can I make a WordPress plugin based on it?

49. Eugene said

    am February 28 2008 @ 9:07 am

    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?

50. SneakyWho_am_i said

    am March 3 2008 @ 5:08 pm

    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.

51. Sean said

    am March 4 2008 @ 9:53 am

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

52. SneakyWho_am_i said

    am March 6 2008 @ 12:31 am

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

53. mgwalk said

    am March 13 2008 @ 9:19 pm

    very useful mouse movement info thanks

Comment RSS · TrackBack URI

Leave a comment