A/B Testing Landing Pages

Übersicht

Dieses System ermöglicht es, mehrere Landing Pages unter /lp/<name> zu erstellen, die über verschiedene Werbekampagnen (Meta Ads, Google Ads etc.) verlinkt werden können. Jede LP ist eine eigenständige Astro-Seite mit vollem Design-Freiraum.

Cookie-Mechanik: Wenn ein User eine LP besucht, wird ein Cookie lp=<name> gesetzt (90 Tage). Bei erneutem Besuch von / wird der User automatisch auf “seine” LP weitergeleitet. So sieht er immer die gleiche Variante.

Neue Landing Page erstellen

1. Ordner anlegen

src/pages/lp/<name>/index.astro

Die Seite ist dann unter https://flexi-servers.com/lp/<name> erreichbar.

---
// Set LP cookie so the user always returns to this variant
Astro.cookies.set('lp', '<name>', { path: '/', maxAge: 60 * 60 * 24 * 90 });
---

3. PendingServerScript einbinden (falls ServerConfigurator genutzt wird)

---
import PendingServerScript from '../../../components/PendingServerScript.astro';
---

<!-- Im <head> -->
<PendingServerScript />

Dies ist nötig, damit der Server-Erstellungs-Flow nach der Registrierung funktioniert.

4. Design frei gestalten

Die Seite ist komplett eigenständig. Du kannst:

Eigene Styles, Layouts, Sections verwenden
Bestehende Komponenten importieren (HeroSection, LandingPageSections, ServerConfigurator)
Komplett neue Komponenten erstellen
Eigene SEO-Meta-Tags setzen

Verzeichnisstruktur

src/pages/
  index.astro                          ← Haupt-LP (prüft Cookie, leitet ggf. weiter)
  lp/
    README.md                          ← Diese Datei
    minecraft/
      index.astro                      ← Beispiel-Variante (Kopie der Haupt-LP)
    <deine-variante>/
      index.astro                      ← Deine neue Variante
src/components/
  PendingServerScript.astro            ← Shared: Server-Erstellung nach Registrierung

Wiederverwendbare Komponenten

Komponente	Pfad	Beschreibung
`PendingServerScript`	`src/components/PendingServerScript.astro`	Handles Server-Erstellung nach Registrierung
`HeroSection`	`src/pages/_components/landing/HeroSection.tsx`	Hero mit Platform-Carousel + Konfigurator
`LandingPageSections`	`src/pages/_components/landing/LandingPageSections.astro`	Marketing-Sections (Preise, Features, FAQ)
`ServerConfigurator`	`src/pages/_components/configurator/ServerConfigurator.tsx`	6-Schritt Server-Konfiguration
`TutorialOverlay`	`src/components/tutorial/TutorialOverlay.astro`	Tutorial-Overlay

Server-Erstellungs-Flow

Der Flow funktioniert automatisch auf jeder LP, solange <PendingServerScript /> eingebunden ist:

User konfiguriert Server im ServerConfigurator (nicht eingeloggt)
Daten werden in sessionStorage.pendingServer gespeichert
Redirect zu /register?redirect=/lp/<name>
User registriert sich → Redirect zurück mit ?reg_success=1
PendingServerScript erstellt den Server via API
User wird zu /server/<id>/ weitergeleitet

Die Haupt-LP (/) prüft im Frontmatter:

Cookie 'lp' vorhanden? → Redirect zu /lp/<cookie-value>
Kein Cookie?           → Normale Haupt-LP anzeigen

Um den Cookie zu löschen (z.B. für Tests), den Cookie lp im Browser entfernen.

SEO-Hinweise

Jede LP sollte eine eigene Canonical URL haben (/lp/<name>)
Eigene Meta-Tags (Title, Description, OG-Tags) pro Variante setzen
Strukturierte Daten (JSON-LD) können pro Variante angepasst werden

Tracking

Jede LP kann eigene Tracking-Events feuern. Die bestehenden Scripts (Clarity, Google Ads, Meta Pixel) sind in der Beispiel-LP bereits enthalten und können pro Variante angepasst werden.