renaud/espace-paie-odentas

Fork 0

odentas 4694b87a18 Ajout cards contrats multi et RG + survey nouveau contrat

2025-10-15 11:37:53 +02:00

9 KiB

Raw Blame History

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

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

Dans le menu de gauche, cliquez sur "Surveys"
Cliquez sur "New survey"
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 :

Linked flag or targeting :
- Event name: contract_created
Conditions :
- Show survey when: contract_created event is captured
- Wait: 1 second (laisser le temps à la redirection de se faire)
Appearance :
- Position: Bottom right (en bas à droite)
- Type: Popover (fenêtre flottante)
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

Aller dans Surveys → Votre survey
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

Aller dans Insights → New insight

Créer un graphique :

Event: survey_responded
Filter: survey_name = "Satisfaction création de contrats"
Breakdown: rating

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 :

Aller dans Alerts → New alert
Condition : average_rating < 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é :

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

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

Créez un contrat de test
Vérifiez dans la console : 📊 PostHog: Événement contract_created envoyé
Le survey devrait apparaître quelques secondes après la création
Donnez une note
Vérifiez dans PostHog → Surveys que la réponse est enregistrée

📚 Ressources

Dernière mise à jour : 15 octobre 2025

9 KiB Raw Blame History