managarten/memoro/apps/landing/POSTHOG_SETUP.md

PostHog A/B Testing Setup

Dieses Dokument beschreibt die PostHog-Integration für A/B-Testing auf der Memoro-Website.

1. Initiale Einrichtung

PostHog-Account erstellen

1. Gehe zu PostHog EU
2. Erstelle einen Account (EU-Region für GDPR-Compliance)
3. Erstelle ein neues Projekt "Memoro Landing"

Environment-Variablen

Erstelle eine .env-Datei basierend auf .env.example:

PUBLIC_POSTHOG_KEY=phc_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Testen der Integration

1. Starte den Dev-Server: npm run dev
2. Akzeptiere Analytics-Cookies im Cookie-Banner
3. Öffne die Browser-Konsole und prüfe: window.posthog sollte verfügbar sein
4. Überprüfe im PostHog-Dashboard, ob Events ankommen

2. A/B-Tests erstellen

Im PostHog-Dashboard

1. Navigiere zu "Feature Flags" → "New Feature Flag"
2. Erstelle ein neues Flag, z.B. hero-cta-test
3. Konfiguriere die Varianten:
   • Control: Default (kein Wert)
   • Variant B: variant-b
4. Setze die Rollout-Percentage (z.B. 50/50)

Im Code implementieren

Option 1: Fertige Experiment-Komponente nutzen

---
import HeroCtaExperiment from '../components/experiments/HeroCtaExperiment.astro';
---

<HeroCtaExperiment />

Option 2: Custom Implementation

<div id="my-experiment" data-experiment="my-test">
  <!-- Default content -->
</div>

<script>
  import { getExperiment, trackEvent } from '../utils/experiments';
  
  const variant = await getExperiment('my-test');
  if (variant === 'variant-b') {
    // Apply variant B changes
  }
</script>

3. Verfügbare Utilities

getExperiment(key)

Holt die aktuelle Variante für einen Test:

const variant = await getExperiment('hero-cta-test');
// Returns: null | 'control' | 'variant-b' | ...

trackEvent(name, properties)

Trackt ein Custom Event:

trackEvent('button_clicked', {
  button_id: 'download-cta',
  page: 'home'
});

trackExperimentConversion(experiment, type)

Trackt eine Conversion für einen A/B-Test:

trackExperimentConversion('hero-cta-test', 'download_click');

applyExperimentClasses(elementId, experimentKey, variantClasses)

Wendet CSS-Klassen basierend auf der Variante an:

applyExperimentClasses('hero-section', 'hero-test', {
  'control': 'bg-blue-500',
  'variant-b': 'bg-green-500'
});

4. Best Practices

Performance

• PostHog lädt nur nach Cookie-Consent
• Script ist asynchron und blockiert nicht
• Feature Flags werden gecached

GDPR-Compliance

• Analytics nur mit expliziter Zustimmung
• EU-Server verwenden
• person_profiles: 'identified_only' für anonyme Nutzer

Testing-Strategie

1. Start klein: Beginne mit unkritischen Elementen
2. Messe richtig: Definiere klare Success-Metriken
3. Dokumentiere: Halte Tests und Ergebnisse fest
4. Iteriere: Nutze Learnings für neue Tests

5. Geplante A/B-Tests

Phase 1 (Sofort möglich)

• Hero CTA: "App herunterladen" vs. "Kostenlos testen"
• Download Button Position: Rechts vs. Links in Navigation
• Testimonial Position: Oben vs. Unten auf Homepage

Phase 2 (Nach ersten Learnings)

• Pricing Layout: Grid vs. Tabelle
• Feature-Reihenfolge: Verschiedene Priorisierungen
• Formulare: Anzahl der Felder reduzieren

6. Monitoring & Analyse

PostHog Dashboard

• Experiments: Übersicht aller laufenden Tests
• Feature Flags: Status und Rollout-Percentage
• Insights: Custom Dashboards für Conversions

Wichtige Metriken

• Conversion Rate (Download-Klicks)
• Bounce Rate pro Variante
• Time on Page
• Scroll-Tiefe

7. Troubleshooting

PostHog lädt nicht

1. Prüfe Cookie-Consent Status
2. Checke Browser-Konsole für Fehler
3. Verifiziere API-Key in .env

Feature Flag gibt null zurück

1. Stelle sicher, dass PostHog geladen ist
2. Prüfe Flag-Name (Case-sensitive!)
3. Checke Rollout-Settings im Dashboard

Events werden nicht getrackt

1. Öffne Network-Tab und suche nach posthog.com/e/
2. Prüfe, ob autocapture: false gesetzt ist
3. Nutze posthog.debug() für Details

8. Migration von Plausible

Aktuell laufen Plausible und PostHog parallel. Nach 2-4 Wochen:

1. Vergleiche Metriken beider Tools
2. Stelle sicher, dass PostHog alle benötigten Daten erfasst
3. Entferne Plausible-Komponente
4. Update Cookie-Consent Beschreibung
5. Entferne Plausible DNS-Prefetch

Support

Bei Fragen oder Problemen:

• PostHog Docs: https://posthog.com/docs
• Astro + PostHog: https://posthog.com/tutorials/astro-ab-tests