Introducing MouseJS for visualising user activity on your website

Mousejs.com is a new site we put together to help some of our clients to gain some insights about user movements on their own website or web application.

It works by tracking the precise movements of a user’s mouse cursor while they are navigating a webpage. Once the user has left the page, a screenshot of the page is then created and the user’s mouse movements are ‘drawn’ or super-imposed on to the same page to show a visual representation of the users movements.

It works by placing a very simple Javascript snippet on any page(s) of your site that you want to track. You can then log in to the Mousejs.com site at any time and view all of the images that Mouse has generated for your site.

Any images that are created are available almost straight away. It just takes a few seconds to generate the screenshots and draw on them before they are ready to view.

Some scenarios where this is useful

  • Spot potential spammers and plagiarists! – I didn’t think of this scenario at all until I saw it happen on this site. I could see some images of a user visiting our homepage and highlighting our contact email address, presumably copying & pasting it to send me an email at some point, or spam it!
  • Remove old content – Over time, it’s possible to see images, buttons or areas on your site or app that users seem to have no interest in and never go near or click upon and therefore might be worth removing or updating with new content.
  • Test new content – This is very similar to the previous point. If you have added new buttons, links or images to your site, you can visually see if uses are moving towards it or clicking on it.

Some current weaknesses in this service

MouseJS is very good at recording the precise movements of a user’s mouse cursor. However, if a website is particularly dynamic with content appearing/disappearing or moving based on users movements or clicks, then the next step that MouseJS takes of generating a screenshot will not capture this visual change.

It currently assumes that a page doesn’t change and it just takes one screenshot of that page per user per visit, therefore not giving a full visual representation of the user’s interactivity with that page.

A good example of this is if a modal window popped up and the user had to press a button to clear it away, then in the screenshot that MouseJS generates it would look like the user clicked and moved around the centre of the page for no reason, it would not have captured the pop up modal window.

However, we’re working on this and the plan is to have MouseJS take multiple screen shots of a page during a visit to replicate any changes and overlay movements on an animated image rather than a static image.

Some features that will be available in the near future

  • Heat maps – by combining several images together, the areas of a page that are used the most are highlighted.
  • Visualise users over multiple pages – At the moment, it’s possible to track users on all pages of your site, assuming the Javascript snippet of code is embedded in every page. However, when visualising the screenshots, the images are shown individually and with no context. One of our next steps will be to group images together so that all the pages that a user visited on your site are grouped together and maybe even animated too.

Under the hood

This service was built using some Javascript for recording mouse movements and some PHP to receive and record the mouse movement data. Then, PhantomJS, a headless browser is used to generate the screenshot and Codeigniter is used to give the user an Admin panel to log in and view the screenshots.

Leave a Reply

Your email address will not be published. Required fields are marked *