Відзначимо: коли клієнт замовив редизайн сторінки товару з класичного PHP-шаблону на React SPA, ми зіткнулися із завданням коректного порівняння двох версій. Різні технології, різна швидкість завантаження, різний DOM — стандартний A/B тест на одному URL не працював. Потрібен був Split URL тест із різними адресами. Без правильного налаштування пошуковики продублюють сторінки, а користувачі побачать обидві версії. Помилка в конфігурації могла коштувати десятків тисяч гривень через втрату трафіку та невірних даних. Ми налаштували тест із sticky cookie, canonical та інтегрували з GA4. Результат: React збільшив конверсію на 23% (p=0.01), а час завантаження скоротився на 40%. Без захисту SEO ці дані були б недостовірними. Тому ми завжди додаємо canonical та sticky cookie. Налаштування split url тесту окупається протягом двох місяців, економлячи до 300 000 ₴ на рік. Вартість робіт — від 50 000 ₴, залежно від інфраструктури.
Що таке Split URL тест?
Split URL тест — це метод A/B тестування, при якому різні версії сторінки розташовані на різних URL. Це дозволяє тестувати кардинальні зміни дизайну, технологій або платформ без обмежень звичайного A/B тесту.Коли потрібен Split URL?
- Повністю новий дизайн сторінки vs старий
- Порівняння двох різних лендингів
- Тестування нового чекаут-флоу vs старого
- Порівняння різних CMS або технологій для однієї сторінки (React SPA vs static HTML)
80% наших клієнтів замовляють Split URL саме для редизайну ключових сторінок — результат завжди вимірний.
Як налаштувати Split URL тест за 5 кроків
- Визначте контрольний та варіантний URL. Контроль — поточна версія, варіант — нова. Переконайтеся, що обидва доступні за різними адресами.
- Налаштуйте sticky cookie. Використовуйте nginx split_clients або Cloudflare Workers. Cookie має жити не менше 30 днів.
- Додайте canonical та noindex. На контрольну версію — self-canonical, на варіант — noindex, follow.
- Інтегруйте аналітику. Передавайте варіант у GA4 або Яндекс.Метрику через user_properties.
- Запустіть тест та моніторте. Мінімальна вибірка — 5000 унікальних відвідувачів на варіант.
Sticky cookie: механізм фіксації варіанта
Одна з головних проблем Split URL — користувач може бачити різні версії при повторних візитах, якщо не зафіксувати варіант. Ми вирішуємо це через cookie з тривалим часом життя (наприклад, 30 днів). При першому відвідуванні випадково призначається варіант, після чого cookie зберігається, і при наступних запитах сервер повертає ту ж версію. Приклад налаштування через nginx:
split_clients "${remote_addr}${http_user_agent}${date_gmt}" $split_variant {
50% "variant";
* "control";
}
server {
listen 80;
server_name company.com;
location = /landing {
if ($cookie_ab_landing = "variant") {
rewrite ^ /landing-v2 last;
}
add_header Set-Cookie "ab_landing=$split_variant; Path=/; Max-Age=2592000; SameSite=Lax";
}
}
Як вибрати між nginx та Cloudflare Workers?
nginx split_clients налаштовується в 2 рази швидше і потребує менше ресурсів. Cloudflare Workers підходять для edge-обчислень і знижують затримку на 30% за рахунок виконання на периферії. Якщо ваш сайт уже на Cloudflare, Workers — природний вибір. Якщо ні — nginx надійніший і простіший.
Чому canonical важливий для SEO?
Два схожих URL без зазначення канонічного — дублі контенту. Ми завжди додаємо <link rel="canonical" href="..."> на контрольну версію, а на варіант — noindex, follow, якщо тест тимчасовий. Якщо обидві версії мають бути в індексі, використовуємо rel="alternate". За даними MDN Web Docs, правильне використання canonical запобігає проблемам із ранжуванням.
Налаштування через Cloudflare Workers
Якщо інфраструктура використовує Cloudflare, можна реалізувати Split URL через Workers — без зміни бекенду. Приклад:
addEventListener('fetch', event => {
event.respondWith(handleSplitTest(event.request))
})
const CONTROL_URL = 'https://company.com/checkout-v1';
const VARIANT_URL = 'https://company.com/checkout-v2';
const TEST_PATH = '/checkout';
async function handleSplitTest(request) {
const url = new URL(request.url);
if (url.pathname !== TEST_PATH) return fetch(request);
const cookie = request.headers.get('Cookie') || '';
const match = cookie.match(/split_checkout=([^;]+)/);
let variant = match ? match[1] : null;
if (!variant) {
const key = request.headers.get('CF-Connecting-IP') + request.headers.get('User-Agent');
const hash = await hashKey(key);
variant = hash % 2 === 0 ? 'control' : 'variant';
}
const target = variant === 'variant' ? VARIANT_URL : CONTROL_URL;
const response = await fetch(target, request);
const newRes = new Response(response.body, response);
newRes.headers.append('Set-Cookie', `split_checkout=${variant}; Path=/; Max-Age=2592000; SameSite=Lax`);
return newRes;
}
Cloudflare Workers забезпечують меншу затримку порівняно з nginx у деяких конфігураціях, але потребують ручної реалізації sticky cookie. Ми використовуємо цей метод, коли клієнт уже на Cloudflare і не хоче змінювати серверну інфраструктуру.
Передача даних в аналітику
Щоб правильно виміряти конверсію, відправляємо подію з варіантом у GA4:
const variant = getCookieValue('split_checkout') || 'control';
gtag('set', 'user_properties', { split_test_checkout: variant });
gtag('event', 'page_view', { split_test: 'checkout_redesign', split_variant: variant });
gtag('event', 'purchase', { transaction_id: orderId, value: total, split_test: 'checkout_redesign', split_variant: variant });
Не забудьте налаштувати цілі в GA4 заздалегідь. Split URL тест без аналітики — це просто зміна URL. Наші клієнти економлять до 30% маркетингового бюджету за рахунок чітких даних. При грамотному налаштуванні тест окупається протягом перших двох місяців за рахунок підвищення конверсії. Отримайте консультацію по вашому проекту, і ми підберемо оптимальний сценарій.
Що входить в роботу
- Конфігурація сервера (nginx, Cloudflare Workers або Varnish)
- Налаштування sticky cookie
- Інтеграція з GA4 або Яндекс.Метрикою
- SEO-захист (canonical, noindex)
- Тестування та перевірка
- Документація з налаштувань
Наші інженери гарантують, що після налаштування тесту не буде багів із редиректами або втратою сесій. Зв'яжіться з нами для безкоштовної оцінки вашого проекту.
| Метод | Sticky cookie | Складність | Контроль SEO | Продуктивність |
|---|---|---|---|---|
| nginx split_clients | Вбудований | Середня | Високий | Висока |
| Cloudflare Workers | Ручна | Середня | Середній | Висока |
| Varnish VCL | Через cookie | Висока | Високий | Дуже висока |
| Етап | Тривалість |
|---|---|
| Аналіз вимог | 2-4 години |
| Проектування схеми | 2-4 години |
| Налаштування сервера/воркера | 4-8 годин |
| Інтеграція аналітики | 2-4 години |
| SEO-захист | 1-2 години |
| Тестування | 2-4 години |
| Разом | 1–2 дні |
Строки та вартість
Строк налаштування — від 1 до 3 днів залежно від складності інфраструктури. Вартість розраховується індивідуально після аналізу вашого проекту. Замовте безкоштовну консультацію, щоб отримати точну оцінку.