300 lines
7.7 KiB
Markdown
300 lines
7.7 KiB
Markdown
# ✅ 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
|