managarten/apps/uload/docs/ab-testing-multilingual-plan.md

A/B Testing Multilingual Implementation Plan

Aktueller Status

• ❌ AB-Testing Texte sind hart kodiert in /src/lib/ab-testing/config/variants.ts
• ✅ Paraglide ist bereits installiert und konfiguriert
• ✅ 5 Sprachen werden unterstützt: EN, DE, IT, FR, ES
• ✅ Hauptseite nutzt bereits Paraglide (import * as m from '$paraglide/messages')

Implementierungsansatz

Option 1: Einfacher Ansatz (Empfohlen) ⭐

Alle Varianten-Texte in die Message-Files

// messages/en.json
{
	// Control
	"hero_control_headline": "Short Links That Work Harder",
	"hero_control_subheadline": "Professional URL management with real-time analytics",
	"hero_control_cta": "Start Free - No Credit Card",

	// Variant A1
	"hero_a1_headline": "Save Time on Every Link You Share",
	"hero_a1_subheadline": "Automate your URL workflow with smart tools",
	"hero_a1_cta": "Start Saving Time",
	"hero_a1_feature_1": "Save 3+ hours weekly",
	"hero_a1_feature_2": "Automate link creation",
	"hero_a1_feature_3": "Track everything",

	// Variant A2
	"hero_a2_headline": "Save 3 Hours Per Week on Link Management"
	// ... etc
}

Vorteile:

• ✅ Einfach zu implementieren
• ✅ Übersetzungen zentral verwaltet
• ✅ Konsistent mit bestehendem System
• ✅ Leicht zu pflegen

Nachteile:

• ❌ Viele Message-Keys (9 Varianten × 3-6 Texte × 5 Sprachen)
• ❌ Message-Files werden größer

Option 2: Dynamischer Ansatz

Varianten-spezifische Message-Files

messages/
├── en.json          # Haupt-Messages
├── de.json
└── ab-testing/
    ├── en/
    │   ├── control.json
    │   ├── a1.json
    │   └── ...
    └── de/
        ├── control.json
        └── ...

Vorteile:

• ✅ Bessere Organisation
• ✅ Varianten-Texte isoliert

Nachteile:

• ❌ Komplexere Implementierung
• ❌ Nicht Standard-Paraglide

Empfohlene Implementierung (Option 1)

Schritt 1: Message-Keys hinzufügen

Alle Varianten-Texte in die bestehenden Message-Files einfügen.

Schritt 2: Variants Config anpassen

// variants.ts
import * as m from '$paraglide/messages';

export function getVariantContent(variantId: string): VariantContent {
	const locale = getCurrentLocale();

	switch (variantId) {
		case 'control':
			return {
				id: 'control',
				name: 'Control',
				headline: m.hero_control_headline(),
				subheadline: m.hero_control_subheadline(),
				ctaText: m.hero_control_cta()
				// ...
			};
		case 'a1':
			return {
				id: 'a1',
				name: 'Value Generic',
				headline: m.hero_a1_headline(),
				subheadline: m.hero_a1_subheadline(),
				ctaText: m.hero_a1_cta(),
				features: [m.hero_a1_feature_1(), m.hero_a1_feature_2(), m.hero_a1_feature_3()]
				// ...
			};
		// ...
	}
}

Schritt 3: HeroABTest Component anpassen

<script lang="ts">
	import { onMount } from 'svelte';
	import { getVariantContent } from '../config/variants';
	import { getCurrentLocale } from '$lib/locale';

	let variant = $state<string>('control');
	let content = $state<VariantContent>();

	onMount(() => {
		variant = hashManager.getVariant();
		// Content wird dynamisch basierend auf Sprache geladen
		content = getVariantContent(variant);
	});

	// Re-render bei Sprachwechsel
	$: if (browser) {
		const locale = getCurrentLocale();
		content = getVariantContent(variant);
	}
</script>

Zeitplan

Phase 1: Vorbereitung (1-2 Stunden)

1. Alle Varianten-Texte sammeln und strukturieren
2. Übersetzungen vorbereiten (DeepL/ChatGPT für erste Version)
3. Message-Keys definieren (Naming Convention)

Phase 2: Implementation (2-3 Stunden)

1. Message-Keys zu allen 5 Sprach-Files hinzufügen
2. variants.ts auf dynamische Messages umstellen
3. HeroABTest für Sprachwechsel anpassen
4. Testing mit verschiedenen Sprachen

Phase 3: Qualitätssicherung (1 Stunde)

1. Alle 9 Varianten in allen 5 Sprachen testen
2. Sprachwechsel während Session testen
3. URL-Hash bleibt bei Sprachwechsel erhalten

Message-Key Naming Convention

hero_[variant]_[element]_[index]

Beispiele:
hero_control_headline
hero_a1_feature_1
hero_b2_social_proof
hero_c3_integration_list

Anzahl benötigter Übersetzungen

Variante	Headlines	Subheadlines	CTA	Features	Social	Total
Control	1	1	1	0	0	3
A1	1	1	1	3	0	6
A2	1	1	1	3	0	6
A3	1	1	1	3	0	6
B1	1	1	1	0	1	4
B2	1	1	1	0	1	4
B3	1	1	1	0	1	4
C1	1	1	1	6	0	9
C2	1	1	1	4	0	7
C3	1	1	1	4	0	7
Total	10	10	10	26	3	56

56 Texte × 5 Sprachen = 280 Übersetzungen

Alternativer Ansatz: Basis-Übersetzung + Variablen

Für weniger Übersetzungsaufwand könnten wir Template-Strings verwenden:

{
	"hero_save_time": "Save {amount} on {activity}",
	"hero_trust_numbers": "Join {count}+ {audience} Using uLoad"
}

Dann in variants.ts:

headline: m.hero_save_time({ amount: '3 Hours Per Week', activity: 'Link Management' });

Dies reduziert die Anzahl der Übersetzungen erheblich!

Empfehlung

1. Kurzfristig: Option 1 mit vollständigen Übersetzungen für Control + A1, B1, C1 (die aktuell aktiven)
2. Mittelfristig: Template-Ansatz für neue Varianten
3. Langfristig: Eigenes CMS/Admin-Interface für Varianten-Texte

Nächste Schritte

1. Entscheidung über Ansatz
2. Übersetzungen vorbereiten (kann ich mit KI helfen)
3. Implementation (ca. 3-4 Stunden)
4. Testing in allen Sprachen