In this project we built a simple heat map generator that captured click data on web pages built using responsive techniques. We built two parts to the heat map generator – some code that runs in the browsers of the visitors of the website to capture every click on the screen, and a part that is used in conjunction with a simple management console in which the URL of the page the heat map is for, and the layout to display can be selected.
While we have to allow a margin of error to account for the pixel-to-percentage conversion and back again, different screen resolutions, and the range between different breakpoints, this easy-to-implement heat map can still give us valuable information about how our site is used, which features are popular, and which features are wasted screen space.