A/B-тестирование сайта: настройка инструментов и эксперименты

Недавно клиент переделал 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-тестирования?

Какие метрики отслеживать в A/B-тесте?

Все метрики должны быть заданы до старта эксперимента. Отслеживайте их в GA4: используйте events experiment_impression и experiment_conversion.

Что входит в работу

• Настройка инструмента A/B-тестирования под ваш стек (Growthbook, Statsig, VWO, Optimizely или custom).
• Реализация распределения вариантов на backend/edge с гарантией консистентности.
• Интеграция трекинга событий в GA4, PostHog, Amplitude.
• Расчёт необходимого размера выборки и длительности теста.
• Документация результатов и рекомендации по дальнейшим экспериментам.
• Обучение команды: как запускать тесты и интерпретировать результаты.

Процесс работы

1. Аналитика: изучаем текущие метрики, выявляем узкие места, формулируем гипотезу.
2. Проектирование: выбираем инструмент, определяем варианты и метрики успеха.
3. Реализация: интегрируем распределение и трекинг, настраиваем дашборды.
4. Запуск: начинаем тест, контролируем корректность данных.
5. Анализ: после набора выборки — статистическая проверка, формирование отчёта.

Сроки: от 2 до 4 рабочих дней на простой тест, 5–10 дней на комплексный с кастомной логикой. Стоимость рассчитывается индивидуально.

Закажите настройку A/B-тестирования и получите данные для роста конверсии. Свяжитесь с нами для консультации по выбору инструмента и проведению экспериментов.