Five ways to A/B test
with Astro
Each experiment is live — powered by a Netlify Edge Function.
The server assigns variants before any HTML is sent. Zero flicker, zero JS overhead.
Hero Layout Test
Two completely different page layouts behind the same URL. The Netlify edge function rewrites /hero → /hero-b transparently. No JavaScript required.
- Control: Single-column — "Ship faster with data"
- Variant B: Two-column with feature cards — "Build what users actually want"
Pricing Page Test
Two entirely separate pricing pages at different URLs. The edge function sends half the traffic to /pricing-b — a completely different pricing structure with a billing toggle.
- Control: 3-tier grid (Free / Starter / Growth)
- Variant B: 2-tier with annual billing toggle
Edge Rewrite Explainer
Visual walkthrough of how the edge function intercepts a request and rewrites the URL server-side — browser sees no change.
- Control: Light page — steps shown on white background
- Variant B: Dark page — same steps, navy background
SDK Button Style Test
No edge rewrite — just searchParams. The server reads the UTM parameter and renders a different button style. Same URL, no cookies.
- Control: Outlined button (border only)
- Variant B: Filled terracotta button — add ?utm_text=variation-1
Combined Layers
Two independent layers: edge controls the page layout, SDK controls the button style. Four possible combinations.
- Layer 1 (Edge): single-col control vs two-col variant B
- Layer 2 (SDK): outlined vs filled button via ?utm_text
Clear your cookies to be re-assigned. Edge experiments use a ky_ cookie. SDK experiments use URL params.