Недавно клиент переделал checkout — конверсия упала на 20%. Мы запустили A/B-тест, который показал, что старый вариант работал лучше на 15%. Это стоило бы бизнесу миллионы при полном внедрении. A/B-тестирование — единственный способ принимать дизайнерские решения на основе данных, а не интуиции. За время работы мы провели более 200 экспериментов для интернет-магазинов, лендингов и SaaS-продуктов. Средний прирост конверсии составил 15–30%. Некоторые тесты приносили значительную дополнительную прибыль.
Без A/B-тестов каждое изменение — лотерея. Один наш клиент потратил значительный бюджет на новый дизайн главной, который просел на 8%. Тест показал бы это за 2 недели, не тратя бюджет.
Допустим, вы меняете лендинг без теста. Если конверсия падает на 10%, при 1000 посетителей в день это 100 потерянных лидов. За месяц — 3000 лидов, каждый стоит в среднем $4–6 — потери существенны. Стоимость теста значительно ниже потенциальных потерь.
Какие проблемы решает A/B-тестирование?
Часто команды уверены, что новый дизайн или CTA улучшат конверсию, но статистика показывает обратное. Например, мы тестировали изменение цвета кнопки — ожидали рост на 20%, а получили падение на 5%. Технические ошибки тоже встречаются: неправильная сегментация пользователей, утечка данных между вариантами, некорректный трекинг. Однажды мы обнаружили, что из-за неверной реализации 30% пользователей попадали в оба варианта — тест пришлось перезапускать. И классическая ловушка — преждевременная остановка теста, когда разница кажется очевидной, но выборка ещё не набрана. По данным Nielsen Norman Group, 73% тестов останавливают раньше времени, что приводит к ложным выводам.
Как мы это делаем
Каждый эксперимент проходим по схеме: аналитика → проектирование → реализация → трекинг → анализ. Используем современный стек: React 18, Next.js 14, TypeScript, Node.js, Docker. Для хранения данных — PostgreSQL и Redis. Growthbook позволяет итерировать гипотезы в 3 раза быстрее по сравнению с VWO: вы пишете логику на клиенте или сервере, а не через визуальный редактор.
Реализация через 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> ); } Почему статистическая значимость критична?
Без неё вы рискуете принять случайное колебание за победу. Перед запуском рассчитываем необходимую выборку:
# Python: расчёт sample size from statsmodels.stats.power import zt_ind_solve_power baseline_rate = 0.03 expected_effect = 0.15 # относительное улучшение lift = baseline_rate * expected_effect # 0.0045 абсолютно 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 Правило: не останавливать тест раньше запланированного размера выборки, даже если результаты выглядят хорошо. Для теста с конверсией 5% и ожидаемым улучшением 10% потребуется 6 500 пользователей на вариант — это 2-3 недели трафика для среднего сайта.
Совет: не заглядывайте в результаты ежедневно — это искажает статистику. Автоматически считайте 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 дней на комплексный с кастомной логикой. Стоимость рассчитывается индивидуально.
Закажите настройку A/B-тестирования и получите данные для роста конверсии. Свяжитесь с нами для консультации по выбору инструмента и проведению экспериментов.