😠 Rage clicks

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:

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