mirror of
https://github.com/Memo-2023/mana-monorepo.git
synced 2026-05-17 21:09:40 +02:00
61d181fbc2
Move inactive projects out of active workspace: - bauntown (community website) - maerchenzauber (AI story generation) - memoro (voice memo app) - news (news aggregation) - nutriphi (nutrition tracking) - reader (reading app) - uload (URL shortener) - wisekeep (AI wisdom extraction) Update CLAUDE.md documentation: - Add presi to active projects - Document archived projects section - Update workspace configuration Archived apps can be re-activated by moving back to apps/ 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
194 lines
4.5 KiB
Markdown
194 lines
4.5 KiB
Markdown
# 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](https://eu.posthog.com)
|
|
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`:
|
|
|
|
```bash
|
|
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
|
|
|
|
```astro
|
|
---
|
|
import HeroCtaExperiment from '../components/experiments/HeroCtaExperiment.astro';
|
|
---
|
|
|
|
<HeroCtaExperiment />
|
|
```
|
|
|
|
#### Option 2: Custom Implementation
|
|
|
|
```astro
|
|
<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:
|
|
|
|
```javascript
|
|
const variant = await getExperiment('hero-cta-test');
|
|
// Returns: null | 'control' | 'variant-b' | ...
|
|
```
|
|
|
|
### `trackEvent(name, properties)`
|
|
|
|
Trackt ein Custom Event:
|
|
|
|
```javascript
|
|
trackEvent('button_clicked', {
|
|
button_id: 'download-cta',
|
|
page: 'home',
|
|
});
|
|
```
|
|
|
|
### `trackExperimentConversion(experiment, type)`
|
|
|
|
Trackt eine Conversion für einen A/B-Test:
|
|
|
|
```javascript
|
|
trackExperimentConversion('hero-cta-test', 'download_click');
|
|
```
|
|
|
|
### `applyExperimentClasses(elementId, experimentKey, variantClasses)`
|
|
|
|
Wendet CSS-Klassen basierend auf der Variante an:
|
|
|
|
```javascript
|
|
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
|