319 lines
9 KiB
Markdown
319 lines
9 KiB
Markdown
# 📊 Survey PostHog : Satisfaction création de contrats
|
|
|
|
## 🎯 Objectif
|
|
|
|
Mesurer la satisfaction des utilisateurs concernant le processus de création de contrats avec une note de 1 à 5.
|
|
|
|
## ✅ Étape 1 : Événement tracké
|
|
|
|
L'événement `contract_created` est maintenant envoyé à PostHog après chaque création de contrat réussie, avec les propriétés suivantes :
|
|
|
|
```typescript
|
|
posthog.capture('contract_created', {
|
|
contract_type: 'CDDU' | 'RG',
|
|
regime: 'CDDU_MONO' | 'CDDU_MULTI' | 'Régime Général',
|
|
multi_mois: boolean,
|
|
categorie_professionnelle: 'Artiste' | 'Technicien' | 'Autre',
|
|
contract_id: string,
|
|
has_notes: boolean,
|
|
validation_immediate: boolean,
|
|
});
|
|
```
|
|
|
|
## 🔧 Étape 2 : Créer le survey dans PostHog
|
|
|
|
### 1. Accéder à PostHog
|
|
- Rendez-vous sur https://eu.posthog.com/
|
|
- Connectez-vous avec vos identifiants
|
|
|
|
### 2. Créer un nouveau survey
|
|
1. Dans le menu de gauche, cliquez sur **"Surveys"**
|
|
2. Cliquez sur **"New survey"**
|
|
3. Choisissez **"Rating"** comme type de question
|
|
|
|
### 3. Configuration du survey
|
|
|
|
#### **Question**
|
|
```
|
|
Comment évaluez-vous la facilité du processus de création de contrat ?
|
|
```
|
|
|
|
#### **Type de réponse**
|
|
- **Type** : Rating (échelle)
|
|
- **Scale** : 1 à 5
|
|
- **Display** : Stars (⭐) ou Numbers (1 2 3 4 5)
|
|
|
|
#### **Labels optionnels**
|
|
- **1 étoile** : Très difficile
|
|
- **5 étoiles** : Très facile
|
|
|
|
ou simplement :
|
|
- **Low** : 1 - Difficile
|
|
- **High** : 5 - Facile
|
|
|
|
#### **Nom du survey**
|
|
```
|
|
Satisfaction création de contrats
|
|
```
|
|
|
|
#### **Description (optionnelle)**
|
|
```
|
|
Aidez-nous à améliorer votre expérience
|
|
```
|
|
|
|
### 4. Ciblage du survey
|
|
|
|
#### **Quand afficher le survey ?**
|
|
|
|
**Option A : Après chaque création (recommandé pour commencer)**
|
|
```
|
|
Événement : contract_created
|
|
Affichage : Immédiatement après l'événement
|
|
```
|
|
|
|
**Option B : Après X créations (pour ne pas être trop intrusif)**
|
|
```
|
|
Événement : contract_created
|
|
Condition : event_count >= 3
|
|
(Afficher seulement après 3 créations de contrats)
|
|
```
|
|
|
|
**Option C : Une seule fois par utilisateur**
|
|
```
|
|
Événement : contract_created
|
|
Condition : survey_not_completed
|
|
Fréquence : Une fois par utilisateur
|
|
```
|
|
|
|
#### **Configuration recommandée pour démarrer :**
|
|
|
|
Dans la section **"Targeting"** du survey PostHog :
|
|
|
|
1. **Linked flag or targeting** :
|
|
- Event name: `contract_created`
|
|
|
|
2. **Conditions** :
|
|
- Show survey when: `contract_created` event is captured
|
|
- Wait: `1 second` (laisser le temps à la redirection de se faire)
|
|
|
|
3. **Appearance** :
|
|
- Position: Bottom right (en bas à droite)
|
|
- Type: Popover (fenêtre flottante)
|
|
|
|
4. **Frequency** :
|
|
- Show once per user: **No** (pour avoir plusieurs réponses)
|
|
- Days between survey appearances: **7** (ne pas harceler l'utilisateur)
|
|
|
|
### 5. Design et style
|
|
|
|
```
|
|
Title: 📊 Votre avis compte !
|
|
Question: Comment évaluez-vous la facilité du processus de création de contrat ?
|
|
Button text: Envoyer
|
|
Dismiss button: Peut-être plus tard
|
|
```
|
|
|
|
**Couleurs** :
|
|
- Primary color: `#10b981` (vert Emerald de votre app)
|
|
- Background: `#ffffff`
|
|
|
|
### 6. Question de suivi (optionnelle)
|
|
|
|
Vous pouvez ajouter une **question de suivi** si la note est basse (≤ 3) :
|
|
|
|
```
|
|
Si note ≤ 3 : "Que pourrions-nous améliorer ?"
|
|
Type : Open text (texte libre)
|
|
Placeholder : "Partagez vos suggestions..."
|
|
```
|
|
|
|
Configuration dans PostHog :
|
|
- Cliquez sur **"Add follow-up question"**
|
|
- Condition: `rating <= 3`
|
|
- Type: Open text
|
|
|
|
## 📈 Étape 3 : Analyser les résultats
|
|
|
|
### Dashboard dans PostHog
|
|
|
|
1. Aller dans **Surveys** → **Votre survey**
|
|
2. Consulter :
|
|
- **Response rate** : Taux de réponse
|
|
- **Average rating** : Note moyenne
|
|
- **Distribution** : Répartition des notes (1 à 5)
|
|
- **Responses over time** : Évolution dans le temps
|
|
|
|
### Créer des insights personnalisés
|
|
|
|
1. Aller dans **Insights** → **New insight**
|
|
2. Créer un graphique :
|
|
```
|
|
Event: survey_responded
|
|
Filter: survey_name = "Satisfaction création de contrats"
|
|
Breakdown: rating
|
|
```
|
|
|
|
3. Analyser par type de contrat :
|
|
```
|
|
Event: survey_responded
|
|
Filter: survey_name = "Satisfaction création de contrats"
|
|
Breakdown: contract_type (CDDU vs RG)
|
|
```
|
|
|
|
### Alertes automatiques
|
|
|
|
Configurez une alerte si la note moyenne descend sous un seuil :
|
|
|
|
1. Aller dans **Alerts** → **New alert**
|
|
2. Condition : `average_rating < 3`
|
|
3. Notification : Email ou Slack
|
|
|
|
## 🎨 Option avancée : Survey personnalisé dans le code
|
|
|
|
Si vous préférez un contrôle total sur le design et le timing, vous pouvez créer un survey personnalisé :
|
|
|
|
```tsx
|
|
// components/ContractCreationSurvey.tsx
|
|
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import { usePostHog } from 'posthog-js/react';
|
|
import { Star, X } from 'lucide-react';
|
|
|
|
export function ContractCreationSurvey({
|
|
isOpen,
|
|
onClose,
|
|
contractId
|
|
}: {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
contractId?: string;
|
|
}) {
|
|
const posthog = usePostHog();
|
|
const [rating, setRating] = useState<number | null>(null);
|
|
const [hoverRating, setHoverRating] = useState<number | null>(null);
|
|
const [submitted, setSubmitted] = useState(false);
|
|
|
|
if (!isOpen || submitted) return null;
|
|
|
|
const handleSubmit = () => {
|
|
if (rating) {
|
|
posthog?.capture('contract_creation_survey_submitted', {
|
|
rating,
|
|
contract_id: contractId,
|
|
});
|
|
setSubmitted(true);
|
|
setTimeout(onClose, 2000);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="fixed bottom-4 right-4 z-50 w-96 bg-white rounded-xl shadow-2xl border border-slate-200 p-6">
|
|
<button
|
|
onClick={onClose}
|
|
className="absolute top-3 right-3 text-slate-400 hover:text-slate-600"
|
|
>
|
|
<X className="w-5 h-5" />
|
|
</button>
|
|
|
|
<h3 className="text-lg font-semibold mb-2">📊 Votre avis compte !</h3>
|
|
<p className="text-sm text-slate-600 mb-4">
|
|
Comment évaluez-vous la facilité du processus de création de contrat ?
|
|
</p>
|
|
|
|
<div className="flex justify-center gap-2 mb-6">
|
|
{[1, 2, 3, 4, 5].map((star) => (
|
|
<button
|
|
key={star}
|
|
onClick={() => setRating(star)}
|
|
onMouseEnter={() => setHoverRating(star)}
|
|
onMouseLeave={() => setHoverRating(null)}
|
|
className="transition-transform hover:scale-110"
|
|
>
|
|
<Star
|
|
className={`w-8 h-8 ${
|
|
(hoverRating || rating || 0) >= star
|
|
? 'fill-yellow-400 text-yellow-400'
|
|
: 'text-slate-300'
|
|
}`}
|
|
/>
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
<div className="flex justify-between text-xs text-slate-500 mb-4">
|
|
<span>Très difficile</span>
|
|
<span>Très facile</span>
|
|
</div>
|
|
|
|
<button
|
|
onClick={handleSubmit}
|
|
disabled={!rating}
|
|
className="w-full py-2 bg-emerald-600 text-white rounded-lg hover:bg-emerald-700 disabled:opacity-50 disabled:cursor-not-allowed transition"
|
|
>
|
|
Envoyer
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|
|
```
|
|
|
|
Puis l'intégrer dans `NouveauCDDUForm.tsx` :
|
|
|
|
```tsx
|
|
const [showSurvey, setShowSurvey] = useState(false);
|
|
const [createdContractId, setCreatedContractId] = useState<string>();
|
|
|
|
// Après création réussie :
|
|
setCreatedContractId(result?.contract?.id);
|
|
setShowSurvey(true);
|
|
|
|
// Dans le JSX :
|
|
<ContractCreationSurvey
|
|
isOpen={showSurvey}
|
|
onClose={() => setShowSurvey(false)}
|
|
contractId={createdContractId}
|
|
/>
|
|
```
|
|
|
|
## 📊 Comparaison des deux approches
|
|
|
|
| Critère | Survey PostHog natif | Survey personnalisé |
|
|
|---------|---------------------|---------------------|
|
|
| **Facilité de mise en place** | ⭐⭐⭐⭐⭐ Très facile | ⭐⭐⭐ Moyen |
|
|
| **Contrôle du design** | ⭐⭐⭐ Limité | ⭐⭐⭐⭐⭐ Total |
|
|
| **Analytics automatiques** | ⭐⭐⭐⭐⭐ Intégré | ⭐⭐⭐ À configurer |
|
|
| **A/B testing** | ⭐⭐⭐⭐⭐ Natif | ⭐⭐ Manuel |
|
|
| **Multilingue** | ⭐⭐⭐⭐ Facile | ⭐⭐⭐⭐⭐ Total |
|
|
| **Maintenance** | ⭐⭐⭐⭐⭐ Aucune | ⭐⭐⭐ Régulière |
|
|
|
|
**Recommandation** : Commencez avec le **Survey PostHog natif**, c'est plus rapide et vous aurez les analytics automatiquement. Si vous avez besoin de plus de contrôle, passez au survey personnalisé plus tard.
|
|
|
|
## ✅ Checklist de déploiement
|
|
|
|
- [ ] Code modifié dans `NouveauCDDUForm.tsx` (déjà fait ✅)
|
|
- [ ] Variables PostHog configurées dans `.env.local`
|
|
- [ ] Créer le survey dans le dashboard PostHog
|
|
- [ ] Configurer le ciblage sur l'événement `contract_created`
|
|
- [ ] Tester en créant un contrat
|
|
- [ ] Vérifier dans PostHog que l'événement arrive
|
|
- [ ] Vérifier que le survey s'affiche
|
|
- [ ] Configurer les alertes si nécessaire
|
|
|
|
## 🧪 Test
|
|
|
|
1. Créez un contrat de test
|
|
2. Vérifiez dans la console : `📊 PostHog: Événement contract_created envoyé`
|
|
3. Le survey devrait apparaître quelques secondes après la création
|
|
4. Donnez une note
|
|
5. Vérifiez dans PostHog → Surveys que la réponse est enregistrée
|
|
|
|
## 📚 Ressources
|
|
|
|
- [Documentation PostHog Surveys](https://posthog.com/docs/surveys)
|
|
- [Survey templates](https://posthog.com/templates/surveys)
|
|
- [Best practices](https://posthog.com/docs/surveys/best-practices)
|
|
|
|
---
|
|
|
|
**Dernière mise à jour** : 15 octobre 2025
|