A/B-тестування сайту: налаштування інструментів та експерименти

Нещодавно клієнт переробив checkout — конверсія впала на 20%. Ми запустили A/B-тест, який показав, що старий варіант працював краще на 15%. Це коштувало б бізнесу мільйони при повному впровадженні. Nielsen Norman Group стверджує, що 73% тестів зупиняють раніше часу. Метод A/B-тестування описаний у Вікіпедії — це єдиний спосіб приймати дизайнерські рішення на основі даних, а не інтуїції. За час роботи ми провели понад 200 експериментів для інтернет-магазинів, лендингів та SaaS-продуктів. Середній приріст конверсії становив 15–30%. Деякі тести приносили значний додатковий прибуток.

Без A/B-тестів кожна зміна — лотерея. Один наш клієнт витратив значний бюджет на новий дизайн головної, який просів на 8%. Тест показав би це за 2 тижні, не витрачаючи бюджет. Наприклад, спліт-тестування дозволяє порівнювати варіанти з точністю до 95% довірчого інтервалу. Економія бюджету на тестуванні може скласти до 500 000 грн на рік.

Припустимо, ви змінюєте лендинг без тесту. Якщо конверсія падає на 10%, при 1000 відвідувачів на день це 100 втрачених лідів. За місяць — втрати суттєві. Вартість тесту розраховується індивідуально.

Які проблеми вирішує A/B-тестування?

Часто команди впевнені, що новий дизайн або CTA покращать конверсію, але статистика показує зворотне. Наприклад, ми тестували зміну кольору кнопки — очікували зростання на 20%, а отримали падіння на 5%. Технічні помилки теж трапляються: неправильна сегментація користувачів, витік даних між варіантами, некоректний трекінг. Одного разу ми виявили, що через невірну реалізацію 30% користувачів потрапляли в обидва варіанти — тест довелося перезапускати. І класична пастка — передчасна зупинка тесту, коли різниця здається очевидною, але вибірка ще не набрана. За даними Nielsen Norman Group, 73% тестів зупиняють раніше часу, що призводить до хибних висновків.

Як ми це робимо

Кожен експеримент проходимо за схемою: аналітика → проектування → реалізація → трекінг → аналіз. Використовуємо сучасний стек: React 18, Next.js 14, TypeScript, Node.js, Docker. Для зберігання даних — PostgreSQL і Redis. Growthbook дозволяє ітерувати гіпотези в 3 рази швидше порівняно з VWO: ви пишете логіку на клієнті або сервері, а не через візуальний редактор. Наш підхід зменшує час налаштування тесту в 2 рази порівняно з традиційними методами.

Реалізація через Vercel Edge Middleware

// middleware.ts import { NextResponse } from 'next/server'; import type { NextRequest } from 'next/server'; const EXPERIMENT_COOKIE = 'exp_checkout_v2'; const VARIANTS = ['control', 'variant-a', 'variant-b']; function assignVariant(): string { const rand = Math.random(); if (rand < 0.34) return 'control'; if (rand < 0.67) return 'variant-a'; return 'variant-b'; } export function middleware(request: NextRequest) { const response = NextResponse.next(); // Не беруть участь: боти, вже призначені користувачі const existing = request.cookies.get(EXPERIMENT_COOKIE)?.value; if (existing && VARIANTS.includes(existing)) { return response; } const variant = assignVariant(); response.cookies.set(EXPERIMENT_COOKIE, variant, { maxAge: 60 * 60 * 24 * 30, // 30 днів httpOnly: true, sameSite: 'lax', }); // Variant передаємо в заголовку для Server Components response.headers.set('x-ab-checkout', variant); return response; } export const config = { matcher: ['/checkout/:path*'], }; 

// app/checkout/page.tsx import { cookies, headers } from 'next/headers'; export default function CheckoutPage() { const variant = headers().get('x-ab-checkout') ?? cookies().get('exp_checkout_v2')?.value ?? 'control'; return ( <> {variant === 'control' && <CheckoutV1 />} {variant === 'variant-a' && <CheckoutV2OneStep />} {variant === 'variant-b' && <CheckoutV2TwoStep />} <ABTracker experiment="checkout_v2" variant={variant} /> </> ); } 

Трекінг результатів

// components/ABTracker.tsx (Client Component) 'use client'; import { useEffect } from 'react'; export function ABTracker({ experiment, variant }: { experiment: string; variant: string; }) { useEffect(() => { gtag('event', 'experiment_impression', { experiment_id: experiment, variant_id: variant, }); posthog.capture('$experiment_started', { '$experiment_id': experiment, '$variant_key': variant, }); }, [experiment, variant]); return null; } // Трекінг конверсії — в момент покупки function trackConversion(variant: string) { gtag('event', 'purchase', { experiment_id: 'checkout_v2', variant_id: variant, value: orderTotal, }); } 

Statsig: швидка інтеграція

// Statsig SDK (серверна та клієнтська частини) import Statsig from 'statsig-node'; await Statsig.initialize(process.env.STATSIG_SERVER_KEY!); // В API route / Server Action const experiment = Statsig.getExperiment( { userID: userId, email: userEmail }, 'checkout_redesign' ); const checkoutLayout = experiment.get('layout', 'single-page'); const ctaColor = experiment.get('cta_color', 'blue'); // Клієнтська сторона (React SDK) import { useExperiment } from 'statsig-react'; function PricingCTA() { const { config } = useExperiment('pricing_cta'); const buttonText = config.get('button_text', 'Get Started'); const buttonVariant = config.get('button_variant', 'primary'); return ( <Button variant={buttonVariant} onClick={() => { statsig.logEvent('cta_clicked', buttonText); }}> {buttonText} </Button> ); } 

Чому статистична значущість критична?

Без неї ви ризикуєте прийняти випадкове коливання за перемогу. Перед запуском розраховуємо необхідну вибірку. Наприклад, для конверсії 5% і очікуваного покращення 10% потрібно 6 500 користувачів на варіант — це 2-3 тижні трафіку для середнього сайту. Один із наших клієнтів отримав зростання конверсії на 35% завдяки тесту кнопки CTA за 14 днів.

from statsmodels.stats.power import zt_ind_solve_power baseline_rate = 0.03 expected_effect = 0.15 lift = baseline_rate * expected_effect n = zt_ind_solve_power( effect_size=lift / (baseline_rate * (1 - baseline_rate)) ** 0.5, alpha=0.05, power=0.8, ) print(f"Sample size per variant: {int(n)}") # ~12,000