E-commerce tips

A simple way to detect rage clicks with Hotjar

Rage clicks can be a sign that your site has some major usability issues. This article will show a simple way to filtering these sessions with Hotjar.

Computer Rage Angry Man - Rage Clicks with Hotjar

In this article, we’ll show you how to filter out and detect rage clicks with Hotjar. Rage clicks can be a sign that the site has some major usability issues and it would be advisable to fix them. We will show you how you can enable this on your website and start tagging them in Hotjar.

As Conversion Rate Specialists we focus a lot on data acquired through our conversion optimization research in order to improve your conversion rate. Here at Polaris Growth, we consider Hotjar (website) one of the tools we love to use the most while doing our conversion optimization research.
Besides the standard functionalities, Hotjar has some really cool features. For example, using JavaScript to tag recordings is a feature we regularly use to autotag each variation of an A/B experiment.

What we found to be missing in Hotjar in the past was the ability to detect and tag sessions with rage clicks. It has now been implemented but only for the business plans so I was thinking of a way we could add this functionality using the Hotjar JavaScript feature. As it turns out there is a simple way to detect and tag rage clicks in Hotjar.

Actually this method allows you to do much more than just add tags to a recording. Once you detect the action is taking place you can alter the code here to fire any other events or actions you want. Send it to GA? Add an event in Klaviyo? You name it...

Rage Clicks

But first, what is are rage clicks?
Let me give you a short illustration:

  1. You arrive on a page,
  2. you see some great things you want to read, signup for or buy
  3. you click on the link or a button
  4. and then nothing happens…
  1. you wait… click again.. nothing happens.. click…. click.. click. click click click… Darn it… the site is broken!
  2. now I’m frustrated and or angry.

Or as inspectlet says:

“Rage Clicks identify moments of frustration by users, usually caused by excessive clicking in areas without triggering any UI changes. Common points of user rage include clicking on dead links (text that looks like a link but isn’t), clicking on images hoping to enlarge them (unsuccessfully) and other points of UI confusion. “

This is something you don’t want to happen on your site, but if it does happen and people are getting frustrated, you actually want to know about it. We created a script which you can easily load on your site and it will auto detect rage clicks and it also tags them in Hotjar. (A big thanks to Gursimran for his help on this)

How does it work?

  1. Simply add the script below to the head section of your website
  2. Change the following variables as you see fit to fine tune when you want the tag to be sent to a Hotjar recording.
    no_of_clicks (amount of clicks) and time (seconds)

Here is the script:

<script>
  var $ = jQuery;
$(document).ready(function(){
  	// Number of rage clicks
    var no_of_clicks = 5;
  	//Time interval - 3 for 3secs, 4 for secs and likewise
  	var time = 3;
  var click_events = [];
  
  //internal variables
  var possible_click = 5;
    var radius = 100;

  function detectXClicks(count, interval){
    var last = click_events.length - 1;
    var timeDiff = (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(timeDiff > 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;
      }
    }
    return "Clicks: " + count + ", Range: " + max_distance + "px, Period: " + timeDiff + " Sec";
  }

  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 >= 5){
      var result = detectXClicks(no_of_clicks, time);
      if(result != null){
        console.log(result);
        window.hj=window.hj||function(){(hj.q=hj.q||[]).push(arguments)};
        hj('tagRecording', ['Rage clicks detected']);
        removeUsedClickPoints(5);
      }
    }
  });
});
</script>

Using Google Tag Manager (GTM)?

You can also load this with GTM on your site by adding the following code as custom HTML tag.
Instead of sending a tag to Hotjar we now push a new event to the dataLayer ( dataLayer.push({“event”: “rage-clicks-detected”}); ) which we can now use to have some fun in GTM and fire additional things.

<script>
  var $ = jQuery;
$(document).ready(function(){
  	// Number of rage clicks
    var no_of_clicks = 5;
  	//Time interval - 3 for 3secs, 4 for secs and likewise
  	var time = 3;
  var click_events = [];
  
  //internal variables
  var possible_click = 5;
    var radius = 100;

  function detectXClicks(count, interval){
    var last = click_events.length - 1;
    var timeDiff = (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(timeDiff > 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;
      }
    }
    return "Clicks: " + count + ", Range: " + max_distance + "px, Period: " + timeDiff + " Sec";
  }

  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 >= 5){
      var result = detectXClicks(no_of_clicks, time);
      if(result != null){
        console.log(result);
        dataLayer ( dataLayer.push({"event": "rage-clicks-detected"}));
        removeUsedClickPoints(5);
      }
    }
  });
});
</script>

Add a Custom HTML tag in GTM and add the code

Add script to GTM to detect rage clicks

Create a new trigger

GTM create event when rage clicks are detected

Add a Custom HTML tag to send the rage clicks detected tag to hotjar

GTM send a tag to hotjar when rage clicks are detected

What else can we do?

With the event now being present in the dataLayer you can do some other useful thinks like:

See below an example for “How to initiate a Hotjar poll”

Initiate a “Rage Click” triggered Hotjar Poll

In order for this to work you first need to add a new poll which only triggers based upon a javascript variable. In this case we named this trigger “Rageclick”.

You can also include additional url’s or exclude url’s if you need to finetune where this poll can be triggered.

Hotjar Poll which triggers on JavaScript

Next add this custom HTML tag to GTM

<script>
    window.hj=window.hj||function(){(hj.q=hj.q||[]).push(arguments)};
  hj('trigger', 'rageclick');
</script>

Add a custom HTML tag

GTM - open hotjar poll when rage clicks are detected


Conclusion

As a conclusion, you can now use Hotjar to easily detect rage clicks if you add this script or until they implement this feature.
We hope that after reading this you will use this feature more often and it makes detecting rage clicks on your sites easier. If you have any question, please do not hesitate to contact us. Again a big thanks to Gursimran for his help on creating the script. If you found an error or have an idea on how to improve this further, let us know!

Lees meer artikelen

Alle artikelen

5 Obstakels die groei belemmeren

Iedere ondernemer wilt groeien. Maar het lukt niet iedereen. Dit zijn de 5 belangrijkste oorzaken die je groei afremmen (en hoe je ze oplost).

December 4, 2020

Verhoog de conversie van je webwinkel

Uitleg hoe conversie-optimalisatie werkt en hoe je hiermee aan de slag gaat.

December 4, 2020

Goal Tree e-commerce

Het Goal Tree model uitgelegd voor webwinkels. Hoe werkt de Goal Tree, wat heb je eraan en hoe bouw je dit zelf op?

December 4, 2020