User behavior analytics platform Hotjar defines rage clicks as moments, โwhen users repeatedly click (and click and click) in a certain area or on a specific element of your website over a short period of time.โ UX and web designers recognize these behaviors as signals of frustration on websites and interfaces.
Our CRO team has recently explored and put into action a way to get rage click events to appear in our Google Analytics reports, be observable Hotjar recordings, and display a survey for visitors to provide feedback on what made their user experience frustrating. Weโre proud to share this guide with you and your teams to use and iterate upon!
Why Should I Care About Rage Clicks?
via GIPHY
Without tracking rage clicks, digital marketing strategists wonโt have a way to identify when a page visitor becomes frustrated and takes it out with repeated clicks and taps on their devices. Try to recall the last time you repeatedly clicked or tapped on a page due to slow loading speeds or poorly designed interactive elements. Addressing and validating frustration are crucial steps toward improving the experiences on your page for visitors, users, or customers, thus improving your goal KPIs.
For example, rage clicks can also spotlight areas on your website where an interactive element may be useful! If enough visitors are trying to click on an image or text they want to learn more about, recorded rage click events can show designers exactly where they happen. These recordings also help strategists advocate to provide an interactive info button or link to a resource that may satisfy a visitorโs curiosity along the user journey.
Where Can I See Rage Clicks Happening On My Website?
There are numerous applications marketers and designers use to record, observe, and archive rage clicks occurrences. Portent CRO has recently found success in a combination of Hotjar, Google Analytics, and Google Tag Manager. All of these work harmoniously together to paint a clearer picture of where and how visitors to your pages are finding frustrations. As an added bonus, weโll share how you can replicate our setup for your own research and optimizations!
Hotjar
Hotjar is a great place to start observing rage clicks as they happen on your website, and our tool of choice when integrating it with Google Analytics and Tag Manager (more on that, later!) UX designers and CRO strategists can identify rage clicks in anonymized records of visitors on websites, like the example below:
Google Analytics and Tag Manager
Analysts and strategists can rely on Google Analytics Events and Behavior reporting to highlight places on a website where actions like rage clicks happen and how often. By building custom event triggers and tags in Google Tag Manager, you can assign behaviors such as rage clicks to dimensions in your GA reporting.
How Can I Use Rage Clicks to My Advantage and Eliminate My Visitorsโ Points of Frustration?
Weโre going to have to get a bit technical here to show you how you can use a combination of Hotjar, Google Analytics, and Google Tag Manager to track and analyze your rage click custom events. Donโt worry, though. Weโll provide steps and resources to make sure this robust setup will work for you.
What Do I Need to Track Rage Clicks and Address Them?
With the following recipe for how to best track and respond to rage clicks, you can uncover these points of frustration that get in the way of user experience, customer satisfaction, and ultimately conversion rates on your pages.
Step 1: Hotjar (Plus or Business Plan)
Recording software like Hotjar all come at price tiers that enable you to record hundreds to thousands of sessions a week, but if you spring for the โBusinessโ plan, youโll have access to Hotjarโs native tools and filters that recognize rage clicks on the websites you manage. Once you have created your account, installing their software on your domain is outlined in Hotjarโs installation guide, or you can install Hotjar using Google Tag Manager to avoid needing a developer to hardcode it.
Step 2: Google Tag Manager and Custom HTML
Using your website domainโs Google Tag Manager account, youโll want to start by creating a Custom HTML tag using the following code, which is available from Reflective Data:
<script>
if ( typeof(jQuery) === 'function' )
jQuery(document).ready(function($)
jQuery.fn.extend(
getPath: function()
var path, node = this;
while (node.length)
var realNode = node[0],
name = realNode.localName;
if (!name) break;
name = name.toLowerCase();
var parent = node.parent();
var sameTagSiblings = parent.children(name);
if (sameTagSiblings.length > 1)
var allSiblings = parent.children();
var index = allSiblings.index(realNode) + 1;
if (index > 1)
name += ':nth-child(' + index + ')';
path = name + (path ? '>' + path : '');
node = parent;
return path;
);
// Number of rage clicks
var no_of_clicks = 5;
//Time interval - var time value is in seconds, for example 3 is for three seconds
var time = 3;
var click_events = [];
//internal variables, referring to the number of possible clicks within a set radius of pixels
var possible_click = 5;
var radius = 100;
function detectXClicks(count, interval)
var last = click_events.length - 1;
var time_diff = (click_events[last].time.getTime() - click_events[last - count + 1].time.getTime()) / 1000;
//returns false if it event period is longer than 5 sec
if (time_diff > interval) return null;
//check click distance
var max_distance = 0;
for (i = last - count + 1; i < last; i++)
for (j = i + 1; j <= last; j++) var distance = Math.round(Math.sqrt(Math.pow(click_events[i].event.clientX - click_events[j].event.clientX, 2) + Math.pow(click_events[i].event.clientY - click_events[j].event.clientY, 2))); if (distance > max_distance) max_distance = distance;
if (distance > radius) return null;
var result =
count: count,
max_distance: max_distance,
time_diff: time_diff
return result;
function removeUsedClickPoints(count)
click_events.splice(click_events.length - count, count);
$("body").click(function(event)
click_events.push(
event: event,
time: new Date()
);
//remain only required number of click events and remove left of them.
if (click_events.length > possible_click)
click_events.splice(0, click_events.length - possible_click);
//detect 3 click in 5 sec
if (click_events.length >= 3)
var result = detectXClicks(no_of_clicks, time);
if (result != null)
var path = $(event.target).getPath();
//console.log('Rage Click: ' + JSON.stringify(result));
dataLayer.push(
'event': 'rageclick',
'rc_element': path,
'rc_count': result.count,
'rc_max_distance': result.max_distance,
'rc_time_diff': result.time_diff
);
removeUsedClickPoints(3);
);
);
</script>
The purpose of this tag, once published, is to โlistenโ for rage clicks as visitors come and go throughout your website.
Next, youโll want to set this tagโs Firing Trigger to Page Views on All Pages. Before you hit Save, your setup may look similar to this screenshot:
Something youโll find towards the bottom of this script is a place where the name โrageclickโ will be used as the event that will be pushed to the data layer. Keep this in mind for the remaining steps of the process.
Step 3: Google Tag Manager and Custom Event Trigger
In this step, weโre going to create a trigger using a Custom Event. Itโs important to use the same event name from the previous step, โrageclick.โ
Step 4: Google Tag Manager and Tags for GA and Hotjar
Itโs time to use the Trigger created in step 3 to add to both tags for your GA and Hotjar properties.
The tag type needed for Google Analytics will depend on the version of the platform youโre using. Here are examples of what Iโve spun up for Universal Analytics and GA4:
The GA4 Event tag allows you to set a parameter for your event name, similar to Universal Analyticsโ use of Label. If youโre starting out, my recommendation is to use Page URL, but you can get as granular as including a Click Element!
After youโve added your trigger from step 3 and saved your GA tag of choice, youโll want to create a Custom HTML tag for Hotjar. The script youโll need for this is as follows:
<script>
window.hj=window.hj||function()(hj.q=hj.q;
hj('event','rageclick');
</script>
Once you have that added in, your tag configuration will need your trigger from step 3 added in before hitting Save. Hereโs an example of how this should look:
What Happens Next After I Set All of This Up?
Whew! Yes, that probably seemed like a lot, but youโre going to like what this will do for your Hotjar recordings and event tracking. Hereโs what to expect next.
Hotjar Recordings and Event Targeting
Three major value-adds happen in your Hotjar Plus or Business accounts.
First, youโll discover that youโll have a new โEventโ you can use when filtering recordings.
Secondly, within recordings, youโll also see your custom โrageclickโ event show up on the playbackโs timeline.
The third, and my favorite, allows you to use this โrageclickโ event in popover surveys. Below is an example of how one appears on a website for visitors to interact with:
Also, customizing a survey with your brand colors and messaging is easy. We made sure to include copy in this popover survey that would be appreciative and approachable the exact moment a visitor on a page exhibited rage click tendencies:
In order to create a survey that will appear upon a rage click, you should specify that it will appear at the moment the custom event is triggered in GTM, as seen below:
Make sure all of your settings are up to your needs, set the survey to Active, and save your changes. Your new Hotjar popover survey will be live on your site for your visitors to fill out in the event they want to provide feedback.
What Will I Gain From This Robust Setup?
Setting up this rage click tracking ecosystem will provide invaluable insights and feedback into where your website visitors and customers find points of frustration in their journey:
- Discover needed design changes that may have gone unnoticed in production.
- Uncover opportunities for conversion rate optimization.
- Spotlight areas to improve metrics like core web vitals.
- Provide evidence of pages and elements that need UX improvements.
Letโs Recap
Rage clicks are a kind of user behavior that should go unnoticed on your websites. By setting up a robust tracking process like the one weโve provided, you can also earn insights, feedback, and learnings to improve your pagesโ user experience, customer journey, and conversion rates. Other contributors and stakeholders in your business will value rage click tracking in order to optimize toward business goals and customer satisfaction.
The post Leverage Hotjar Surveys for Rage Click Custom Events appeared first on Portent.