Time-delayed Popup: впровадження, A/B-тестування та налаштування

Реалізація Time-delayed Popup на сайті

Уявіть: ви запускаєте рекламну кампанію, ліди потрібні вже вчора, але спливаюче вікно з'являється через 2 секунди після завантаження — користувач ще не побачив контент і закриває його. Конверсія падає, бюджет злито. Time-delayed popup вирішує цю проблему: показуємо пропозицію рівно в той момент, коли відвідувач готовий її сприйняти. При цьому не дратуємо користувача — кулдаун і A/B-тестування дозволяють знайти ідеальний баланс.

Проблеми, які ми вирішуємо

• Передчасний показ попапа: Якщо вікно з'являється занадто рано, користувач ще не встиг ознайомитися з контентом і закриває його — конверсія падає.
• Відсутність кулдауну: Без обмеження частоти показу той самий відвідувач бачить попап при кожному завантаженні сторінки, що викликає роздратування і збільшує відмови.
• Неоптимальний вибір пропозиції: Без A/B-тестування неможливо визначити, який варіант контенту (знижка, лід-магніт, колбек) працює краще для вашої аудиторії.
• Відсутність трекінгу: Без аналітики неможливо оцінити ефективність попапа і прийняти обґрунтовані рішення.

Як ми це робимо (доказ експертності)

Наш підхід базується на використанні нативного <dialog>, TypeScript та React. Ми реалізували цю схему на багатьох проєктах, і вона показала стабільне зростання конверсії на 15–30% порівняно з миттєвим показом.

Базова реалізація

// time-popup.ts interface TimePopupConfig { delayMs: number; cooldownKey: string; // ключ в localStorage cooldownMs?: number; // 0 = показати один раз назавжди onShow: () => void; } export function schedulePopup(config: TimePopupConfig): () => void { const { delayMs, cooldownKey, cooldownMs, onShow } = config; // Перевіряємо, чи потрібно показувати const lastShown = localStorage.getItem(cooldownKey); if (lastShown) { if (!cooldownMs) return () => {}; // показали один раз, більше не треба if (Date.now() - Number(lastShown) < cooldownMs) return () => {}; } const timer = setTimeout(() => { // Додаткова перевірка: користувач все ще на сторінці if (document.hidden) return; localStorage.setItem(cooldownKey, String(Date.now())); onShow(); }, delayMs); return () => clearTimeout(timer); } 

Попап з кількома варіантами контенту (A/B)

// DelayedPopup.tsx import { useEffect, useRef, useState } from 'react'; import { schedulePopup } from './time-popup'; type PopupVariant = 'discount' | 'lead-magnet' | 'callback'; const VARIANTS: Record<PopupVariant, { headline: string; body: string; cta: string; }> = { discount: { headline: 'Знижка 10% на перше замовлення', body: 'Введіть email — надішлемо промокод негайно.', cta: 'Отримати знижку', }, 'lead-magnet': { headline: 'Безкоштовний чеклист', body: '15 пунктів, які ми перевіряємо на кожному проєкті.', cta: 'Завантажити PDF', }, callback: { headline: 'Залишились питання?', body: 'Залиште номер — передзвонимо протягом 15 хвилин.', cta: 'Чекаю дзвінка', }, }; // Простий детермінований A/B: ділимо за останньою цифрою дати function pickVariant(): PopupVariant { const bucket = new Date().getDate() % 3; return (['discount', 'lead-magnet', 'callback'] as PopupVariant[])[bucket]; } export function DelayedPopup() { const [open, setOpen] = useState(false); const [variant] = useState<PopupVariant>(pickVariant); const [value, setValue] = useState(''); const [submitted, setSubmitted] = useState(false); const dialogRef = useRef<HTMLDialogElement>(null); useEffect(() => { const cleanup = schedulePopup({ delayMs: 7000, cooldownKey: 'delayed_popup_v2', cooldownMs: 3 * 24 * 60 * 60 * 1000, // раз на 3 дні onShow: () => { setOpen(true); // трекінг показу window.gtag?.('event', 'popup_shown', { popup_variant: variant, page_path: location.pathname, }); }, }); return cleanup; }, [variant]); useEffect(() => { if (open) { dialogRef.current?.showModal(); } else { dialogRef.current?.close(); } }, [open]); async function handleSubmit() { if (!value.trim()) return; await fetch('/api/popup-lead', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ value, variant, source: 'time_delayed_popup', pageUrl: location.href, }), }); window.gtag?.('event', 'popup_converted', { popup_variant: variant }); setSubmitted(true); setTimeout(() => setOpen(false), 2500); } const content = VARIANTS[variant]; const inputType = variant === 'callback' ? 'tel' : 'email'; const placeholder = variant === 'callback' ? '+380 (99) 000-00-00' : '[email protected]'; return ( <dialog ref={dialogRef} onClose={() => setOpen(false)} className="max-w-sm w-full rounded-2xl p-0 shadow-2xl backdrop:bg-black/50 animate-in fade-in slide-in-from-bottom-4" > <div className="relative p-7"> <button onClick={() => setOpen(false)} aria-label="Закрити" className="absolute top-3 right-3 w-7 h-7 flex items-center justify-center rounded-full hover:bg-gray-100 text-gray-400" > ✕ </button> {submitted ? ( <div className="py-4 text-center"> <div className="text-3xl mb-2">✅</div> <p className="font-semibold text-gray-800">Готово, чекайте!</p> </div> ) : ( <> <h2 className="text-xl font-bold text-gray-900 mb-1">{content.headline}</h2> <p className="text-sm text-gray-500 mb-5">{content.body}</p> <div className="flex gap-2"> <input type={inputType} value={value} onChange={e => setValue(e.target.value)} onKeyDown={e => e.key === 'Enter' && handleSubmit()} placeholder={placeholder} autoFocus className="flex-1 border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" /> <button onClick={handleSubmit} className="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-lg whitespace-nowrap" > {content.cta} </button> </div> <p className="mt-3 text-xs text-gray-400"> Не будемо турбувати частіше одного разу на тиждень </p> </> )} </div> </dialog> ); } 

A/B-тестування для максимальної ефективності popup

A/B-тестування дозволяє порівняти кілька варіантів контенту — знижка, лід-магніт, зворотний дзвінок — і обрати той, що приносить більше конверсій. У нашій реалізації варіанти чергуються детерміновано: кожен день показується один із трьох варіантів. Це спрощує аналіз і виключає вплив дня тижня. Результати тесту оцінюються за метриками: покази, конверсії, CTR. Оптимальна тривалість тесту — 7–14 днів.

Процес оцінки та роботи

1. Аналітика — вивчаємо поточну поведінку користувачів через Google Analytics 4 і карти кліків.
2. Проєктування — обираємо затримку, варіанти контенту, кулдаун. Робимо прототип у Figma.
3. Реалізація — використовуємо нативні <dialog> (підтримка IE не потрібна), код на TypeScript + React. Інтегруємо трекінг. Детальніше про <dialog> читайте в MDN.
4. A/B-тест — запускаємо тест на 7–14 днів, порівнюємо конверсію.
5. Деплой та оптимізація — фіксуємо найкращий варіант, доналаштовуємо під Core Web Vitals.

Що входить у роботу

Орієнтири по термінах

Термін реалізації — від 1 до 3 днів залежно від складності дизайну та необхідності A/B-тесту. Вартість визначається після аудиту.

Чек-лист типових помилок

• Занадто коротка затримка (< 3 секунд) — користувач не встигає оцінити контент.
• Відсутність кулдауну — попап дратує при кожному візиті.
• Один варіант контенту — без тестування неможливо дізнатися, що працює краще.
• Ігнорування мобільних пристроїв — на мобільних
  може закриватися випадково.

Досвід компанії

Понад 10 років на ринку веб-розробки. Реалізували 40+ проєктів для e-commerce, SaaS та корпоративних сайтів. Гарантуємо чистий код, безпеку (localStorage не зберігає чутливі дані) та повну інтеграцію з вашою CRM.

Замовте впровадження time-delayed popup — зв'яжіться з нами для оцінки вашого проєкту.