Click heatmaps with Google Analytics
Read time 2 min
About a year ago I setup click event tracking up for
*hertzen.com with the intention of doing some click heatmaps with the data. Obviously, I completely forgot about it within a few weeks and had already moved onto other things. Now, roughly a year later, well over a million click events had been recorded, with about 6000 new click events each weekday on average.
For recording the clicks, I setup custom event tracking to record the coordinates of mouse clicks. As client resolution, page path, host etc. are all already recorded by default, no other data was necessary. I labelled these events as “Click heatmap” to make them filterable from other custom events. However, a major mistake I did here was not to take into account
window.devicePixelRatio, which resulted in a lot of the higher resolution click events recording unusable or invalid data (which is quite evident from the heatmaps created).
For retrieving the data from the Google Analytics API, I setup a nodejs application that uses Google service accounts to authenticate to the API, so that no user credentials need to be stored in the application as it authenticates through signed JWTs. The application loads the clicks for
n number of most used resolutions and concatenates the data together. It can optionally combine multiple resolutions’ data together into a single data set, by computing the center offsets of the clicks based on their resolution.
Once the data was downloaded from the API, I got to the more interesting part of creating the heatmaps using
canvas. The heatmap implementation I created draws grayscale radial gradients with a low opacity for each click. Multiple clicks around an area increase the alpha of the pixels as there are multiple low opacity gradients overlapping.
After all the clicks have been drawn, the canvas pixel data is extracted with
getImageData so that the contents of the canvas can be read through pixel by pixel and a heat color can be assigned depending on the alpha of the pixel. A higher alpha means a “warmer” color. Each alpha value correspond to a color on a gradient from
[0-255]. Once each pixel has been processed, the image data is returned to the canvas and the frame is rendered.
Finally, I added some date filters to the data so that heatmap wouldn’t be bloated with too much content. The heatmaps are more difficult to use if the content or the position of the content on the page changes frequently, as it will require you to be previewing the correct state of the page while viewing the heatmap. As far as my two index page examples below, the html2canvas page had some minor changes about half a year ago, which is evident from the button positions changing.