I have been given a new project at work to create a so called web user experience analytics package.
The idea is to track with javascript the mouse movements of users that come to the site, and then play them back so we can see what people are doing.
I have been given a spec and here is a list of the requirements.
To record user movements, and play them back.
Need to capture...
- Mouse movements
- User inputs
- Scrolling
- Where users clicks
- Ability to track more than one site
- Do not display credit card information for sensitive forms
- Record secure http and https pages
The way I'm going to approach this will be to store using AJAX and jQuery all the mouse movements, scrolls and clicks into the database and use this data to create the recordings. In regards to playing back the videos, I'm thinking of rendering the HTML of the page with an image of the mouse moving to the coordinates stored in the database, every time the user clicks, it will display an image defining a click.
What I am struggling with is how I will be able to play back a secure area of the site once, say for example someone has logged in. To play back and create a render of the page, I would have to log the user in and get to that point of the site. I think for secure areas I will need to store the whole HTML to be able to show it, rather than trying to login and do it that way.
My question is, has anyone had any experience of working with something like this, that may be able to offer any advice, libraries/tools of interest or better ways of approaching this project?
Any help is most appreciated.
