Аналіз Rage Clicks (багаторазові кліки по непрацюючих елементах)

Аналіз Rage Clicks

Rage click — це 3+ клікі в одну точку за короткий час (зазвичай < 1 секунди). Сигналізує про розчарування користувача: він очікує реакції від елемента, але її немає.

Типові причини Rage Clicks

• Кнопка або посилання виглядає кликабельною, але не реагує
• Помилка JavaScript зломала обробник кліку
• Анімація кнопки не дає зворотного зв'язку (немає cursor:pointer, немає стану hover)
• Повільне завантаження — користувач клікає повторно, думаючи що клік не пройшов
• Декоративний елемент виглядає як функціональний

Налаштування в Microsoft Clarity

Clarity автоматично виявляє rage clicks та показує:

• Сторінки з найбільшою кількістю сесій rage click
• Конкретні координати на сторінці
• Записи сесій з rage clicks для перегляду

Користувацький детектор Rage Clicks

class RageClickDetector {
  constructor(threshold = 3, timeWindow = 500) {
    this.threshold = threshold
    this.timeWindow = timeWindow
    this.clicks = []
    this.maxDistance = 30  // пікселі

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

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

    // Очистіть старі клікі
    this.clicks = this.clicks.filter(c => now - c.time < this.timeWindow)

    // Перевірте близькість до попередніх кліків
    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)`)

    // Відправте в аналітику
    gtag('event', 'rage_click', {
      element_selector: selector,
      click_count: clickCount,
      page_path: window.location.pathname,
      element_text: element.textContent?.trim().slice(0, 50)
    })

    // Перевірте, чи немає cursor:pointer — можлива проблема
    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()

Виправлення елементів Rage Click

• Додайте cursor: pointer до всіх кликабельних елементів
• Переконайтеся, що стани hover/active дають чітке зворотне зв'язування
• Протестуйте обробники кліків на помилки JavaScript
• Додайте стани завантаження для повільних дій
• Переглядайте стиль декоративних та функціональних елементів

Час виконання

Налаштування виявлення та аналізу rage clicks — 1 робочий день.