Heatmap analytics turns out to be WAY more complicated than just capturing the cursor coordinates. Some websites are right-aligned, some are left-aligned, some are 100%-width, some are fixed-width-“centered”… A page element can be positioned absolutely or relatively, floated etc. Oh, and there’s also different screen resolutions and even multi-monitor configurations.
Here’s how it works in HeatTest (I’m one of the founders, have to reveal that due to the rules):
- JavaScript handles the onClick event:
document.onclick = function(e){ }(this will not work with<a>and<input>elements, have to hack your way around) - Script records the XPath-address of the clicked element (since coordinates are not reliable, see above) in a form
//body/div[3]/button[id=search]and the coordinates within the element. - Script sends a JSONP request to the server (JSONP is used because of the cross-domain limitations in browsers)
- Server records this data into the database.
Now, the interesting part – the server.
- To calculate the heatmap the server launches a virtual instance of a browser in-memory (we use Chromium and IE9)
- Renders the page
- Takes a screenshot,
- Finds the elements’ coordinates and then builds the heatmap.
It takes a lot of cpu-power and memory usage. A lot. So most of the heatmap-services including both us and CrazyEgg, have stacks of virtual machines and cloud servers for this task.