I was checking out http://userfly.com/demo. It captures all mouse clicks and keyboard strokes and plays everything back. How is this done without installing any software? Pure Javascript? It doesn't look like it's using Flash. Are there tools I can use to put something similar in my own site offering it to others?
+1
A:
Basically I think what is done is capture window.event whenever anything happens they record what the event was, what it did, and the time. Then the just reconstruct that for the playback. I don't know if there are tools to do this, but the basic concept shouldn't be to hard. The method of saving the data and retrieving would probably be the hardest part.
qw3n
2010-07-21 19:26:31
Nope, no window.event, they bind tones of even handlers on page load to window.document.
Ilya Volodin
2010-07-21 19:57:15
this. i think your hardest part is the saving of the data in an unobtrusive manner. obviously you use ajax, but you'd have to do it in a way that couldn't fail due to page refresh navigation away or something. its alot of data to save quickly.
nathan gonzalez
2010-07-21 20:04:46
@llya I guess you could do it that way. But I think at least in the modern browsers you can capture an event and then decide what event it was. Seems easier to do that way. Of course I didn't write the code so...@nathan I was thinking of that too. especially saving everywhere the mouse went. I looked at the page with an inspector and it is filled with coordinate points.
qw3n
2010-07-21 20:13:43
+1
A:
They bind all possible events to the document level object with the function called "_bindEvents" creating delegates for each and every action that user takes on the page. They also record a timestamp when each event happened. The way they save that data is they turn them into JSON strings and load up a 1x1 image passing JSON string as a query string parameter.
They way they play it back is simple, they just cause all of the events in the same sequence back to the page. With exception of mouse move event. Since it's not possible to get the mouse cursor to move from JavaScripts, they create a div with an image that looks like mouse cursor and move it around in the pre-recorder sequence. Quite easy, but also quite impressive.
Ilya Volodin
2010-07-21 19:55:47
also, it appears they cache the page as it is on the server, allowing them to pull the html back out and present a page that looks exactly like the page you were on, but it won't have any cross site scripting issues
nathan gonzalez
2010-07-21 20:11:39
A:
Hi,
you asked for other similar tools, and you should definitely try http://mouseflow.com . It offers the same recording/playback functionality of Userfly, but it also offers heatmaps showing clicks, mouse movements and scroll behavior on your pages. It supports recording pages behind login, session-dependent pages (such as checkout pages). There are free as well as paid plans.
Lasse
(representing Mouseflow.com)
Mouseflow
2010-07-22 12:44:51
I wanted a similar tool that I can install myself. Not just another similar service.
Tony_Henrich
2010-07-22 16:20:04