When I first learned about the team here at CompassRed, the article below from Data Analytics Team Lead Patrick Strickler stood out. Creating a custom click heatmap using Google Analytics, Google Tag Manager, and Google Data Studio was (and still is) an innovative approach to extending Google Analytics capabilities.

In order to get the data required for the view shown in this article, you will need to follow the instructions outlined in Pat’s original post. There, you’ll find the JavaScript for Google Tag Manager to capture x/y coordinates of a click in a Google Analytics event. If you’re just here for a cool viz, keep reading!

The Old vs. New Heatmap Visualization in Data Studio

The previous heatmap visualization using a native scatterplot.

The original visualization resulting from the custom implementation work is awesome. A report viewer can get an understanding of which areas on the page are generating the most engagement.

Unfortunately, when you scale this up, the size of the bubbles gets lost and it’s hard to differentiate exactly which part of a small area is getting the most engagement. Radius size starts to lose its value at scale.

With the arrival of custom visualizations using JavaScript, HTML, and CSS in Google Data Studio’s Community Visualizations, I wondered if this report could be brought to the next level. Using the simpleheat library from Leaflet creator Vladimir Agafonkin, here’s the result:

Now, report viewers are able to get a better sense of engagement using a familiar heatmap visualization. Tightly packed data points are rolled up into a nice red shade making it easier to derive insight.

Note: we’re adding a Device Type filter for desktop and a relevant screenshot of the page underneath the visualization itself (per the original post). It’s not possible to make external requests in Data Studio Community Visualizations so uploading an image into the Data Studio report itself is required.