Нещодавно клієнт переробив 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
Правило: не зупиняти тест раніше запланованого розміру вибірки, навіть якщо результати виглядають добре.
Порада: не заглядайте в результати щодня — це спотворює статистику. Автоматично рахуйте p-value і зупиняйте тест тільки при досягненні запланованої вибірки. Використовуйте sequential testing, якщо потрібні проміжні рішення.
Як обрати інструмент для A/B-тестування?
| Інструмент | Тип | Найкращий для |
|---|---|---|
| Growthbook | Open source / SaaS | Технічні команди, self-hosted |
| Statsig | SaaS | Швидкий старт, інтеграція з аналітикою |
| Optimizely | Enterprise SaaS | Великі компанії, складні експерименти |
| VWO | SaaS | Маркетингові команди без dev |
| Vercel Edge Experiments | PaaS | Next.js на Vercel |
| Власна реалізація | - | Повний контроль, мінімальний overhead |
Які метрики відстежувати в A/B-тесті?
| Метрика | Тип | Приклад |
|---|---|---|
| Первинна (Primary) | Цільова дія | Конверсія в покупку, реєстрація |
| Вторинна (Secondary) | Залученість | Час на сайті, перегляд сторінок |
| Бізнесова (Business) | Дохід, LTV | Середній чек, повернення |
| Побічна (Guardrail) | Ризик | Відмови, помилки |
Усі метрики мають бути задані до старту експерименту. Відстежуйте їх в GA4: використовуйте events experiment_impression та experiment_conversion.
Що входить в роботу
- Налаштування інструменту A/B-тестування під ваш стек (Growthbook, Statsig, VWO, Optimizely або custom).
- Реалізація розподілу варіантів на backend/edge з гарантією консистентності.
- Інтеграція трекінгу подій в GA4, PostHog, Amplitude.
- Розрахунок необхідного розміру вибірки та тривалості тесту.
- Документація результатів та рекомендації щодо подальших експериментів.
- Навчання команди: як запускати тести та інтерпретувати результати.
Процес роботи
- Аналітика: вивчаємо поточні метрики, виявляємо вузькі місця, формулюємо гіпотезу.
- Проектування: обираємо інструмент, визначаємо варіанти та метрики успіху.
- Реалізація: інтегруємо розподіл та трекінг, налаштовуємо дашборди.
- Запуск: починаємо тест, контролюємо коректність даних.
- Аналіз: після набору вибірки — статистична перевірка, формування звіту.
Терміни: від 2 до 4 робочих днів на простий тест, 5–10 днів на комплексний з кастомною логікою. Вартість розраховується індивідуально. Ми пропонуємо налаштування під ключ за 2–4 дні. Наша команда має 5+ років досвіду та реалізувала понад 200 експериментів. Оцініть вартість вашого проекту — напишіть нам для консультації щодо вибору інструменту та проведення експериментів.