September 7, 2018

Rage-click detector

Sometimes it would be really great to understand our users a bit better. If you could identify unhappy or even angry users, then you could optimize the user experience accordingly. And sometimes you wish you could quickly rescue the situation by engaging with the user directly.

With this simple script it is possible to identify the furious customers. When detected, you could log the actions they took or start a 1-on-1 conversation with a chat box that you could open in that moment.

What the script does is it checks if a user clicks with his mouse like crazy. This is called a “rage-click” as opposed to a “double-click”.

Try a rage-click yourself now!

The code snippet:

$(document).ready(function(){
    var rageClickTimeTotal = 1000; //time between the first and the last click in milliseconds
    var rageClickCountTotal = 5; //number of clicks within the time frame (5 to prevent 2x double click)
    var rageClickClickTimes = [];
    $(document).click(function(){
        rageClickClickTimes.push(Date.now());
        if(rageClickClickTimes.length > rageClickCountTotal){
            rageClickClickTimes.shift();
            if((rageClickClickTimes[rageClickCountTotal-1] - rageClickClickTimes[0]) <= rageClickTimeTotal){
                console.log('rage click detected');
                rageClickClickTimes = [];
            }
        }
    });
});

Dependencies: jQuery

Tags: javascript, user experience

« back

010100100110000101101110011001000110111101101101010000110110100101110000011010000110010101110010

About the author

human, software engineer, tech enthusiast, security researcher

E-Mail: blog@cipher.digital