1

First, some background:

I need to develop a web app that will in background collect all mouse actions by a user (during a visit to a web page), store them in appropriate format in a file, and than have a separate replay app that will be fed with that file, and will produce something like this:

enter image description here

Curves are mouse movements, circles are either clicks or staying stationary.

I have more or less solution for replay app.

I need a solution that captures user mouse actions and saves it in a file on server.

For each user there should be separate file. Format of the file is not predetermined, but following would be reasonable:

<timestamp1> MOVE TO <x1>, <y1>
<timestamp2> MOVE TO <x2>, <y2>
<timestamp3> MOVE TO <x3>, <y3>
<timestamp4> CLICK
<timestamp5> RIGHT-CLICK
<timestamp6> MOVE TO <x6>, <y6>
<timestamp7> MOVE TO <x7>, <y7>

I wonder if you could help me on approach how to design and implement such mouse action capture. All best.

VividD
  • 10,456
  • 6
  • 64
  • 111
  • If you planning to collect click data with javascript, then it is really easy. Just attach an event listener to window or document, then write a logging function for that. – zfor Jan 15 '14 at 19:42
  • @zfor, thanks for the comment. See, thats where my dilemmas start. My current vision is following: 1) user opens a web page; a file is created on server, that can be identified later on through special filename/session ID 2) user plays with the page, and on each mouse action, something is sent to the server, and in turn recorded in the appropriate file. JavaScript can play role mainly on clients side, maybe even on server side (node). – VividD Jan 15 '14 at 19:54
  • @VividD what kind of privacy invasion is this :O – markasoftware Jan 26 '14 at 04:04
  • @Markasoftware What you have in reality, today, every day, at every place, is much worse that this. – VividD Jan 26 '14 at 08:19
  • If you are reinventing the wheel , http://www.openwebanalytics.com/ , http://smt.speedzinemedia.com/features.php – DhruvPathak Jan 28 '14 at 13:57
  • It would be much more better if you can link mouse actions to their equivalent SVG path drawings. Then and there. – Siva Tumma Jan 28 '14 at 14:59

1 Answers1

4

You can easily capture the mouse actions using the click, mousemove, etc. events, in the comments you mentioned you know how to do this, so I'll not detail this.

You can't directly `open' a file on the server, since the code is executed on a completely different machine (ie. the client), so what you'll need to do is send the data from the client to the server every second, or every few seconds.

There are several ways of doing this, here's one way:

  1. Check (& get) a unique userid from document.cookie, or localStorage, if there isn't one, generate one (using Date() and/or Math.random())

  2. Bind events to capture the mouse actions, these events write data (in the format you want) to the Array window.captureMouse.

  3. Send an Ajax request to the server every second (depending on the amount of users, speed of server, you may want to change the interval).

A piece of example code might illustrate the idea better (using jQuery)

userId = fetchOrSetUserId()   // Make this function

captureMouse = []
$('#id').on('click', function(e) {
    captureMouse.push({
        event: 'click',
        target: $(this).attr('id'),
    })
})

// ... more events ...

sendData = function() {
    // You probably need to do locking here, since captureMouse may be changed in an event before it's reset
    send = captureMouse
    captureMouse = []

   jQuery.ajax({
       url: '/store-data',
       type: 'post',
       data: {
           userId: userId,
           captureMouse: JSON.stringify(send)
       },
       success: function() {
           // Once this request is complete, run it again in a second ... It keeps sending data until the page is closed
           setTimeout(sendData, 1000)
       }
   })
}

// Start sending data
sendData()

On your server, you'll get captureMouse as POST, you will need to decode JSON and append it to a file (which is identified using the userId parameter).

Martin Tournoij
  • 26,737
  • 24
  • 105
  • 146