Visitors rage clicking on certain elements on your website is a good indicator of a UX error. For example, people may click on a blue text that is not a link or on an image that has no click functionality.
Detecting and fixing such usability issues is crucial, and luckily the detection part is doable using Google Tag Manager and Google Analytics.
Rage click is a situation where, in a short period of time, a website user clicks multiple times on a specific element. I.e. in two seconds, a visitor clicks three times on an image.
Without further ado, let’s see how tracking rage clicks works in Google Tag Manager.
Step 1 – Create a new Tag that detects rage clicks
This tag is responsible for detecting rage clicks and pushing a custom event
rage_click into the data layer.
There are a few variables that you can play with to make it best fit your use case:
no_of_clicks – after how many clicks do we consider it a rage click. Default is 3.
time – in what time period should the clicks happen. Default is 2 seconds.
radius – in what radius should the clicks happen. Default is 100px.
The following variables are pushed into the data layer when a rage click is detected:
rc_element – selector of the element on which the clicks happened
rc_count – the number of clicks
rc_max_distance – maximum distance between the clicks
rc_time_diff – period from first to last click
PS! You don’t have to send all of them to GA, pick the ones you think make the most sense.
Full code snippet. – Requires jQuery to be loaded on the page.
Step 2 – Create a new Trigger
The snippet from the previous step is pushing the
rage_click event into the data layer every time a rage click is detected. Now we need to create a trigger that listens to that event.
Step 3 – Send an event to Google Analytics
Awesome, now let’s create a new tag that is responsible for sending the custom event to Google Analytics.
You can play around with the event parameters, especially with the event label to best match your needs but the recommended values are as seen in the screenshot above.
Before publishing your changes, don’t forget to enter the preview mode in Google Tag Manager and test the setup yourself. Go ahead and do a few rage clicks and see if an event is getting sent to Google Analytics. Also, check the event parameters and see if they match your expectations.
Step 4 – Using this data
Okay, so you have configured everything correctly, tested it and it works fine. Now, how do you put this data into use?
First, go into Google Analytics and find your rage click events. If you did as described in this post, you find them by clicking on Overview under Behavior –> Events, then find the “Rage Click” event category.
Click on the “Rage Click” event category and choose Event Action to see the elements on which the rage clicks happened.
Since elements with the same selectors might be on different pages, it might be helpful to apply a secondary dimension “Page”.
Now, all you need to do is to pick one element, copy its selector and go to the page seen in the secondary dimension.
Hover over the line that was returned in the console and it should highlight the element in the DOM.
If you prefer element class over the selector, you can change the event action in GTM from the
rc_element to GTM’s built-in Click Class variable.
Great! That’s it, should you need any help with tracking rage clicks using Google Tag Manager and Google Analytics, post your questions in the comments below.
Should you need further help with your analytics setup, take a look at our services.