"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

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