Aller au contenu

Analytics / BI

Entonnoir de conversion

report

Visualisation d'entonnoir étape par étape construite sur des barres décroissantes, avec taux de passage et taux de chute affichés entre chaque palier. Cartes KPI de conversion globale, filtres de segment et table de détail par étape. Pour diagnostiquer les pertes du parcours utilisateur.

Entonnoir de conversion

Données simulées — juin 2026

Entonnoir basé sur une boutique e-commerce fictive. Utilisez les filtres pour isoler un segment.

Visites totales

48 200

Commandes

3 240

Conversion globale

6,7 %

Valeur moy. panier

87 €

  • Visites: 48200
  • Pages produit: 29400
  • Ajouts panier: 14700
  • Paiement initié: 7350
  • Commandes: 3240
Pages produit61 %
Ajouts panier50 %
Paiement initié50 %
Commandes44.1 %
Détail par transition
TransitionEntréeSortieTaux passageTaux de chute
Visites → Pages produit48 20029 40061,0 %39,0 %
Pages produit → Panier29 40014 70050,0 %50,0 %
Panier → Paiement14 7007 35050,0 %50,0 %
Paiement → Commande7 3503 24044,1 %55,9 %
Voir le code (Svelte) 
<div class="cf-shell">
  <Alert
    tone="info"
    title="Données simulées — juin 2026"
    message="Entonnoir basé sur une boutique e-commerce fictive. Utilisez les filtres pour isoler un segment."
  />
  <div class="cf-kpis">
    <KpiCard
      label="Visites totales"
      value="48 200"
      delta={0.084}
      tone="category1"
    />
    <KpiCard label="Commandes" value="3 240" delta={0.052} tone="category2" />
    <KpiCard
      label="Conversion globale"
      value="6,7 %"
      delta={-0.003}
      tone="category3"
    />
    <KpiCard
      label="Valeur moy. panier"
      value="87 €"
      delta={0.021}
      tone="category4"
    />
  </div>
  <div class="cf-filters">
    <Select
      label="Segment"
      options={[{"value":"all","label":"Tous les segments"},{"value":"mobile","label":"Mobile"},{"value":"desktop","label":"Desktop"},{"value":"new","label":"Nouveaux visiteurs"},{"value":"return","label":"Visiteurs récurrents"}]}
      value="all"
    />
  </div>
  <BarChart
    label="Entonnoir de conversion"
    data={[{"label":"Visites","value":48200,"tone":"category1"},{"label":"Pages produit","value":29400,"tone":"category1"},{"label":"Ajouts panier","value":14700,"tone":"category1"},{"label":"Paiement initié","value":7350,"tone":"category1"},{"label":"Commandes","value":3240,"tone":"category1"}]}
    orientation="vertical"
    dataLabels
  />
  <div class="cf-progress-list">
    <div class="cf-progress-item">
      <div class="cf-progress-meta">
        <span class="cf-progress-label">Pages produit</span>
        <Badge tone="success">61 %</Badge>
      </div>
      <ProgressBar value={61} max={100} tone="success" size="sm" />
    </div>
    <div class="cf-progress-item">
      <div class="cf-progress-meta">
        <span class="cf-progress-label">Ajouts panier</span>
        <Badge tone="success">50 %</Badge>
      </div>
      <ProgressBar value={50} max={100} tone="success" size="sm" />
    </div>
    <div class="cf-progress-item">
      <div class="cf-progress-meta">
        <span class="cf-progress-label">Paiement initié</span>
        <Badge tone="success">50 %</Badge>
      </div>
      <ProgressBar value={50} max={100} tone="success" size="sm" />
    </div>
    <div class="cf-progress-item">
      <div class="cf-progress-meta">
        <span class="cf-progress-label">Commandes</span>
        <Badge tone="warning">44.1 %</Badge>
      </div>
      <ProgressBar value={44.1} max={100} tone="warning" size="sm" />
    </div>
  </div>
  <Table
    caption="Détail par transition"
    columns={[{"key":"etape","label":"Transition"},{"key":"entree","label":"Entrée","align":"end"},{"key":"sortie","label":"Sortie","align":"end"},{"key":"taux_passage","label":"Taux passage","align":"end"},{"key":"taux_chute","label":"Taux de chute","align":"end"}]}
    rows={[{"id":"1","etape":"Visites → Pages produit","entree":"48 200","sortie":"29 400","taux_passage":"61,0 %","taux_chute":"39,0 %"},{"id":"2","etape":"Pages produit → Panier","entree":"29 400","sortie":"14 700","taux_passage":"50,0 %","taux_chute":"50,0 %"},{"id":"3","etape":"Panier → Paiement","entree":"14 700","sortie":"7 350","taux_passage":"50,0 %","taux_chute":"50,0 %"},{"id":"4","etape":"Paiement → Commande","entree":"7 350","sortie":"3 240","taux_passage":"44,1 %","taux_chute":"55,9 %"}]}
    size="sm"
  />
</div>

Composants DS utilisés