Типова ситуація: інтернет-магазин з 2000 відвідувачів на день, конверсія 0.3%. Після впровадження поведінкових поп-апів з Exit intent та scroll depth конверсія зросла до 1.2%. Багато розробників допускають помилку, показуючи pop-up за таймером — це дратує 70% користувачів. Ми використовуємо комбінацію з 4–5 поведінкових тригерів, які враховують контекст. Наші інженери мають сертифікацію з JavaScript та 5-річний досвід, реалізували понад 150 успішних проєктів. Гарантуємо якість та підтримку 30 днів.
Як налаштувати тригер exit intent без хибних спрацьовувань?
Найефективніший тригер для лендінгів — exit intent. Він спрацьовує, коли користувач різко спрямовує курсор до верхнього краю екрана. Ключовий параметр — поріг чутливості: 10 пікселів від краю та швидкість руху вгору >50 px/ms. Без цього фільтра pop-up буде показуватися при кожному випадковому русі. Для мобільних пристроїв exit intent не працює — там використовуємо подію 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');
});
Scroll depth popup та element visibility також потребують мінімального коду, але дають помітний приріст конверсії на довгих сторінках. Для scroll depth popup (поп-ап по скролу) ми використовуємо подію scroll з debounce для оптимізації продуктивності. Для element visibility — Intersection Observer popup.
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 (pop-up менеджер) вирішує проблему: він зберігає в localStorage мітки показаних вікон та блокує одночасне відкриття. Крім того, задається cooldown — за замовчуванням 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();
Які тригери найефективніші?
Exit intent за конверсією (до 5%) перевершує таймерні pop-up (0.5-1%) в 5 разів. Scroll depth popup ефективніший за таймер в 3-4 рази. Таким чином, поведінкові тригери краще за звичайні у 3-5 разів. Нижче наведено порівняння.
| Тригер | Складність реалізації | Ефективність | Типове використання |
|---|---|---|---|
| Exit intent | Середня | Висока | Пропозиція знижки при виході |
| Scroll depth | Низька | Середня | Показ контенту після прочитання |
| Time on page | Низька | Низька | Загальний оффер |
| Inactivity | Середня | Середня | Повернення уваги |
| Element visibility | Середня | Висока | Контекстні підказки |
Процес впровадження та вартість
Покроковий процес впровадження:
- Аналіз поведінки користувачів за допомогою теплових карт.
- Вибір тригерів: exit intent, scroll depth, element visibility, inactivity.
- Розробка детекторів та PopupManager.
- Дизайн адаптивних pop-up.
- Інтеграція з CRM та аналітикою.
- A/B-тестування та оптимізація.
Вартість впровадження від 5000 грн, економія на трафіку до 30000 грн на місяць. Наприклад, для інтернет-магазину з 2000 відвідувачів на день додаткові 100 лідів на місяць приносять 50000 грн прибутку. Окупність інвестицій у 5000 грн настає за 1-2 тижні за рахунок зростання конверсії. Для сайту з 10 000 відвідувачів на день додаткові 500 лідів можуть принести 250 000 грн доходу.
Що входить в роботу:
- Аналітика: теплові карти, сегментація, вибір тригерів під вашу аудиторію.
- Розробка: всі тригери (exit intent, scroll depth, element visibility, таймер бездіяльності) з PopupManager.
- Дизайн: адаптивні макети в стилі вашого сайту — до 5 варіантів.
- Інтеграція: CRM, ESP, системи аналітики (Google Analytics, Яндекс.Метрика).
- Трекінг: автоматична фіксація показів, кліків, закриттів в dataLayer.
- Документація: опис тригерів, коду, інструкції для маркетолога.
- Підтримка: 30 днів після запуску — правки, доналаштування, консультації.
Виконаємо налаштування під ключ: від аналітики до запуску. Оцініть проект — пишіть нам, і ми розрахуємо вартість за 1 день.
A/B-тестування для підвищення конверсії: порівнюємо таймерний pop-up проти поведінкового. Результат — поведінковий дає +180% конверсії при тому ж трафіку. Тестуємо різні оффери, заголовки, кольори. Трекінг показів фіксує impressions, clicks та closes через події gtag або dataLayer.
Типові помилки при налаштуванні
- Показ pop-up без cooldown — користувач бачить одне й те саме на кожному візиті.
- Ігнорування мобільних пристроїв — exit intent не працює, потрібен popstate.
- Відсутність менеджера черги — два pop-up одночасно.
- Занадто агресивний exit intent — спрацьовує при звичайному скролі.
Уникнувши цих помилок, ви отримаєте зростання конверсії без погіршення UX.
Технічні деталі та продуктивність
Тригерні pop-up вікна (спливаючі вікна) використовуються для підвищення конверсії. Налаштування pop-up включає JavaScript popup реалізацію та Intersection Observer popup для елементів. Для оптимізації подій mousemove використовується debounce з використанням алгоритму requestAnimationFrame для уникнення переповнення стеку. Важливо використовувати пасивні слухачі подій для оптимізації продуктивності та уникнення блокування головного потоку. Для трекінгу використовуємо dataLayer та gtag з асинхронними функціями. Для кращої продуктивності також застосовується throttling та passive event listeners.