How to track rage clicks using Google Tag Manager

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.