Detect rage clicks, error clicks, dead clicks and mouse shakes

One of the most frustrating moments for a user on a website is when they click on a button and nothing happens. Click, click, click. Still, nothing happens. They get angry and keep clicking even harder.

With Piwik PRO, you can start spotting these situations by tracking so-called rage clicks, error clicks, dead clicks and mouse shakes. In this article, we’ll show you how to set it up.

Rage clicks

Rage clicks are like punching your mouse or touchpad because it doesn’t do what you want. They are triggered when a visitor clicks an element on your website multiple times, rapidly. In most cases, rage clicks signal that your website didn’t react the way your visitor expected, so you may want to take a closer look at it.

To set up tracking for rage clicks, follow these steps:

1. Here’s the code that you’ll use:

   <script>
     (function() {
       "use strict";
       var getSelectorFromTarget = function(target) {var className = target.className !== "" ? "." + target.className : "";var targetId = target.id !== "" ? "#" + target.id : "";return [target.nodeName, className, targetId].join(" ")};
       var detectRageClicks = function(subscribe, _a) {var interval = _a.interval, limit = _a.limit;var count = 1;var countClear = setInterval((function() {count = 1}), interval);var listener = function(event) {if (count === limit) {subscribe(getSelectorFromTarget(event.target), (function() {clearInterval(countClear);document.removeEventListener("click", listener)}))}count++};document.addEventListener("click", listener)};
   
       detectRageClicks(function (target, unsubscribe) {
         window._paq.push(['trackEvent', 'UX research', 'Rage click', target]);
         // unsubscribe(); // Uncomment this line when you want to finish after first trigger
       }, {
         interval: 750, // Number of milliseconds to reset counter
         limit: 3, // Number of clicks to trigger function above
       });
     })();
   </script>

   In this code, you can change the following parameters:

   • // unsubscribe(); // Uncomment this line when you want to finish after first trigger 
   • interval: 750, // Number of milliseconds to reset counter
   • limit: 3, // Number of clicks to trigger function above

   and custom event parameters:

   • window._paq.push(['trackEvent', 'UX research', 'Rage click', target]);
2. Go to Menu > Tag Manager.
3. Navigate to Tags.
4. Click Add a tag.
5. Name the tag, for example Rage clicks, and select the following type: Custom code (async).
6. Click Next.
7. In Tag code, paste the code prepared in step 1.
   

   

8. In Advanced tag settings > Consent type, select the following type: Analytics.
   

   

   Note: Set it up if you use a consent form on your site. This tag will fire only for visitors who accept the selected consent type.

9. In Tag triggers, click Choose existing trigger.
10. Select All page views and click OK.
11. Click OK to save the tag.
12. Test your tag in debug mode.
13. When you’re happy with how the tag works, click Publish.

To set up reporting for rage clicks, follow these steps:

1. Go to Menu > Analytics.
2. Navigate to Custom reports.
3. Create a custom report with the following setup:
   • Report type: Flat table
   • Dimensions: Page URL, Custom event action, Custom event name
   • Metrics: Events
   • Filter: Custom event category is UX research

   

   Note: You can use just one custom report for rage clicks, error clicks, dead clicks and mouse shakes.

4. Click Create report.
   

   

   Note: This setup works both for mobile and desktop devices.

Error clicks

Error clicks are clicks that result in JavaScript errors. The visitor doesn’t have to click on something many times in a row. Just one click is enough to spot an error. Often the visitor doesn’t notice that something is broken, but for you, it’s a signal that a particular JavaScript element is not working.

To set up tracking for error clicks, follow these steps:

1. Here’s the code that you’ll use:

   <script>
     (function () {
       "use strict";var getSelectorFromTarget=function(target){var className=target.className!==""?"."+target.className:"";var targetId=target.id!==""?"#"+target.id:"";return[target.nodeName,className,targetId].join(" ")};var detectErrorClicks=function(subscribe){var error;window.onerror=function(msg){error=msg};var listener=function(event){var selector=getSelectorFromTarget(event.target);setTimeout((function(){if(error){subscribe(selector,error,(function(){document.removeEventListener("click",listener)}))}error=undefined}),0)};document.addEventListener("click",listener)};
   
       detectErrorClicks(function (target, error, unsubscribe) {
         console.log('Error detected:', error);
         window._paq.push(['trackEvent', 'UX research', 'Error click', target]);
         // unsubscribe(); // Uncomment this line when you want to finish after first trigger
       });
     })();
   </script>

   In this code, you can change the following line:

   • console.log('Error detected:', error);

   and custom event parameters:

   •   window._paq.push(['trackEvent', 'UX research', 'Error click', target]);
2. Go to Menu > Tag Manager.
3. Navigate to Tags.
4. Click Add a tag.
5. Name the tag, for example Error clicks, and select the following type: Custom code (async).
6. Click Next.
7. In Tag code, paste the code prepared in step 1.
   

   

8. In Advanced tag settings > Consent type, select the following type: Analytics.
   

   

   Note: Set it up if you use a consent form on your site. This tag will fire only for visitors who accept the selected consent type.

9. In Tag triggers, click Choose existing trigger.
10. Select All page views and click OK.
11. Click OK to save the tag.
12. Test your tag in debug mode.
13. When you’re happy with how the tag works, click Publish.

To set up reporting for error clicks, follow these steps:

1. Go to Menu > Analytics.
2. Navigate to Custom reports.
3. Create a custom report with the following setup:
   • Report type: Flat table
   • Dimensions: Page URL, Custom event action, Custom event name
   • Metrics: Events
   • Filter: Custom event category is UX research

   

   Note: You can use just one custom report for rage clicks, error clicks, dead clicks and mouse shakes.

4. Click Create report.
   

   

   Note: This setup works both for mobile and desktop devices.

   Tip: You can also track JavaScript errors by enabling this option Menu > Tag Manager > Piwik PRO tag > Track JavaScript errors. Errors will appear in the custom event report under Menu > Analytics > Reports > Custom events. They will include the page URL and error details. The setup described above shows which element caused the error, so it’s worth using both to have all the details.

Dead clicks

Dead clicks are clicks that have no effect on the page. The visitor clicks on the image to zoom it in, but nothing happens. He expects a text string to be a link, but it isn’t. Or he clicks on a button, but to no avail. In such situations, the visitor will end up clicking twice, quickly. Looking for dead clicks will help you find these main points of frustration and improve visitors` experience as soon as possible.

To set up tracking for dead clicks, follow these steps:

1. Here’s the code that you’ll use:

   <script>
     (function () {
       "use strict";var getSelectorFromTarget=function(target){var className=target.className!==""?"."+target.className:"";var targetId=target.id!==""?"#"+target.id:"";return[target.nodeName,className,targetId].join(" ")};var detectDeadClicks=function(subscribe,_a){var interval=_a.interval,limit=_a.limit;var clickCounts={};var countClear=setInterval((function(){clickCounts={}}),interval);var listener=function(event){var selector=getSelectorFromTarget(event.target);clickCounts[selector]=clickCounts[selector]?clickCounts[selector]+1:1;if(clickCounts[selector]===limit){subscribe(selector,(function(){clearInterval(countClear);document.removeEventListener("click",listener)}))}};document.addEventListener("click",listener)};
   
       detectDeadClicks(function (target, unsubscribe) {
         window._paq.push(['trackEvent', 'UX research', 'Dead click', target]);
         // unsubscribe(); // Uncomment this line when you want to finish after first trigger
       }, {
         interval: 1000, // Number of milliseconds to reset counter
         limit: 2, // Number of clicks to trigger function above
       });
     })();
   </script>

   In this code, you can change the following parameters:

   • // unsubscribe(); // Uncomment this line when you want to finish after first trigger
   • interval: 1000, // Number of milliseconds to reset counter
   • limit: 2,// Number of clicks to trigger function above.

   and custom event parameters:

   • window._paq.push(['trackEvent', 'UX research', 'Dead click', target]);
2. Go to Menu > Tag Manager.
3. Navigate to Tags.
4. Click Add a tag.
5. Name the tag, for example Dead clicks, and select the following type: Custom code (async)
6. Click Next.
7. In Tag code, paste the code prepared in step 1.
   

   

8. In Advanced tag settings > Consent type, select the following type: Analytics.
   

   

   Note: Set it up if you use a consent form on your site. This tag will fire only for visitors who accept the selected consent type.

9. In Tag triggers, click Choose existing trigger.
10. Select All page views and click OK.
11. Click OK to save the tag.
12. Test your tag in debug mode.
13. When you’re happy with how the tag works, click Publish.

To set up reporting for dead clicks, follow these steps:

1. Go to Menu > Analytics.
2. Navigate to Custom reports.
3. Create a custom report with the following setup:
   • Report type: Flat table
   • Dimensions: Page URL, Custom event action, Custom event name
   • Metrics: Events
   • Filter: Custom event category is UX research

   

   Note: You can use just one custom report for rage clicks, error clicks, dead clicks and mouse shakes.

4. Click Create report.
   

   

   Note: This setup works both for mobile and desktop devices.

Mouse shakes

Mouse shakes are rapid movements that visitors make with their mouse or touchpad when irritated. It’s hard to say what causes their upset, but you can track pages on which this reaction happens.

To set up tracking for mouse shakes, follow these steps:

1. Here’s the code that you’ll use:

   <script>
     (function () {
       "use strict";var detectMouseShake=function(subscribe,_a){var interval=_a.interval,threshold=_a.threshold;var velocity;var direction;var directionChangeCount=0;var distance=0;var listener=function(event){var nextDirection=Math.sign(event.movementX);distance+=Math.abs(event.movementX)+Math.abs(event.movementY);if(nextDirection!==direction){direction=nextDirection;directionChangeCount++}};var intervalClear=setInterval((function(){var nextVelocity=distance/interval;if(!velocity){velocity=nextVelocity;return}var acceleration=(nextVelocity-velocity)/interval;if(directionChangeCount&&acceleration>threshold){subscribe((function(){clearInterval(intervalClear);document.removeEventListener("mousemove",listener)}))}distance=0;directionChangeCount=0;velocity=nextVelocity}),interval);document.addEventListener("mousemove",listener)};
   
       detectMouseShake(function (unsubscribe) {
         window._paq.push(['trackEvent', 'UX research', 'Mouse shake']);
         // unsubscribe(); // Uncomment this line when you want to finish after first trigger
       }, {
         interval: 350, // Number of milliseconds to reset counter
         threshold: 0.01, // Acceleration of mouse movement threshold
       });
     })();
   </script>

   In this code, you can change the following parameters:

   •  // unsubscribe(); // Uncomment this line when you want to finish after first trigger
   • interval: 350, // Number of milliseconds to reset counter
   • threshold: 0.01, // Acceleration of mouse movement threshold

   If you want to make it more sensitive, set the threshold to 0.009 or lower. Otherwise, set it to 0.011 and above.

   You can also adjust custom event parameters:

   •   window._paq.push(['trackEvent', 'UX research', 'Mouse shake']);
2. Go to Menu > Tag Manager.
3. Navigate to Tags.
4. Click Add a tag.
5. Name the tag, for example Mouse shakes, and select the following type: Custom code (async).
6. Click Next.
7. In Tag code, paste the code prepared in step 1.
   

   

8. In Advanced tag settings > Consent type, select the following type: Analytics.
   

   

   Note: Set it up if you use a consent form on your site. This tag will fire only for visitors who accept the selected consent type.

9. In Tag triggers, click Choose existing trigger.
10. Select All page views and click OK.
11. Click OK to save the tag.
12. Test your tag in debug mode.
13. When you’re happy with how the tag works, click Publish.

To set up reporting for mouse shakes, follow these steps:

1. Go to Menu > Analytics.
2. Navigate to Custom reports.
3. Create a custom report with the following setup:
   • Report type: Flat table
   • Dimensions: Page URL, Custom event action, Custom event name
   • Metrics: Events
   • Filter: Custom event category is UX research

   

   Note: You can use just one custom report for rage clicks, error clicks, dead clicks and mouse shakes.

4. Click Create report.