189 lines
4.7 KiB
Markdown
189 lines
4.7 KiB
Markdown
# 🎯 Guide rapide : Intégration du survey personnalisé
|
|
|
|
## Option 1 : Utiliser le survey PostHog natif (Recommandé)
|
|
|
|
✅ **Déjà configuré !** L'événement `contract_created` est envoyé automatiquement.
|
|
|
|
Il vous suffit de :
|
|
1. Aller sur https://eu.posthog.com/
|
|
2. Créer un survey (voir `POSTHOG_SURVEY_CONTRATS.md`)
|
|
3. Le cibler sur l'événement `contract_created`
|
|
|
|
**Avantages** : Analytics automatiques, A/B testing, maintenance zéro.
|
|
|
|
---
|
|
|
|
## Option 2 : Utiliser le composant personnalisé
|
|
|
|
Si vous voulez un contrôle total sur le design et le timing, utilisez le composant `ContractCreationSurvey`.
|
|
|
|
### Intégration dans NouveauCDDUForm
|
|
|
|
Ajoutez ces imports en haut du fichier :
|
|
|
|
```tsx
|
|
import { ContractCreationSurvey } from '@/components/surveys/ContractCreationSurvey';
|
|
```
|
|
|
|
Ajoutez ces states avec les autres states du formulaire :
|
|
|
|
```tsx
|
|
const [showSurvey, setShowSurvey] = useState(false);
|
|
const [surveyContractId, setSurveyContractId] = useState<string>();
|
|
const [surveyContractType, setSurveyContractType] = useState<'CDDU' | 'RG'>();
|
|
```
|
|
|
|
Dans la fonction `onSubmit`, après la création réussie, ajoutez :
|
|
|
|
```tsx
|
|
// Après: const result = await res.json().catch(() => ({}));
|
|
setSurveyContractId(result?.contract?.id || result?.contract?.contract_number);
|
|
setSurveyContractType(isRegimeRG ? 'RG' : 'CDDU');
|
|
|
|
// Afficher le survey après un court délai (laisser le temps à la redirection de commencer)
|
|
setTimeout(() => {
|
|
setShowSurvey(true);
|
|
}, 1500);
|
|
```
|
|
|
|
Ajoutez le composant dans le JSX, après les overlays existants :
|
|
|
|
```tsx
|
|
{/* Survey de satisfaction - après la fin des overlays existants */}
|
|
<ContractCreationSurvey
|
|
isOpen={showSurvey}
|
|
onClose={() => setShowSurvey(false)}
|
|
contractId={surveyContractId}
|
|
contractType={surveyContractType}
|
|
/>
|
|
```
|
|
|
|
### Exemple complet de modification
|
|
|
|
```tsx
|
|
// Dans onSubmit(), juste après la création réussie :
|
|
|
|
const result = await res.json().catch(() => ({}));
|
|
|
|
// 🎯 PostHog event (déjà en place)
|
|
posthog?.capture('contract_created', { ... });
|
|
|
|
// 🎯 Préparer le survey personnalisé
|
|
setSurveyContractId(result?.contract?.id);
|
|
setSurveyContractType(isRegimeRG ? 'RG' : 'CDDU');
|
|
|
|
// Autoriser la navigation
|
|
allowNavRef.current = true;
|
|
setRedirecting(true);
|
|
|
|
// Afficher le survey après 1.5s (pendant la redirection)
|
|
setTimeout(() => {
|
|
setShowSurvey(true);
|
|
}, 1500);
|
|
|
|
// Redirection après 3s
|
|
setTimeout(() => {
|
|
router.push("/contrats");
|
|
}, 3000);
|
|
```
|
|
|
|
### Résultat
|
|
|
|
Le survey apparaîtra en **bas à droite** de l'écran pendant la redirection, permettant à l'utilisateur de donner son avis avant d'être redirigé vers la liste des contrats.
|
|
|
|
---
|
|
|
|
## 📊 Analyser les résultats
|
|
|
|
### Dans PostHog
|
|
|
|
1. Allez dans **Activity** → **Live events**
|
|
2. Filtrez par événement : `contract_creation_survey_submitted`
|
|
3. Vous verrez les propriétés :
|
|
- `rating` : Note de 1 à 5
|
|
- `feedback` : Commentaire (si donné)
|
|
- `contract_id` : ID du contrat
|
|
- `contract_type` : CDDU ou RG
|
|
|
|
### Créer un insight
|
|
|
|
```
|
|
Event: contract_creation_survey_submitted
|
|
Aggregation: Average of rating
|
|
Breakdown: contract_type
|
|
```
|
|
|
|
Cela vous donnera la note moyenne par type de contrat.
|
|
|
|
---
|
|
|
|
## 🎨 Personnalisation
|
|
|
|
### Changer les couleurs
|
|
|
|
Dans `ContractCreationSurvey.tsx`, modifiez les classes Tailwind :
|
|
|
|
```tsx
|
|
// Bouton principal
|
|
className="... bg-emerald-600 hover:bg-emerald-700"
|
|
|
|
// Étoiles
|
|
className="... fill-yellow-400 text-yellow-400"
|
|
|
|
// Border du composant
|
|
className="... border-slate-200"
|
|
```
|
|
|
|
### Changer la position
|
|
|
|
```tsx
|
|
// En bas à gauche
|
|
className="fixed bottom-4 left-4 ..."
|
|
|
|
// En haut à droite
|
|
className="fixed top-4 right-4 ..."
|
|
|
|
// Centre de l'écran
|
|
className="fixed inset-0 flex items-center justify-center ..."
|
|
```
|
|
|
|
### Changer le timing
|
|
|
|
```tsx
|
|
// Afficher immédiatement après création
|
|
setTimeout(() => setShowSurvey(true), 0);
|
|
|
|
// Afficher après 5 secondes
|
|
setTimeout(() => setShowSurvey(true), 5000);
|
|
```
|
|
|
|
---
|
|
|
|
## 🚨 Troubleshooting
|
|
|
|
### Le survey ne s'affiche pas
|
|
|
|
1. Vérifiez que `isOpen={true}` dans les props
|
|
2. Vérifiez que PostHog est bien initialisé (`window.posthog` dans la console)
|
|
3. Vérifiez les z-index (le composant a `z-50`)
|
|
|
|
### Le survey se ferme trop vite
|
|
|
|
Augmentez le délai dans `handleSubmit` :
|
|
|
|
```tsx
|
|
setTimeout(() => {
|
|
onClose();
|
|
}, 3000); // 3 secondes au lieu de 2
|
|
```
|
|
|
|
### Les événements n'arrivent pas dans PostHog
|
|
|
|
1. Ouvrez DevTools → Network
|
|
2. Filtrez par "batch"
|
|
3. Vérifiez que les requêtes vers PostHog ont un statut 200
|
|
4. Vérifiez dans la console : `📊 Survey soumis: ...`
|
|
|
|
---
|
|
|
|
**Recommandation finale** : Commencez avec le **survey PostHog natif** pour sa simplicité et ses analytics automatiques. Passez au composant personnalisé seulement si vous avez des besoins spécifiques de design ou de UX.
|