😠 Rage clicks
Identify User Frustration through Rage Click Detection
Detect user frustration and enhance UX by capturing rage clicks using the JavaScript SDK. Rage clicks occur when a user rapidly clicks on a specific area of the page, usually indicating frustration or confusion. This guide will walk you through how to implement this functionality, and how you can tweak the rage click definition based on settings specific to your needs.
🔐 Company Plan or higher required - Uses JavaScript SDK, more details here.
Overview
Rage clicks are identified by monitoring:
- Click frequency: Number of clicks within a specified time frame.
- Click proximity: The spatial area in which these clicks occur.
Then, use the JavaScript SDK to trigger a Pop-up with Custom Data.
Basic Usage
🚀 Interactive Demo: Try It Now
Here's a simple example for detecting rage clicks based on click frequency within a specified time frame and pixel range.
// Initializing Userback Widget
Userback.init('widget_access_token');
// Rage Click Snippet
let clickArray = [];
const timeFrame = 2000; // 2 seconds
const clickThreshold = 5; // Minimum of 5 clicks
const pixelRange = 50; // 50 pixels
document.addEventListener('click', function(event) {
const currentTime = new Date().getTime();
clickArray.push({time: currentTime, x: event.clientX, y: event.clientY});
// Log the click with a timestamp
console.log(`Click detected at ${new Date(currentTime).toISOString()}`);
// Remove clicks that are out of the current time frame
clickArray = clickArray.filter(click => currentTime - click.time <= timeFrame);
if (clickArray.length >= clickThreshold) {
const firstClick = clickArray[0];
const withinPixelRange = clickArray.every(click =>
Math.abs(firstClick.x - click.x) <= pixelRange &&
Math.abs(firstClick.y - click.y) <= pixelRange
);
if (withinPixelRange) {
Userback.setData({
action_name: 'Rage Click Detected',
clicks: clickArray.length
});
Userback.open('bug', 'form');
clickArray = [];
}
}
});
Customization Options
You can customize the detection logic by altering the timeFrame
, clickThreshold
, and pixelRange
variables to better suit your application's needs.
timeFrame
: Adjust the time window for detecting consecutive clicks (in milliseconds).clickThreshold
: Set the minimum number of clicks within thetimeFrame
to classify as a rage click.pixelRange
: Define the spatial area in pixels to consider the clicks as rage clicks.
Support & Further Reading
For more information, consult the JavaScript SDK Documentation.
Encounter issues? Please send a message to our support team.
Updated 9 months ago