How to Create a Click Heat Map for Your Website using Google Analytics Event Tracking and Google Data Studio — CompassRed, Inc.
What Can I Use a Click Heat Map For?
Heat mapping data is crucial for UX design decisions and gaining an understanding of how users are interacting with your website. You can spot trends in user actions (e.g. most users are clicking to X from the homepage) and identify friction points in the experience. Heat maps help drive the conversation within your organization because they are easy for everyone to understand and interpret. Having all of this data in GA also gives you the power to slice and dice your heat map by other user attributes like device, browser, purchasing behavior, source, etc. This tutorial covers the basic set up, but there are applications far beyond what is covered here. If this all sounds exciting and useful to you, please follow the three steps below to create your own click heat map.
JS — Click Text Clean: This variable will provide us with a clean version of the text that a user clicks on. Make sure you have the built-in variable Click Text enabled before you set this one up. The code below checks to see if Click Text is defined, if it’s not, it will label your Click Text as ‘undefined’. The code also truncates Click Texts that are longer than 100 characters and converts everything to lowercase. You can use regular old Click Text if your prefer, but you may end up passing strings that are too long for GA to ingest and/or have funky case structures that lead to data splintering (GA is case sensitive).
JS — Click X Coordinate: This variable will provide us with the mouse position along the x-axis (horizontal) where the user clicks. This is measured in pixels.
JS — Click Y Coordinate: This is the same as the variable above except that it gives us the mouse click position along the y-axis (vertical).
JS — Screen X Coordinate: This variable will provide us with the total width of the user’s viewport.
JS — Screen Y Coordinate: This variable will provide us with the total height of the user’s viewport.
JS — Relative X Coordinate: Time for some fun math! We are taking the Click X Coordinate and dividing it by the Screen X Coordinate to create an index. This should adjust for the variability of different screen sizes.
JS — Relative Y Coordinate: We are doing the same thing as above, but for the Y Coordinate.
Those are all the custom variables you will need for this exercise.
The last step in your GTM setup is creating your GA Event Tag. You have some liberties with how you name your Event Category and Action, but I advise to stick to my Event Label structure to make the rest of the tutorial easy to follow.
Once you are satisfied with your tag settings, be sure to Preview your work and Publish.
Once you have Published your changes in GTM, be sure to head over to Google Analytics Real-Time reporting to see your newly created data funneling into your Property. You will want to make sure all the data points are passing through as expected — be sure to check your Event Label with extra scrutiny because that is the most important piece of the puzzle.
If everything looks good, then move on to Step 3.
You are welcome to use any reporting tool you would like, but I chose Data Studio for this tutorial because it is free and pretty simple to set up.
Navigate to datastudio.google.com and click the big blue + button to create a new report. You will be prompted to connect to a Data Source. Choose Google Analytics and then find the Account > Property > View where your newly created data exists.
Remember that long Event Label string we created in GTM? Well it is time to break it apart into individual pieces. I have to admit that Data Studio does not make this easy, but if you followed my naming conventions exactly, then you should be able to copy and paste the functions below without error.
Open the Data Source Editor — you can get to the Data Source Editor a few ways. One way is to click on Resource > Manage added data sources in the top level navigation. Once you’re there click Edit on the appropriate Data Source.
For all the Custom Fields below, click on the Add a Field button, give your custom field a name, paste in the code I provide, and click Save.
Event Label — Page URL: This extracts the Page URL from your Event Label.
Event Label — Click Text: This extracts the Click Text from your Event Label.
Event Label — Relative X: This extracts the Relative X Coordinate from your Event Label.
Event Label — Relative Y: This extracts the Relative Y Coordinate from your Event Label.
It’s finally time to create your visualization. Before we get started, you will need a screenshot of whatever page you want to analyze. I use the Fireshot Chrome Extension, which is free and allows you to capture the entire webpage at one time and save it as an image.
Once you have your screenshot, insert it as an image on your dashboard and size it appropriately.
Flip the Y axis so that 0 starts at the top, which will match how your data was collected. Remove all the axis labels, gridlines, legends, etc. I would also recommend decreasing the size of the bubbles and adjusting the opacity of the overall chart to 50–70% so that the background is visible.
Finish off your visual by overlaying it on top of your screenshot that you inserted. This part will take a little adjusting, but if you have a lot of data, it won’t take long to get it in the right spot.
Congratulations! You have successfully created a click heat map from scratch using only free tools and a little bit of custom code.
If you would like to have a similar dashboard created for your organization, but you do not have the technical expertise in-house to set it up, please feel free to get in touch with us. We would be happy to help.