espace-paie-odentas/POSTHOG_SURVEY_INTEGRATION_GUIDE.md

🎯 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 :

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

Ajoutez ces states avec les autres states du formulaire :

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 :

// 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 :

{/* Survey de satisfaction - après la fin des overlays existants */}
<ContractCreationSurvey
  isOpen={showSurvey}
  onClose={() => setShowSurvey(false)}
  contractId={surveyContractId}
  contractType={surveyContractType}
/>

Exemple complet de modification

// 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 :

// 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

// 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

// 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 :

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.