Website data visualization tools like Hotjar, Crazy Egg, and Smartlook can provide valuable business intelligence that can be used to make smarter digital marketing decisions. We’ve come a long way from when corporate websites were designed and managed by an IT person or someone’s nephew but decisions are still made based on assumptions and emotions. There’s no way to know how your visitors will interact with your content without testing and useful data.
Are heatmap services worth paying for?
If you’re gathering data for an upcoming website redesign project, there are benefits to just installing Hotjar or one of the many other trusted providers. Most of them have free trials between 14 and 30 days. That may or may not be enough time to gather enough data for decision making.
As of July 2020, Hotjar costs between $89 and $389 per month; Crazyegg starts at $24 monthly but the most popular plan is $99.
The costs are easily justifiable if your website redesign budget is in the six figures. But winning approval for tools can be tricky at any sized company. Or maybe it’s your own website and you can’t afford to spend anything.
It may not look as pretty but there’s a free alternative that can be set up in under an hour.
Getting started
I’m assuming you already have Google Analytics and Google Tag Manager configured, and that you’re familiar with the basics of Google Data Studio. If not, Google’s Analytics Academy is a great place to start.
Google Tag Manager
Creating new tag
In your website’s Google Tag Manager container, create a new tag called something like “URL Clicks.” The configuration should be as follows:
- Tag Type: Google Analytics: Universal Analytics
- Track Type: Event
The event tracking parameters are up to you, but I’ve chosen:
- Category: {{Clicks}}
- Action: {{URL Clicks}}
- Label: {{Click Text}} {{Click URL}}
Just make sure you’re consistent with any other event tracking configurations you have in Tag Manager. Being inconsistent makes data analysis way harder than it should be.
Creating new trigger
If you don’t already have a trigger for URL clicks, create one. I’ve called mine “URL Click.”
- Trigger Type: Click – All Elements
- This trigger fires on: All Clicks
Now save the tag and preview it to make sure it works as expected. Publish it when you’ve confirmed it (go to the real-time reporting in your raw Google Analytics view).
Google Data Studio
Now create a new dashboard in Google Data Studio. Connect it to your Google Analytics instance that Tag Manager is pushing events info to.
Treemap chart
Click Add a chart and select Treemap at the bottom.
In the data column on the left, select:
- Dimension: Event Label
- Metric: Total Events
If you want to only show the Click Text, create a custom field with the following RegExp:
REGEXP_REPLACE(Event Label,'http[^_]*', '')And if you’re not already filtering out URL parameters in the GA view, you can strip them with this expression:
REGEXP_REPLACE(Event Label,'^[^_]* ', '')The number of rows or default date range are up to you.
Now set up a treemap filter. How you set up yours depends on the nomenclature you’re landed on, but I’ve set my filter to include Event Category contains Clicks.
Filter control
Now click the Filter control icon in the top navigation. In the DATA column on the right, choose the following:
- Dimension: Page
To filter out URL parameters, create a create a new field with the following RegExp:
REGEXP_REPLACE(Page,'^[^_]* ', '')Now you can analyze clicks easily on any page. After some time, your treepmap should look something like this:
Format it and change the labels as you see fit. It may not be as visually striking as Hotjar out-the-box, but it gets the point across better than an Excel sheet.
