mailinapp
Documentation menu

Bloc Entonnoir

Un graphique à étapes progressives pour une séquence comme visites → inscriptions → achats, où chaque étape est mesurée par rapport à l'étape qui a démarré la séquence. Il existe pour répondre à une question qu'un simple graphique à barres ne peut pas : non seulement quelle est la taille de chaque étape, mais quelle proportion de l'audience d'origine est allée jusque-là.

Comment ça fonctionne

Le graphique dessine chaque étape saisie comme une barre horizontale, qui se rétrécit de gauche à droite à mesure que la valeur diminue — le même langage visuel utilisé ailleurs dans le produit pour les entonnoirs d'engagement. Il est coloré par une rampe ordinale (une seule teinte, nuancée selon la position d'étape), et non par la palette catégorielle que d'autres graphiques utilisent. Cette distinction compte : une étape d'entonnoir n'est pas une identité indépendante comme une part de camembert ou une série de graphique à barres, c'est une position dans une séquence ordonnée, et la couleur le reflète.

Sous l'image se trouve le tableau de données toujours visible — jamais facultatif, puisque c'est ce qui rend le bloc utilisable dans les clients en texte seul, les boîtes de réception à images bloquées, et les lecteurs d'écran. Le tableau de l'entonnoir porte deux chiffres que l'image seule ne montre pas :

  • % de la première — la valeur de cette étape en pourcentage de la toute première étape, la lecture « combien de l'audience d'origine reste-t-il ».
  • % de la précédente — la valeur de cette étape en pourcentage de l'étape directement précédente, la baisse étape par étape qu'un entonnoir existe pour révéler.

L'ordre des étapes, c'est la donnée. Comme le sens d'un entonnoir dépend entièrement de l'ordre dans lequel vous avez tapé les étapes, il n'y a pas de repliement d'une étape en surplus dans un panier « Autre » comme le font le graphique en camembert ou le treemap quand ils manquent de place. Fusionner deux étapes déformerait la forme de la séquence. À la place, au-delà de 8 étapes, tout ce qui dépasse le plafond n'est simplement pas dessiné (ni tabulé). Un libellé vide, une valeur non analysable, ou une valeur négative est ignoré d'emblée — une étape d'entonnoir ne peut pas être négative, donc une valeur inférieure à zéro est traitée comme non remplie plutôt que comme une véritable étape valant zéro.

Champs configurables :

  • Titre du graphique — texte d'en-tête facultatif au-dessus du graphique.
  • Étapes (dans l'ordre) — la liste de lignes elle-même : un libellé d'Étape et une Valeur numérique par ligne, saisis dans l'ordre où les étapes progressent. Il n'y a pas de champ de couleur par ligne — la couleur d'une étape est toujours dérivée de sa position, jamais choisie ligne par ligne.
  • Couleur de la rampe — remplace la teinte de base de la rampe ordinale ; laissez vide pour utiliser la couleur de marque du projet.
  • Couleur de fond, remplissage, bordure et rayon de bordure sur la carte.
  • Couleur/taille du titre et couleur/taille de la légende — style de texte pour l'en-tête et le texte de légende/tableau sous l'image.

Si aucune étape n'est encore saisie, le bloc rend son titre et le cadre de la carte avec un simple avis « Ajoutez au moins une ligne de données pour afficher ce graphique » à la place de l'image. Ainsi, il n'y a jamais de graphique cassé ou vide en cours d'édition.

Exemples

Un rapport d'inscription-à-achat (Visité, Inscrit, Ajouté au panier, Acheté) donne à l'équipe une lecture de la baisse. Un email de support ou d'intégration peut suivre un parcours de configuration à plusieurs étapes (Compte créé → Profil complété → Premier projet → Coéquipier invité) pour voir exactement où les nouveaux utilisateurs bloquent. Une équipe de contenu organisant un webinaire peut représenter Inscrit → A assisté → A posé une question → A demandé un suivi pour voir quelle proportion de la liste d'inscription s'est réellement engagée en direct.

À quoi ressemble l'alternative statique

<div style="margin:12px 0;background-color:#ffffff;padding:16px">
  <p style="margin:0 0 8px;font-weight:600;font-size:15px;color:#111827">Signup funnel</p>
  <img src="https://mailinapp.com/api/analytics/chart?d=eyJ0eXBlIjoi...&s=3f9a2b1c..." width="560" height="280"
       alt="Funnel: Visited 1,000 (100%) → Signed up 420 (42%) → Added to cart 180 (18%) → Purchased 95 (9.5%)" />
  <table style="width:100%;border-collapse:collapse;margin-top:4px">
    <tr>
      <th style="text-align:left;padding:4px 8px;font-weight:600">Stage</th>
      <th style="text-align:left;padding:4px 8px;font-weight:600">Value</th>
      <th style="text-align:left;padding:4px 8px;font-weight:600">% of first</th>
      <th style="text-align:left;padding:4px 8px;font-weight:600">% of previous</th>
    </tr>
    <tr>
      <td style="padding:4px 8px">Signed up</td>
      <td style="padding:4px 8px">420</td>
      <td style="padding:4px 8px">42%</td>
      <td style="padding:4px 8px">42%</td>
    </tr>
  </table>
</div>

L'<img> porte une description textuelle complète de chaque étape dans son texte alt, et le tableau en dessous répète les mêmes chiffres en HTML sélectionnable — y compris la colonne de baisse que l'image elle-même ne dessine pas.

Voir aussi