😠 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.


Rage clicks are identified by monitoring:

  1. Click frequency: Number of clicks within a specified time frame.
  2. 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

// 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) {
                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 the timeFrame 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.