Capture website screenshot using javascript

Question

I've seen similar questions asked and the answers were not quite what I'm after. Since this question is slightly different, I'm asking again - Hopefully you'll agree this isn't a duplicate.

What I want to do: Generate an image showing the contents of my own website as seen by the user (actually, each specific user).

Why I want to do it: I've got some code that identifies places on the page where the user's mouse hovers for a significant length of time (ppl tend to move the mouse to areas of interest). I also record click locations. These are recorded as X/Y co-ords. relative to the top-left of the page

NB: This is only done for users who are doing usability testing.

I'd ideally like to be able to capture a screenshot and then use something server-side to overlay the mouse data on the image (hotspots, mouse path, etc.)

The problem I have is that page content is very dynamic (not so much during display but during server-side generation) - depending on the type of user, assigned roles, etc... whole boxes can be missing - and the rest of the layout readjusts accordingly - consequently there's no single "right" screenshot for a page.

Option 1 (which feels a little nasty): would be to walk the DOM and serialize it and send that back to the server. I'd then open up the appropriate browser and de-serialize the DOM. This should work but sounds difficult to automate. I suspect there'd also be some issues around relative URLs, etc.

Option 2: Once the page has finished loading, capture an image of the client area (I'd ideally like to capture the whole length of the page but suspect this will be even harder). Most pages don't require scrolling so this shouldn't be a major issue - something to improve for version 2. I'd then upload this image to the server via AJAX.

NB: I don't want to see anything outside the contents of my own page (chrome, address bar, anything)

I'd prefer to be able to do this without installing anything on the end-user pc (hence javascript). If the only possibility is a client-side app, we can do that but it will mean more hassle when getting random users to usability test (currently, we just email friends/family/guinea pigs a different URL)

Answer 1

One alternative solution would be to "record" the positions and dimensions of the main structural elements on the page:

(using jQuery)

var pageStructure = {};

$("#header, #navigation, #sidebar, #article, #ad, #footer").each(function() {
    var elem = $(this);
    var offset = elem.offset();
    var width = elem.outerWidth();
    var height = elem.outerHeight();
    pageStructure[this.id] = [offset.left, offset.top, width, height];
});

Then you send the serialized pageStructure along with the mouse-data, and based on that data you can reconstruct the layout of the given page.

Answer 2

One thing we always talk about where I work is the value of ownership vs the cost required to make something from scratch. With the group I have, we could build just about anything...however, at a per-hour rate in the $100 range, it would need to be a pretty marketable tool or replace a very expensive product for it to be worth our time. So, when it comes to things like this that are already done, I'd consider looking elsewhere first. Think of what you could do with all that extra time....

A simple, quick google search found this: http://www.trymyui.com/ It's likely not perfect, but it points to the fact that solutions like this are out there and already working/tested. Or, you could download a script such as this heatmap Obviously, you'd need to add a bit to allow you to re-create what was on the screen while the map was created.

Good Luck.

Answer 3

IMO, it's not worth reinventing the wheel. Just buy an existing solution like ClickTale.

http://www.clicktale.com/