How to track rage clicks using Google Tag Manager

aerial photo of sea

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

NameTrigger TypeValue
CE – Rage ClickCustom Eventrage-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

#nametypevalue
1EDLV – Rage Click – Class ListData Layer Variablerage-click.classList
2EDLV – Rage Click – Element IDData Layer Variablerage-click.id

Finally, create a new Universal Google Analytics Tag with the following settings

Tag SettingValue
Tag NameGA – Event – Rage Click
Track TypeEvent
CategoryUser Engagement
ActionRage Click
LabelElement Classes: {{EDLV – Rage Click – Class List}} | Element ID: {{EDLV – Rage Click – Element ID}}
TriggerCE – 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.