# ✅ Survey PostHog - Checklist complète

## 🎯 Objectif
Mesurer la satisfaction des utilisateurs sur le processus de création de contrats avec une note de 1 à 5.

---

## ✅ Ce qui a été fait

### 1. ✅ Code frontend modifié
- **Fichier** : `components/contrats/NouveauCDDUForm.tsx`
- **Modification** : Import de `usePostHog` et tracking de l'événement `contract_created`
- **Événement envoyé** : Contient `contract_type`, `regime`, `categorie_professionnelle`, etc.

### 2. ✅ Composant survey créé (optionnel)
- **Fichier** : `components/surveys/ContractCreationSurvey.tsx`
- **Usage** : Si vous voulez un contrôle total sur le design
- **Avantage** : Customisable à 100%

### 3. ✅ Documentation créée
- `POSTHOG_SURVEY_CONTRATS.md` - Guide complet du survey
- `POSTHOG_SURVEY_INTEGRATION_GUIDE.md` - Guide d'intégration rapide
- `POSTHOG_ANALYTICS_GUIDE.md` - Mis à jour avec référence au survey

---

## 🚀 Prochaines étapes (à faire par vous)

### Étape 1 : Vérifier l'environnement (5 min)

Vérifiez que ces variables sont dans votre `.env.local` :

```bash
NEXT_PUBLIC_POSTHOG_KEY=phc_...
NEXT_PUBLIC_POSTHOG_HOST=https://eu.i.posthog.com
```

Si elles manquent, ajoutez-les et **redémarrez le serveur** :

```bash
npm run dev
```

### Étape 2 : Tester l'événement (10 min)

1. Créez un contrat de test
2. Ouvrez la **console du navigateur** (F12)
3. Vous devriez voir : `📊 PostHog: Événement contract_created envoyé`
4. Vérifiez dans PostHog → **Activity** → **Live Events**
5. Cherchez l'événement `contract_created` - il devrait apparaître dans les 30 secondes

### Étape 3 : Créer le survey dans PostHog (15 min)

#### 🔧 Configuration du survey

1. **Aller sur PostHog** : https://eu.posthog.com/
2. **Menu** → **Surveys** → **New survey**
3. **Type** : Choisir **"Rating"**

#### 📝 Paramètres du survey

**Question** :
```
Comment évaluez-vous la facilité du processus de création de contrat ?
```

**Type de réponse** :
- **Scale** : 1 to 5
- **Display** : Stars ⭐ (ou Numbers 1-5)
- **Labels** :
  - Low (1) : Très difficile
  - High (5) : Très facile

**Nom du survey** :
```
Satisfaction création de contrats
```

#### 🎯 Ciblage (Targeting)

**Option simple (recommandée pour commencer)** :

```
Event name: contract_created
Show when: Event is captured
Wait: 2 seconds
Position: Bottom right
Frequency: Show every time (pour avoir plusieurs réponses)
Days between appearances: 7 (ne pas harceler)
```

**Option avancée (après X créations)** :

```
Event name: contract_created
Condition: User has completed 3+ contract_created events
Show when: Event is captured
```

#### 🎨 Apparence

```
Title: 📊 Votre avis compte !
Question: Comment évaluez-vous la facilité du processus de création de contrat ?
Button text: Envoyer
Dismiss text: Plus tard
Primary color: #10b981 (vert de votre app)
```

#### ➕ Question de suivi (optionnelle)

Si note ≤ 3 :
```
Question: Que pourrions-nous améliorer ?
Type: Open text
Placeholder: Partagez vos suggestions...
```

4. **Sauvegarder** et **Activer** le survey

### Étape 4 : Tester le survey (5 min)

1. Créez un nouveau contrat
2. Le survey devrait apparaître 2 secondes après la création
3. Donnez une note
4. Vérifiez dans PostHog → **Surveys** → **Votre survey** que la réponse apparaît

---

## 📊 Analyser les résultats

### Dashboard automatique

PostHog crée automatiquement un dashboard pour votre survey avec :
- **Response rate** : Taux de réponse
- **Average rating** : Note moyenne
- **Distribution** : Répartition 1-5
- **Responses over time** : Évolution

### Insights personnalisés

Créez des insights pour analyser plus en détail :

**1. Note moyenne par type de contrat**
```
Event: survey_responded
Survey: Satisfaction création de contrats
Breakdown: contract_type
Aggregation: Average rating
```

**2. Taux de réponse par catégorie professionnelle**
```
Event: survey_responded
Survey: Satisfaction création de contrats
Breakdown: categorie_professionnelle
Aggregation: Count
```

**3. Évolution de la satisfaction dans le temps**
```
Event: survey_responded
Survey: Satisfaction création de contrats
Aggregation: Average rating
Graph: Line chart (par semaine)
```

### Alertes

Configurez des alertes pour être notifié :

```
Condition: Average rating < 3.0 (sur les 7 derniers jours)
Action: Envoyer email à l'équipe produit
```

---

## 🎨 Option alternative : Survey personnalisé

Si vous préférez un contrôle total sur le design, utilisez le composant React créé.

### Intégration rapide

Dans `NouveauCDDUForm.tsx`, ajoutez :

```tsx
import { ContractCreationSurvey } from '@/components/surveys/ContractCreationSurvey';

// States
const [showSurvey, setShowSurvey] = useState(false);
const [surveyContractId, setSurveyContractId] = useState<string>();

// Après création réussie
setSurveyContractId(result?.contract?.id);
setTimeout(() => setShowSurvey(true), 1500);

// Dans le JSX
<ContractCreationSurvey
  isOpen={showSurvey}
  onClose={() => setShowSurvey(false)}
  contractId={surveyContractId}
  contractType={isRegimeRG ? 'RG' : 'CDDU'}
/>
```

Voir `POSTHOG_SURVEY_INTEGRATION_GUIDE.md` pour les détails.

---

## 🔍 Troubleshooting

### Le survey ne s'affiche pas

**1. Vérifier que l'événement arrive bien**
- PostHog → Activity → Live Events
- Chercher `contract_created`
- Si absent → vérifier les variables d'environnement

**2. Vérifier le ciblage du survey**
- PostHog → Surveys → Votre survey → Targeting
- S'assurer que l'événement `contract_created` est bien configuré

**3. Vérifier les conditions**
- Si vous avez mis une condition (ex: "after 3 contracts"), créez suffisamment de contrats de test

### L'événement n'arrive pas dans PostHog

**1. Console du navigateur**
```javascript
window.posthog.debug(true)
// Créez un contrat
// Vous devriez voir des logs PostHog
```

**2. Network tab**
- DevTools → Network
- Filtrer par "batch"
- Vérifier statut 200

**3. Variables d'environnement**
```bash
# Vérifier qu'elles sont bien définies
echo $NEXT_PUBLIC_POSTHOG_KEY
echo $NEXT_PUBLIC_POSTHOG_HOST

# Si vides, les ajouter à .env.local et redémarrer
```

---

## 📈 Métriques à surveiller

### Court terme (premières semaines)
- **Taux de réponse** : Objectif > 30%
- **Note moyenne** : Objectif > 4.0/5
- **% de notes ≤ 3** : À minimiser

### Moyen terme (après 1 mois)
- **Évolution de la note** : Doit augmenter
- **Feedback qualitatif** : Identifier les points de friction récurrents
- **Corrélations** : Note vs type de contrat, catégorie pro, etc.

### Actions selon les résultats

| Note moyenne | Action |
|--------------|--------|
| ≥ 4.5 | 🎉 Excellent ! Continuez comme ça |
| 4.0 - 4.4 | ✅ Bien. Identifier les petites améliorations |
| 3.0 - 3.9 | ⚠️ Moyen. Analyser les feedbacks et prioriser des améliorations |
| < 3.0 | 🚨 Urgent. Revoir le processus de création |

---

## 📚 Ressources

- **PostHog Surveys** : https://posthog.com/docs/surveys
- **Best practices** : https://posthog.com/docs/surveys/best-practices
- **Survey templates** : https://posthog.com/templates/surveys
- **Guide interne** : `POSTHOG_SURVEY_CONTRATS.md`

---

## ✅ Checklist finale

- [ ] Variables PostHog dans `.env.local`
- [ ] Serveur redémarré après ajout des variables
- [ ] Test : création d'un contrat → événement `contract_created` dans PostHog
- [ ] Survey créé dans PostHog dashboard
- [ ] Ciblage configuré sur `contract_created`
- [ ] Test : création d'un contrat → survey s'affiche
- [ ] Test : répondre au survey → réponse enregistrée
- [ ] Dashboard de résultats vérifié
- [ ] (Optionnel) Alertes configurées

---

**Temps estimé total** : 30-45 minutes

**Dernière mise à jour** : 15 octobre 2025