Netova
•Zespół Netova

A/B Testing - Jak testować zmiany bez zgadywania?

A/B Testing - Jak testować zmiany bez zgadywania?

"Powinniśmy zmienić przycisk na zielony."
"Nie, czerwony konwertuje lepiej."
"A może niebieski?"

Stop. Nie zgadujcie. Testujcie.

A/B testing to jedyny sposób na pewność, co działa, a co nie.

Czym jest A/B Testing?

Definicja: Pokazujesz 50% użytkowników wersję A, 50% wersję B. Mierzysz, która konwertuje lepiej.

Przykład:

  • Wersja A: "Kup teraz" (button zielony)
  • Wersja B: "Rozpocznij za darmo" (button niebieski)

Wynik: Wersja B konwertuje o 34% lepiej → wdrażasz B na stałe.

Co można testować?

1. Headlines (największy impact)

  • "Najlepsza strona w Polsce" vs "Zwiększ sprzedaż o 300%"
  • Emocjonalne vs racjonalne

2. CTA (Call to Action)

  • "Kup teraz" vs "Wypróbuj za darmo"
  • Kolor przycisku
  • Rozmiar i pozycja

3. Formularze

  • 3 pola vs 7 pól
  • Z/bez phone number
  • Vertical vs horizontal layout

4. Pricing

  • "$99/month" vs "$1188/year (save 20%)"
  • Pokaż/ukryj plan darmowy

5. Images & Video

  • Stockowe foto vs realne zdjęcie zespołu
  • Z/bez video explainer

6. Social Proof

  • Liczba klientów vs testimonials vs logos firm

7. Navigation

  • Menu zawsze widoczne vs hamburger
  • 5 pozycji vs 8 pozycji

Narzędzia do A/B testingu (2026)

1. Vercel Edge Config + Middleware

// middleware.ts
import { next } from "@vercel/edge";

export const config = {
  matcher: "/",
};

export default function middleware(req) {
  const bucket = Math.random() < 0.5 ? "A" : "B";

  const response = next();
  response.cookies.set("ab-test-variant", bucket);

  return response;
}

Component:

// app/page.tsx
import { cookies } from "next/headers";

export default async function HomePage() {
  const cookieStore = await cookies();
  const variant = cookieStore.get("ab-test-variant")?.value || "A";

  const cta = variant === "A" ? "Kup teraz" : "Wypróbuj za darmo";

  return { cta };
}

2. PostHog (Recommended)

Zalety:

  • Open-source
  • Feature flags + analytics
  • Session replay
  • Privacy-friendly

Setup:

npm install posthog-js

// app/providers.tsx
"use client";
import posthog from "posthog-js";
import { PostHogProvider } from "posthog-js/react";

if (typeof window !== "undefined") {
  posthog.init("YOUR_PROJECT_KEY", {
    api_host: "https://app.posthog.com",
  });
}

export function PHProvider({ children }) {
  return { children };
}

A/B Test:

"use client";
import { useFeatureFlagVariantKey } from "posthog-js/react";

export default function CTAButton() {
  const variant = useFeatureFlagVariantKey("cta-test");

  const buttonText = variant === "test" ? "Rozpocznij za darmo" : "Kup teraz";

  return { buttonText };
}

3. Optimizely

Dla enterprise ($50k+/rok)

4. VWO (Visual Website Optimizer)

No-code editor ($199+/miesiąc)

5. Google Optimize (deprecated, ale fork istnieje)

Praktyczny przykład: Optimizing Landing Page

Test: Hero CTA

Hipoteza: "Wypróbuj za darmo" konwertuje lepiej niż "Kup teraz"

Setup:

// app/page.tsx
import { cookies } from 'next/headers';

export default async function LandingPage() {
  const cookieStore = await cookies();
  const variant = cookieStore.get('hero-cta-test')?.value || 'control';

  const heroData = {
    control: {
      headline: 'Najlepsza platforma do zarządzania projektami',
      cta: 'Kup teraz',
      buttonColor: 'bg-green-600'
    },
    variant: {
      headline: 'Zarządzaj projektami 3x szybciej',
      cta: 'Wypróbuj za darmo',
      buttonColor: 'bg-blue-600'
    }
  };

  const content = heroData[variant];

  return (

      {content.headline}

        {content.cta}


  );
}

Tracking:

"use client";

export function CTAButton({ variant, text }) {
  const handleClick = () => {
    // Track conversion
    fetch("/api/analytics/conversion", {
      method: "POST",
      body: JSON.stringify({
        event: "cta_click",
        variant: variant,
        timestamp: Date.now(),
      }),
    });
  };

  return { text };
}

Statystyczna istotność - Kiedy test jest gotowy?

Minimalne wymagania:

  • Minimum 100 konwersji na wariant
  • Confidence level: 95%
  • Test duration: min 1 tydzień (żeby pokryć różne dni)

Kalkulator:

// Uproszczony przykład
function calculateSignificance(
  controlConv,
  testConv,
  controlVisits,
  testVisits,
) {
  const controlRate = controlConv / controlVisits;
  const testRate = testConv / testVisits;
  const improvement = ((testRate - controlRate) / controlRate) * 100;

  // Z-score calculation (simplified)
  const pooledRate = (controlConv + testConv) / (controlVisits + testVisits);
  const se = Math.sqrt(
    pooledRate * (1 - pooledRate) * (1 / controlVisits + 1 / testVisits),
  );
  const zScore = (testRate - controlRate) / se;

  // p-value approximation
  const significant = Math.abs(zScore) > 1.96; // 95% confidence

  return { improvement, significant, zScore };
}

Case Study: E-commerce Checkout

Test: Uproszczenie checkout flow

Kontrola (A):

  • 5 kroków
  • Obowiązkowe konto
  • 12 pól formularza

Wariant (B):

  • 3 kroki
  • Guest checkout
  • 6 pól formularza

Rezultaty (2 tygodnie, 50k wizyt):

|------------------------------------------------------------|
| Metryka                | Kontrola A | Wariant B | Zmiana   |
|------------------------|------------|-----------|----------|
| Conversion rate        | 2.1%       | 3.4%      | +61%     |
| Avg. time to complete  | 4m 20s     | 2m 45s    | -37%     |
| Cart abandonment       | 68%        | 51%       | -17 p.p. |
| Mobile conversion      | 1.2%       | 2.8%      | +133%    |
|------------------------------------------------------------|

Wartość biznesowa:
+61% konwersja przy 50k wizyt/miesiąc = +650 zamówień/miesiąc

Przy średniej wartości zamówienia 250 zł = +162,500 zł przychodu/miesiąc

Winner: Wariant B (wdrożony na stałe)

Częste błędy w A/B testingu

❌ Błąd 1: Za krótki test

Problem: 2 dni testowania, 50 konwersji
Fix: Min 1 tydzień, min 100 konwersji

❌ Błąd 2: Testowanie wielu rzeczy naraz

Problem: Zmieniasz headline + CTA + obrazek
Fix: Testuj jedną zmienną na raz

❌ Błąd 3: Ignorowanie segmentów

Problem: Desktop vs Mobile mogą mieć różne wyniki
Fix: Analizuj per segment

❌ Błąd 4: Podglądanie wyników co godzinę

Problem: Random variance może wprowadzać w błąd
Fix: Poczekaj do końca testu

❌ Błąd 5: Brak hipotezy

Problem: Testujesz "bo tak"
Fix: Zawsze zapisuj hipotezę + oczekiwany outcome

Multivariate Testing (gdy A/B to za mało)

Przykład: Testujesz jednocześnie:

  • 2 wersje headline
  • 2 wersje CTA
  • 2 wersje image

Kombinacje: 2 × 2 × 2 = 8 wariantów

Wymagany traffic: 8x więcej niż A/B test

Kiedy używać:
Tylko przy dużym traffic (100k+ wizyt/miesiąc)

Narzędzia do kalkulacji

1. Sample Size Calculator

🔗 abtestguide.com/calc/

Oblicza ile wizyt potrzebujesz.

2. Significance Calculator

🔗 abtestguide.com/bayesian/

Sprawdza czy wyniki są statystycznie istotne.

Best Practices 2026

✅ Test continously - zawsze miej aktywny test
✅ Document everything - hipoteza, wyniki, learnings
✅ Start with high-impact areas - hero, pricing, checkout
✅ Mobile-first - testuj mobile osobno
✅ User research first - zrozum problem przed testem
✅ Ethical testing - nie testuj na krytycznych funkcjach (accessibility, security)

Checklist A/B Test

✅ Jasna hipoteza zapisana
✅ Jedna zmienna testowana
✅ Tracking setup (konwersje + metrics)
✅ Sample size calculated
✅ Test duration planned (min 1 tydzień)
✅ Segmentation defined
✅ Success criteria defined
✅ Backup plan jeśli test fail

Podsumowanie

A/B testing to nie luksus. To konieczność w 2026. Każda decyzja o UI/UX powinna być poparta danymi, nie opinią.

W Netova każdy projekt większy niż landing page otrzymuje A/B testing setup. Efekt? Średnio +45% konwersja w ciągu 3 miesięcy optymalizacji.

Wdrożymy A/B testing na Twojej stronie

← Wróć do listy artykułów