Аналіз Dead Clicks (кліки по некліковних елементах)

Аналіз Dead Clicks

Dead click — це клік по некликабельному елементу без обробника та без реакції. На відміну від rage click (повторні), dead click — це одиничний клік по "мертвому" місцю. Вказує на невідповідність між очікуваннями користувача та фактичною поведінкою інтерфейсу.

Причини Dead Clicks

• Текст виглядає як посилання (підкреслення, синій), але не є
• Зображення виглядає кликабельним (іконка, кнопка), але без посилання
• Елемент був кликабельним в попередньому дизайні, тепер ні
• Користувач очікує dropdown або модальне вікно
• pointer-events: none на дочірньому елементі при клику на батьків

Виявлення через аналітику

// Детектор dead clicks
document.addEventListener('click', function(event) {
  const el = event.target

  // Визначте "очікувану кликабельність"
  const isClickable =
    el.tagName === 'A' ||
    el.tagName === 'BUTTON' ||
    el.tagName === 'INPUT' ||
    el.tagName === 'SELECT' ||
    el.tagName === 'TEXTAREA' ||
    el.getAttribute('role') === 'button' ||
    el.getAttribute('onclick') ||
    el.closest('[role="button"]') ||
    el.closest('a') ||
    el.closest('button') ||
    getComputedStyle(el).cursor === 'pointer'

  // Якщо елемент не кликабельний — dead click
  if (!isClickable) {
    const selector = buildSelector(el)
    const text = el.textContent?.trim().slice(0, 50)
    const styles = getComputedStyle(el)

    // Цікавлять тільки елементи, які виглядають кликабельно
    const looksClickable =
      styles.textDecoration.includes('underline') ||
      styles.color === 'rgb(0, 0, 238)' ||  // синій
      el.tagName === 'IMG' ||
      el.classList.contains('icon') ||
      el.closest('.card') ||
      el.closest('[data-action]')

    if (looksClickable) {
      gtag('event', 'dead_click', {
        element: selector,
        text: text,
        page: window.location.pathname,
        looks_clickable: true
      })
    }
  }
})

Microsoft Clarity Dead Clicks

Clarity автоматично виявляє dead clicks в Heatmaps → Dead Clicks. Сторінки з найбільшим % сесій dead click — пріоритет для аналізу.

Аналіз та виправлення

def get_dead_click_patterns(analytics_db):
    rows = analytics_db.query("""
        SELECT
            element,
            text,
            COUNT(*) as clicks,
            COUNT(DISTINCT session_id) as sessions,
            page
        FROM events
        WHERE event_name = 'dead_click'
        AND date >= CURRENT_DATE - INTERVAL '14 days'
        GROUP BY element, text, page
        ORDER BY sessions DESC
        LIMIT 20
    """)

    for row in rows:
        if row['sessions'] > 50:
            print(f"HIGH PRIORITY: {row['element']} '{row['text']}' "
                  f"— {row['sessions']} sessions on {row['page']}")
    return rows

Типові виправлення:

• Додайте <a href> до підкресленого тексту
• Зробіть карточку товару цілком посиланням: <a href="/product/X" class="card-link">
• Видаліть text-decoration: underline з некликабельних елементів
• Додайте cursor: pointer + onclick до інтерактивних блоків

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

Налаштування детектора, аналіз паттернів, виправлення топ-10 проблем — 1–2 робочих дні.