Tracking rage clicks is a quick way to identify troublesome areas on your website. This is usually when a button or something that looks like a button isn’t doing the task the user thinks it should. I say “thinks it should” because this is also an effective way to understand if you are using an element that looks like it should be a button.
This script below should be installed as a new HTML Tag which fires on All Pages
<script> // Start Config var coolDownSpeed = 400 // milliseconds var rageClickThreshold = 3 // number of clicks in succession to trigger an event // End Config --- var clickedElement = null; var newClickedElement = null; var clicks = 0; rageClickThreshold--; document.addEventListener("click", function (e) { if (clicks >= rageClickThreshold) { window.dataLayer = window.dataLayer || []; window.dataLayer.push({ 'event': 'rage-click', 'rage-click' : { 'classList' : clickedElement.className || null, 'id' : clickedElement.id || null } }); } if (e == null) { newClickedElement = e.srcElement; } else { newClickedElement = e.target; } if (clickedElement == newClickedElement) { clicks = clicks + 1; } else { clicks = 0; clickedElement = newClickedElement; } }); // Rage Click Cooldown setInterval(function () { if (clicks > 0) { clicks = clicks - 1; } }, coolDownSpeed) </script>
Next, you’ll need to create a new Trigger
Name | Trigger Type | Value |
---|---|---|
CE – Rage Click | Custom Event | rage-click |
Then enable these built-in Variables
- Click Element
- Click Classes
- Click ID
- Click URL
- Click Text
Then you’ll need to create two Custom Variables
# | name | type | value |
---|---|---|---|
1 | EDLV – Rage Click – Class List | Data Layer Variable | rage-click.classList |
2 | EDLV – Rage Click – Element ID | Data Layer Variable | rage-click.id |
Finally, create a new Universal Google Analytics Tag with the following settings
Tag Setting | Value |
---|---|
Tag Name | GA – Event – Rage Click |
Track Type | Event |
Category | User Engagement |
Action | Rage Click |
Label | Element Classes: {{EDLV – Rage Click – Class List}} | Element ID: {{EDLV – Rage Click – Element ID}} |
Trigger | CE – Rage Click |
Save your tag and jump into preview mode to test some rage clicks. Remember that the script is designed to monitor successive clicks on the same element in a row before registering an event. This is to avoid somebody whose randomly clicking on elements on the page.
Warning
This event will fire a lot of times which could max out hit rates for users. It’s unlikely but bear in mind rate limits when applying any kind of behaviour tracking such as this one. Also, always test scripts you find on the internet – I’m not a JavaScript expert by an means so there might be better ways to track rage clicks.