Анализ Dead Clicks (клики по некликабельным элементам)

Анализ Dead Clicks (клики по некликабельным элементам)

Dead Click — клик по элементу, который не имеет обработчика события и не вызывает никакой реакции. В отличие от Rage Click (повторные клики), Dead Click — одиночный клик по "мёртвому" месту. Указывает на несоответствие между ожиданиями пользователя и реальным поведением интерфейса.

Причины dead clicks

• Текст выглядит как ссылка (underline, синий цвет), но не является ею
• Изображение выглядит кликабельным (иконка, кнопка), но не содержит ссылки
• Элемент был кликабелен в предыдущей версии дизайна, но переработан
• Пользователь ожидает раскрывающийся список или модальное окно
• 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> к тексту с underline
• Сделать карточку товара целиком ссылкой: <a href="/product/X" class="card-link">
• Убрать text-decoration: underline у некликабельных элементов
• Добавить cursor: pointer + onclick к интерактивным блокам

Срок выполнения

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