managarten/memoro/apps/landing/docs/posthog-ab-testing-implementation.md

PostHog A/B-Testing Implementation für Memoro

Stand: 23. Juli 2025
Autor: Development Team
Status: ✅ Aktiv

Übersicht

Wir haben PostHog als Analytics- und A/B-Testing-Plattform für die Memoro-Landingpage integriert. PostHog läuft parallel zu Plausible Analytics und bietet erweiterte Funktionen für Experimente, Feature Flags und detaillierte User-Insights.

Technische Implementation

1. PostHog-Komponente (src/components/PostHog.astro)

Die PostHog-Integration ist GDPR-konform implementiert:

• Lädt nur nach Cookie-Consent: Respektiert die Nutzer-Entscheidung
• EU-Server: Daten werden in der EU gespeichert
• Anonyme Profile: person_profiles: 'identified_only'
• Event-basiertes Tracking: Keine automatische Erfassung sensibler Daten

Wichtige Konfiguration:

posthog.init(PROJECT_KEY, {
  api_host: 'https://eu.posthog.com',
  person_profiles: 'identified_only',
  capture_pageview: true,
  capture_pageleave: true,
  autocapture: false // Volle Kontrolle über Events
});

2. Experiment Utilities (src/utils/experiments.ts)

Zentrale Funktionen für A/B-Tests:

• getExperiment(key): Holt die aktuelle Variante
• trackEvent(name, properties): Sendet Custom Events
• trackExperimentConversion(experiment, type): Trackt Conversions
• applyExperimentClasses(): CSS-basierte Varianten

3. Cookie-Consent Integration

• PostHog wird in der Analytics-Kategorie behandelt
• UI-Texte erwähnen explizit "Plausible & PostHog"
• Opt-Out wird respektiert

Implementierte A/B-Tests

1. Hero CTA Test (hero-cta-test)

Ziel: Optimierung der Haupt-Call-to-Action auf der Homepage

Varianten:

• Control (50%):

  • Primary: "So funktioniert's" → #how-it-works
  • Secondary: "Live-Demo (2 Min)" → /de/demo

• Variant B (50%):

  • Primary: "Kostenlos testen" → /de/download
  • Secondary: "So funktioniert's" → #how-it-works

Implementation:

• Script in HeroABTestScript.astro
• Dynamische CTA-Änderung via JavaScript
• Tracking von Impressions und Klicks

Event-Tracking Schema

Basis-Events

Event Name	Beschreibung	Properties
$pageview	Automatisch bei Seitenaufruf	locale
$pageleave	Beim Verlassen der Seite	-

Experiment-Events

Event Name	Beschreibung	Properties
experiment_variant_shown	Nutzer sieht eine Variante	experiment, variant
hero_cta_clicked	Klick auf Hero-CTA	experiment, variant, button_type, destination
experiment_conversion	Conversion erfolgt	experiment, variant, conversion_type, platform

Download-Events

Event Name	Beschreibung	Properties
download_page_viewed	Download-Seite aufgerufen	lang
download_button_clicked	App-Download geklickt	platform, source, lang, hero_experiment_variant

PostHog Dashboard-Konfiguration

Aktivierte Produkte

• ✅ Product Analytics: User-Journeys und Funnels
• ✅ Web Analytics: Basis-Metriken (parallel zu Plausible)
• ✅ Feature Flags: A/B-Test-Infrastruktur
• ✅ Experiments: Statistische Auswertung
• ✅ Session Replay: User-Verhalten verstehen

Empfohlene Dashboards

1. "Hero CTA A/B Test Results"

• Conversion Funnel: Impression → Click → Download Page → App Download
• CTR by Variant: Click-Through-Rate Vergleich
• Download Conversions: Finale Conversions nach Variante
• Platform Distribution: iOS vs. Android

2. "User Journey Analysis"

• Path Analysis: Häufigste Wege zur Download-Seite
• Drop-off Points: Wo verlieren wir Nutzer?
• Session Duration: Verweildauer nach Variante

Best Practices & Guidelines

1. Neue A/B-Tests erstellen

// 1. Feature Flag in PostHog Dashboard anlegen
// 2. Test-Komponente erstellen:
const variant = await getExperiment('my-new-test');

if (variant === 'variant-b') {
  // Variante B anwenden
}

// 3. Events tracken
trackEvent('my_test_interaction', {
  experiment: 'my-new-test',
  variant: variant || 'control'
});

2. Conversion-Tracking

Immer die komplette Journey tracken:

1. Impression (Variante gezeigt)
2. Interaction (Nutzer-Aktion)
3. Conversion (Ziel erreicht)

3. Statistische Signifikanz

• Mindestens 1000 Nutzer pro Variante
• Test mindestens 2 Wochen laufen lassen
• Wochentags-Effekte berücksichtigen

Wartung & Monitoring

Tägliche Checks

• Events kommen in PostHog an
• Feature Flags funktionieren
• Keine JavaScript-Fehler in Console

Wöchentliche Reviews

• A/B-Test Performance prüfen
• Signifikanz-Level checken
• Anomalien untersuchen

Monatliche Aufgaben

• Abgeschlossene Tests dokumentieren
• Neue Test-Ideen priorisieren
• PostHog-Kosten überprüfen

Troubleshooting

Problem: PostHog lädt nicht

1. Cookie-Consent prüfen: localStorage.getItem('memoro_cookie_consent')
2. API-Key in .env verifizieren
3. Browser-Console auf Fehler checken

Problem: Feature Flag gibt null zurück

1. Flag-Name exakt prüfen (case-sensitive!)
2. Rollout-Percentage in PostHog checken
3. Cache leeren und neu laden

Problem: Events werden nicht getrackt

1. Network-Tab öffnen, nach eu.posthog.com/e/ suchen
2. window.posthog in Console prüfen
3. Event-Namen auf Tippfehler checken

Zukünftige Optimierungen

Phase 1 (Abgeschlossen ✅)

• PostHog-Integration
• Erster A/B-Test (Hero CTA)
• Conversion-Tracking

Phase 2 (Geplant)

• Pricing-Layout A/B-Test
• Navigation-Varianten
• Form-Optimierung

Phase 3 (Zukunft)

• Personalisierung basierend auf Quelle
• Multi-Variate Tests
• KI-gestützte Optimierung

Kontakt & Support

PostHog-Dashboard: https://eu.posthog.com
Dokumentation: https://posthog.com/docs
Support: support@posthog.com

Internes Team:

• A/B-Tests: Development Team
• Analytics: Marketing Team
• Datenschutz: Legal Team

---

Hinweis: Diese Dokumentation wird regelmäßig aktualisiert. Letzte Änderung: 23. Juli 2025