Rage clicks analysis on non-functional elements

Rage Clicks Analysis

Rage click is 3+ clicks in one spot within short time (typically < 1 second). Signals user frustration: they expect element to respond but it doesn't.

Typical Rage Click Causes

• Button or link looks clickable but doesn't respond
• JavaScript error broke click handler
• Button animation lacks feedback (no cursor:pointer, no hover state)
• Slow loading — user clicks again thinking click didn't register
• Decorative element looks functional

Setup in Microsoft Clarity

Clarity automatically detects rage clicks and shows:

• Pages with most rage click sessions
• Specific coordinates on page
• Session recordings with rage clicks

Custom Rage Click Detector

class RageClickDetector {
  constructor(threshold = 3, timeWindow = 500) {
    this.threshold = threshold
    this.timeWindow = timeWindow
    this.clicks = []
    this.maxDistance = 30  // pixels

    document.addEventListener('click', this.handleClick.bind(this))
  }

  handleClick(event) {
    const now = Date.now()
    const { clientX, clientY, target } = event

    // Clear old clicks
    this.clicks = this.clicks.filter(c => now - c.time < this.timeWindow)

    // Check proximity to previous clicks
    const nearbyClicks = this.clicks.filter(c =>
      Math.abs(c.x - clientX) < this.maxDistance &&
      Math.abs(c.y - clientY) < this.maxDistance
    )

    nearbyClicks.push({ x: clientX, y: clientY, time: now })
    this.clicks.push({ x: clientX, y: clientY, time: now })

    if (nearbyClicks.length >= this.threshold) {
      this.onRageClick(event, nearbyClicks.length)
    }
  }

  onRageClick(event, clickCount) {
    const element = event.target
    const selector = this.getSelector(element)

    console.warn(`Rage click detected: ${selector} (${clickCount} clicks)`)

    // Send to analytics
    gtag('event', 'rage_click', {
      element_selector: selector,
      click_count: clickCount,
      page_path: window.location.pathname,
      element_text: element.textContent?.trim().slice(0, 50)
    })

    // Check if missing cursor:pointer — possible issue
    const cursor = window.getComputedStyle(element).cursor
    if (cursor !== 'pointer' && element.tagName !== 'A' && element.tagName !== 'BUTTON') {
      gtag('event', 'non_pointer_rage_click', {
        element_selector: selector,
        computed_cursor: cursor
      })
    }
  }

  getSelector(el) {
    if (el.id) return `#${el.id}`
    if (el.className) return `.${el.className.split(' ')[0]}`
    return el.tagName.toLowerCase()
  }
}

new RageClickDetector()

Fixing Rage Click Elements

• Add cursor: pointer to all clickable elements
• Ensure hover/active states provide clear feedback
• Test click handlers for JavaScript errors
• Add loading states for slow actions
• Review decorative vs functional element styling

Delivery Time

Setting up rage click detection and analysis — 1 business day.