חלונות קופצים התנהגותיים: הגדרת טריגרים להגברת המרות

תרחיש טיפוסי: חנות מסחר אלקטרוני עם 2,000 מבקרים ביום ושיעור המרה של 0.3%. לאחר יישום חלונות קופצים התנהגותיים עם כוונת יציאה ועומק גלילה, ההמרה עלתה ל-1.2%. מפתחים רבים עושים את הטעות של הצגת חלון קופץ לפי טיימר—זה מרגיז 70% מהמשתמשים. אנו משתמשים בשילוב של 4–5 חלונות קופצים התנהגותיים שלוקחים בחשבון את ההקשר. המהנדסים שלנו מוסמכים ב-JavaScript עם 5 שנות ניסיון והשלימו מעל 150 פרויקטים מוצלחים. אנו מבטיחים איכות ו-30 ימי תמיכה.

כיצד להגדיר טריגר לכוונת יציאה ללא חיובי שווא?

הטריגר היעיל ביותר לדפי נחיתה הוא כוונת יציאה. הוא מופעל כאשר משתמש מזיז את הסמן בחדות לכיוון הקצה העליון של המסך. הפרמטר המרכזי הוא סף הרגישות: 10 פיקסלים מהקצה ומהירות כלפי מעלה >50 px/ms. ללא מסנן זה, החלון הקופץ יופיע בכל תנועה אקראית. עבור מכשירים ניידים, כוונת יציאה לא עובדת—שם אנו משתמשים באירוע popstate על כפתור החזרה.

class ExitIntentDetector {
  private threshold = 10;
  private sensitivity = 50;
  private triggered = false;
  private lastY = 0;
  private lastTime = 0;

  constructor(private onExit: () => void) {
    document.addEventListener('mousemove', this.handleMouseMove.bind(this));

    // Мобильный fallback
    history.pushState({ popup: true }, '');
    window.addEventListener('popstate', () => {
      if (!this.triggered) {
        this.triggered = true;
        this.onExit();
        history.pushState({ popup: true }, '');
      }
    });
  }

  private handleMouseMove(e: MouseEvent): void {
    if (this.triggered) return;

    const now = Date.now();
    const deltaY = e.clientY - this.lastY;
    const deltaTime = now - this.lastTime;
    const velocityY = deltaY / deltaTime;

    if (e.clientY < this.threshold && velocityY < -this.sensitivity) {
      this.triggered = true;
      this.onExit();
    }

    this.lastY = e.clientY;
    this.lastTime = now;
  }

  reset(): void {
    this.triggered = false;
  }
}

const detector = new ExitIntentDetector(() => {
  showPopup('exit_offer');
});

מדוע חשוב לנהל את תור החלונות הקופצים?

אם לא שולטים בהצגה, משתמש יראה שניים או שלושה חלונות בו-זמנית—זה מרגיז ומפחית המרה. מנהל המצב class ExitIntentDetector { private threshold = 10; private sensitivity = 50; private triggered = false; private lastY = 0; private lastTime = 0; constructor(private onExit: () => void) { document.addEventListener('mousemove', this.handleMouseMove.bind(this)); // Мобильный fallback history.pushState({ popup: true }, ''); window.addEventListener('popstate', () => { if (!this.triggered) { this.triggered = true; this.onExit(); history.pushState({ popup: true }, ''); } }); } private handleMouseMove(e: MouseEvent): void { if (this.triggered) return; const now = Date.now(); const deltaY = e.clientY - this.lastY; const deltaTime = now - this.lastTime; const velocityY = deltaY / deltaTime; if (e.clientY < this.threshold && velocityY < -this.sensitivity) { this.triggered = true; this.onExit(); } this.lastY = e.clientY; this.lastTime = now; } reset(): void { this.triggered = false; } } const detector = new ExitIntentDetector(() => { showPopup('exit_offer'); }); פותר את הבעיה: הוא שומר סמנים של חלונות שהוצגו ב-localStorage וחוסם פתיחה בו-זמנית. בנוסף, מוגדר זמן צינון—ברירת מחדל 7 ימים—לאחריו החלון יכול להופיע שוב.

class PopupManager {
  private shown = new Set<string>(
    JSON.parse(localStorage.getItem('shown_popups') ?? '[]')
  );

  private currentPopup: string | null = null;

  canShow(id: string, cooldownDays = 7): boolean {
    if (this.currentPopup) return false;
    const key = `popup_shown_${id}`;
    const lastShown = localStorage.getItem(key);
    if (!lastShown) return true;
    const daysSince = (Date.now() - parseInt(lastShown)) / 86400000;
    return daysSince >= cooldownDays;
  }

  show(id: string): void {
    if (!this.canShow(id)) return;
    this.currentPopup = id;
    localStorage.setItem(`popup_shown_${id}`, Date.now().toString());
    this.shown.add(id);
    localStorage.setItem('shown_popups', JSON.stringify([...this.shown]));
    document.getElementById(`popup-${id}`)?.classList.add('popup--visible');
    document.body.classList.add('popup-open');
  }

  close(id: string): void {
    this.currentPopup = null;
    document.getElementById(`popup-${id}`)?.classList.remove('popup--visible');
    document.body.classList.remove('popup-open');
  }
}

const popups = new PopupManager();

השוואת טריגרים

כוונת יציאה לפי המרה (עד 5%) עולה על חלונות טיימר (0.5-1%) פי 5. עומק גלילה גם הוא יעיל פי 3-4 מטיימר בדפים ארוכים.

תהליך יישום שלב אחר שלב

מה כלול בעבודה

• אנליטיקה: מפות חום, פילוח, בחירת טריגרים לקהל שלך.
• פיתוח: כל הטריגרים (כוונת יציאה, עומק גלילה, נראות אלמנט, טיימר חוסר פעילות) עם PopupManager.
• עיצוב: אבות טיפוס רספונסיביים בסגנון האתר שלך—עד 5 גרסאות.
• אינטגרציה: CRM, ESP, מערכות אנליטיקה (Google Analytics, Yandex.Metrica).
• מעקב: רישום אוטומטי של חשיפות, קליקים וסגירות ב-dataLayer.
• תיעוד: תיאורי טריגרים, קוד, הוראות למשווקים.
• תמיכה: 30 יום לאחר ההשקה—תיקונים, כיוונון עדין, ייעוץ.

כיצד בדיקות A/B מעלות המרה?

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

כיצד להגדיר עומק גלילה ונראות אלמנט

טריגרים אלה דורשים קוד מינימלי אך נותנים עלייה משמעותית בהמרה בדפים עם תוכן ארוך.

function onScrollDepth(percentage: number, callback: () => void): () => void {
  let fired = false;
  const handler = () => {
    if (fired) return;
    const scrolled = window.scrollY + window.innerHeight;
    const total = document.documentElement.scrollHeight;
    if (scrolled / total >= percentage / 100) {
      fired = true;
      callback();
    }
  };
  window.addEventListener('scroll', handler, { passive: true });
  return () => window.removeEventListener('scroll', handler);
}
onScrollDepth(70, () => showPopup('mid_page_offer'));

function onElementVisible(selector: string, callback: () => void): void {
  const el = document.querySelector(selector);
  if (!el) return;

  const observer = new IntersectionObserver(
    (entries) => {
      if (entries[0].isIntersecting) {
        observer.disconnect();
        callback();
      }
    },
    { threshold: 0.5 }
  );

  observer.observe(el);
}

onElementVisible('#pricing-section', () => showPopup('pricing_helper'));

לפרטים נוספים, ראו IntersectionObserver.

מעקב חשיפות

כל חלון קופץ חייב לתעד חשיפות, קליקים וסגירות. אנו משלבים זאת דרך אירועי PopupManager או class PopupManager { private shown = new Set<string>( JSON.parse(localStorage.getItem('shown_popups') ?? '[]') ); private currentPopup: string | null = null; canShow(id: string, cooldownDays = 7): boolean { if (this.currentPopup) return false; const key = `popup_shown_${id}`; const lastShown = localStorage.getItem(key); if (!lastShown) return true; const daysSince = (Date.now() - parseInt(lastShown)) / 86400000; return daysSince >= cooldownDays; } show(id: string): void { if (!this.canShow(id)) return; this.currentPopup = id; localStorage.setItem(`popup_shown_${id}`, Date.now().toString()); this.shown.add(id); localStorage.setItem('shown_popups', JSON.stringify([...this.shown])); document.getElementById(`popup-${id}`)?.classList.add('popup--visible'); document.body.classList.add('popup-open'); } close(id: string): void { this.currentPopup = null; document.getElementById(`popup-${id}`)?.classList.remove('popup--visible'); document.body.classList.remove('popup-open'); } } const popups = new PopupManager(); ללא קוד נוסף—המעקב מתחבר אוטומטית ל-PopupManager. קבלו ייעוץ להערכת הפרויקט שלכם. צרו קשר לפרטים נוספים.

אפקט כלכלי

החלפת חלונות טיימר בהתנהגותיים מעלה המרה פי 3–5 עם אותן עלויות תעבורה. החזר השקעה מתרחש בתוך השבוע הראשון בזכות ירידה בשיעור הנטישה ועלייה בלידים. אנו מיישמים מערכת סוהר תוך 3–5 ימים.

אילו טעויות נפוצות נעשות במהלך ההגדרה?

• הצגת חלון קופץ ללא זמן צינון—המשתמש רואה את אותו דבר בכל ביקור.
• התעלמות ממכשירים ניידים—כוונת יציאה לא עובדת; יש צורך ב-popstate.
• חוסר מנהל תור—שני חלונות קופצים בו-זמנית.
• כוונת יציאה אגרסיבית מדי—מופעלת בגלילה רגילה.

הימנעות מטעויות אלה תביא לצמיחה בהמרה ללא פגיעה בחוויית המשתמש. אנו נעריך את הפרויקט שלכם.