2 minute read.

JQuery mouse recording with ASP.net

Paul Anthony / June 4, 2009

Posted in: Archive

japanese-carrying-mouse-arrowRight at the core of many web applications lies the age old problem of usability testing. How can you accurately watch what users are doing, and when they are doing it? Some solutions exist already, but alas they are charging for the priviledge. Sooo.. I decided to cook up something myself, and share it with the world. Why not.

I recently had a look into this for a project at work, and put together a proof of concept. Essentially this could be used for a variety of applications, and combines the brilliant Jquery library with .NET logging in the database. This could of course be any language – the database structure is a very simple flat structure.  At the minute its very crude and un-polished, but for those of you not interested in the implementation:


Just been informed this isn’t working in Chrome or IE8 – I’ve only tested in Firefox at the minute. So until I’ve looked at that bear with me and use the ‘fox.

Demo here.

I’m open sourcing this for anyone who wants to build upon it, correct it, or whatever. Some of the Javascript could probably do with a clean up. The server side code basically parses a string into a class, then saves it do the database. I had originally wanted to bulk insert into the database when a data cookie reached its maximum size. Thought that might ease up on the database writes a bit to give it a better chance of scaling. I later dropped that support with a view to just getting it out there – instead I’ve implemented Mouse throttling instead from the brilliant Brandon Aaron.

I may at some stage come up with a more elegant solution to this. JSON is used in the return request, which is looped over to give the mouse replay.

Code is available over on the Plex.

Any explanation of the code, feel free to comment here, and I’ll do my best to explain. Should be simple enough to follow. Enjoy.

  • jquery
  • logger
  • mouse
  • Programming