Dead clicks analysis on non-clickable elements

Dead Clicks Analysis

Dead click is a click on non-clickable element with no event handler and no response. Unlike rage click (repeated), dead click is single click on "dead" spot. Indicates mismatch between user expectations and actual interface behavior.

Dead Click Causes

• Text looks like link (underline, blue), but isn't
• Image looks clickable (icon, button), but has no link
• Element was clickable in previous design, now isn't
• User expects dropdown or modal window
• pointer-events: none on child when clicking parent

Detection via Analytics

// Dead click detector
document.addEventListener('click', function(event) {
  const el = event.target

  // Determine "expected clickability"
  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'

  // If element not clickable — dead click
  if (!isClickable) {
    const selector = buildSelector(el)
    const text = el.textContent?.trim().slice(0, 50)
    const styles = getComputedStyle(el)

    // Only interested in elements that look clickable
    const looksClickable =
      styles.textDecoration.includes('underline') ||
      styles.color === 'rgb(0, 0, 238)' ||  // blue
      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 automatically detects dead clicks in Heatmaps → Dead Clicks. Pages with highest % dead click sessions are priority.

Analysis and Fixes

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

Typical fixes:

• Add <a href> to underlined text
• Make product card entire link: <a href="/product/X" class="card-link">
• Remove text-decoration: underline from non-clickable elements
• Add cursor: pointer + onclick to interactive blocks

Delivery Time

Setup detector, analyze patterns, fix top-10 issues — 1–2 business days.