ניתוח קליקי זעם: זיהוי ותיקון אלמנטים שבורים

ניתוח קליקי זעם: זיהוי ותיקון אלמנטים שבורים

אנו צופים במשתמש שלוחץ על כפתור "קנייה" שלוש פעמים—אבל שום דבר לא קורה. שנייה לאחר מכן, הם עוזבים את האתר לנצח. זהו קליק זעם: סדרה של שלושה קליקים או יותר במקום אחד בתוך זמן קצר (בדרך כלל < 1 שנייה). התנהגות כזו היא אות ברור לתסכול: האלמנט נראה ניתן ללחיצה אך אינו מגיב. לפי Microsoft Clarity, אחד מתוך עשרה מבקרים נתקל לפחות בקליק זעם אחד, ופרויקטים מסחריים מאבדים עד 30% מההמרה עקב באגים כאלה. במהלך השנים, ניתחנו מעל 2000 אירועים כאלה בפרויקטים בכל הגדלים—מעמודי נחיתה ועד פלטפורמות מסחר אלקטרוני גדולות. אנו מציעים גישה מקיפה: מזיהוי ועד תיקון אלמנטים בעייתיים, עם אחריות לסילוק 5 הגורמים המובילים.

מדוע קליקי זעם מתרחשים

גורמים נפוצים:

• כפתור או קישור נראים ניתנים ללחיצה אך אינם מגיבים (אין מטפל אירועים, JavaScript שבור).
• האנימציה של הכפתור אינה מספקת משוב: חסרים cursor: pointer, מצבי ריחוף או מצבים פעילים.
• זמני טעינה ארוכים—המשתמש לוחץ שוב, חושב שהקליק הראשון לא עבר.
• אלמנט דקורטיבי (אייקון, תמונה) נראה פונקציונלי.
• שגיאת JavaScript חוסמת טיפול באירועים.

למדנו לזהות ולתקן במהירות את כל הבעיות הללו. הניסיון שלנו מראה שב-80% מהמקרים, הוספת מאפייני CSS כמו cursor: pointer, transition והגנה מפני לחיצה כפולה מספיקה.

כיצד לאוטומט את ניתוח קליקי הזעם

אנו משתמשים בשתי גישות: הפתרון המוכן Microsoft Clarity ו-גלאי מותאם אישית משלנו. הטבלה שלהלן משווה ביניהם.

Clarity מזהה אוטומטית קליקי זעם ומציג עמודים עם הכי הרבה הפעלות כאלה, קואורדינטות והקלטות מסך. לניתוח מפורט, אנו משלבים גלאי מותאם אישית. הגלאי המותאם אישית מדויק פי 3 מ-Clarity בזכות ספים הניתנים להגדרה.

יישום גלאי קליקי זעם מותאם אישית

להלן מחלקה מוכנה לייצור שאנו משתמשים בה. היא עוקבת אחר קליקים ושולחת אירועים ל-Google Analytics.

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()

גלאי זה תופס בדיוק קליקי זעם—סדרות של 3+ קליקים ברדיוס של 30 פיקסלים תוך 500 אלפיות שנייה. הוא כבר בשימוש בפרויקטי מסחר אלקטרוני גדולים והפחית את שיעור הנטישה ב-12% תוך חודש.

כיצד לפרוס גלאי מותאם אישית ב-5 שלבים

1. העתק את מחלקת 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() לפרויקט שלך.
2. אתחל את הגלאי בקובץ הסקריפט הראשי.
3. הגדר ספים: RageClickDetector (מספר קליקים) ו-threshold (מרווח זמן).
4. שלב את Google Analytics (ודא ש-timeWindow מוגדר).
5. ודא איסוף נתונים דרך קונסולת הדפדפן או דוחות GA.

לאחר הפריסה, תוכל לנתח קליקי זעם בזמן אמת.

ניתוח נתוני קליקי זעם עם Python

לאחר איסוף האירועים, אנו מריצים סקריפט שמאגד נתונים ומפיק את 20 האלמנטים הבעייתיים ביותר.

def analyze_rage_clicks(analytics_db, days=30):
    results = analytics_db.query(f"""
        SELECT element_selector, COUNT(*) as rage_click_events,
               COUNT(DISTINCT session_id) as affected_sessions,
               AVG(click_count) as avg_clicks,
               MIN(page_path) as example_page
        FROM events
        WHERE event_name = 'rage_click'
          AND date >= CURRENT_DATE - INTERVAL '{days} days'
        GROUP BY element_selector
        ORDER BY affected_sessions DESC
        LIMIT 20
    """)
    print("Top rage click targets:")
    for row in results:
        print(f" {row['element_selector']}: "
              f"{row['affected_sessions']} sessions, "
              f"avg {row['avg_clicks']:.1f} clicks")
    return results

גישה זו מוצאת במהירות את האשמים. לדוגמה, לאחרונה בחנות מקוונת מצאנו כפתור "בצע הזמנה" שלא הגיב ב-Safari. הבעיה הייתה חסר בתחומות ספק (vendor prefixes). תיקנו זאת תוך שעה, וההמרה בשלב התשלום עלתה ב-5%.

בעיות טיפוסיות ופתרונותיהן

מה לעשות לאחר זיהוי קליקי זעם

לאחר זיהוי אלמנטים בעייתיים, חשוב לא רק לתקן אותם אלא גם להריץ מבחן A/B כדי להעריך את ההשפעה על ההמרה. אנו מבטיחים שאחרי העבודה שלנו, מספר קליקי הזעם יקטן בלפחות 70%. קבל ייעוץ—נעריך את הפרויקט שלך ונציע פתרון מפתח. הזמן ניתוח קליקי זעם היום כדי להגביר המרה ולשפר UX.

מה העבודה שלנו כוללת

• ביקורת בעיות נוכחיות: ניתוח נתוני Clarity והגלאי המותאם אישית, זיהוי 10 האלמנטים הבעייתיים המובילים.
• פיתוח ופריסת הגלאי: הגדרת ספים, שילוב עם מערכת האנליטיקה שלך, סינון חיוביים שגויים.
• תיקוני באגים: תיקוני CSS ו-JS לכל אלמנט בעייתי, התקנת אינדיקטורי טעינה, הגנה מפני לחיצה כפולה.
• תיעוד: דוח עם בעיות שנמצאו, פתרונות מומלצים ותוצאות מבחן A/B.
• תמיכה: ניטור לשבועיים לאחר הפריסה, התאמת ספים במידת הצורך.

לוח זמנים

הקמת גלאי קליקי הזעם, ניתוח נתונים מ-30 הימים האחרונים ותיקון 5 הבעיות המובילות אורכים 2 עד 4 ימי עסקים. קבל ייעוץ על הקמת ניתוח קליקי זעם—צור קשר היום!