mailinapp
Documentation menu

Bloc Carte de score KPI

Une grande valeur principale pour l'indicateur sur lequel un email fait un rapport — revenu, inscriptions, NPS, ce que le destinataire doit voir en premier. C'est le bloc par lequel démarrent le plus souvent les emails de digest et de tableau de bord, généralement trois d'entre eux côte à côte au-dessus d'un graphique.

Comment ça fonctionne

Une carte de score est un libellé, une grande valeur, un indicateur de tendance facultatif, et un mini-graphique facultatif — dans cet ordre visuel, de haut en bas. La valeur et le libellé sont toujours rendus comme du vrai texte HTML, à la taille de police et à la couleur que vous avez définies ; rien dans la lecture du chiffre principal ne dépend du chargement d'une image. Seul le mini-graphique est un PNG généré, et même alors, ce n'est qu'une décoration au-dessus d'un chiffre déjà lisible sans lui.

L'indicateur de tendance (le « Δ ») n'apparaît qu'une fois qu'une valeur précédente et une direction de tendance sont toutes deux définies. Le bloc les traite comme une seule unité saisie, et non comme deux champs facultatifs indépendants, de sorte qu'il n'y a jamais d'état ambigu où un pourcentage Δ s'affiche sans flèche pour expliquer quelle direction est bonne. Le pourcentage lui-même est toujours calculé à partir de value par rapport à previousValue ; la direction (haut/bas/stable) n'est pas déduite du fait que le chiffre ait augmenté — vous la définissez vous-même.

Cela compte, car « ça a augmenté » n'est pas toujours une bonne nouvelle. Un nombre de tickets de support ou un taux de résiliation qui augmente est une mauvaise chose, et une carte de score qui en rend compte doit le signaler par une flèche colorée en baisse même si le chiffre brut a augmenté. La couleur de la flèche suit la direction que vous avez choisie (vert pour hausse, rouge pour baisse, ambre pour stable) en utilisant les propres couleurs de statut du projet, pas une palette figée.

Le mini-graphique est une petite image de ligne de tendance traçant les valeurs que vous saisissez dans le champ Valeurs du mini-graphique — ou, en mode lié, les valeurs par ligne du champ lié, plafonnées à 60 points. Il ne se rend qu'une fois qu'il y a au moins deux points entre lesquels tracer une ligne. Sa couleur de ligne suit celle du Δ lorsqu'il y en a un, de sorte qu'une tendance descendante et préoccupante se lit littéralement en rouge d'un coup d'œil ; sans Δ configuré, elle revient à la couleur de marque du projet.

Champs configurables :

  • Libellé — le nom de l'indicateur, plus sa propre couleur et taille de police.
  • Valeur — le chiffre principal, sous forme de chaîne littérale (elle peut donc aussi contenir une balise de fusion).
  • Format — Nombre, Devise (USD, sans décimales), ou Pourcentage — contrôle la façon dont value et previousValue sont formatés pour l'affichage, pas la façon dont ils sont stockés.
  • Valeur précédente — le point de comparaison pour le Δ. Requis avec Direction de tendance pour qu'un Δ s'affiche.
  • Direction de tendance — Aucune / Hausse / Baisse / Stable. Détermine à la fois le glyphe de la flèche et sa couleur.
  • Valeurs du mini-graphique — une liste de nombres saisie manuellement, tracée de gauche à droite.
  • Couleur de fond, marge intérieure, bordure, rayon de bordure sur la carte.
  • Paires indépendantes de couleur/taille de police pour le texte de la valeur et celui du libellé.

Au-delà des valeurs saisies, une carte de score KPI peut lier sa valeur à une source de données connectée ou aux propres résultats de réponse d'une campagne passée. Une liaison à une source de données associe un champ Valeur à un agrégat (Somme, Moyenne, Compte, ou Dernière ligne) qui réduit chaque ligne liée au seul chiffre principal. La liaison remplace uniquement value et les données source du mini-graphique ; previousValue et trendDirection restent toujours saisis par l'auteur, car un chiffre « précédent » lié nécessiterait des instantanés historiques que ce schéma ne conserve pas. Voir Lier des graphiques à de vraies données pour la mécanique complète des deux modes.

Exemples

Subject

Your July performance summary

La façon la plus rapide de voir ce bloc en contexte est de démarrer un projet avec l'objectif Tableau de bord. Il amorce un titre « Performance hebdomadaire » et trois cartes de score KPI côte à côte en colonnes : Revenu en devise avec un Δ à la hausse, Nouvelles inscriptions en nombre simple avec un Δ à la hausse, Taux de conversion en pourcentage avec un Δ stable. Un graphique à barres suit (le préréglage de grille Tableau de bord). C'est un point de départ avec des chiffres d'exemple plausibles, non lié à quoi que ce soit tant que vous ne le connectez pas.

Un digest hebdomadaire d'exploitation pourrait démarrer avec trois cartes de score (tickets ouverts, temps de réponse moyen, CSAT), chacune avec un Δ par rapport à la semaine précédente, donnant au lecteur le titre principal avant qu'il ne défile jusqu'à un graphique. Un rapport post-campagne peut utiliser une seule grande carte de score pour « Revenu total » liée aux commandes du bloc produit de cette campagne via un agrégat de source de données, avec un mini-graphique montrant la montée jour par jour jusqu'à l'envoi. Le récapitulatif mensuel d'une entreprise d'abonnement pourrait mettre en carte le MRR, les comptes résiliés, et les nouveaux comptes nets ensemble : trois cartes, trois directions de Δ différentes, chacune correctement colorée car la direction est saisie par carte plutôt que devinée à partir du signe du changement.

À quoi ressemble l'alternative statique

<div style="margin:12px 0;padding:16px;background-color:#ffffff;border-radius:8px">
  <p style="margin:0 0 4px;font-weight:600;font-size:13px;color:#6b7280">Revenue</p>
  <p style="margin:0 0 6px;font-weight:700;font-size:32px;color:#111827">
    $24,800
    <span style="font-size:14px;font-weight:600;color:#16a34a">▲ +18.1%</span>
  </p>
  <img src="https://mailinapp.com/api/analytics/chart?d=eyJ0eXBlIjoi...&s=3f9a2b1c..." width="160" height="40"
       alt="Trend sparkline, upward: 18000, 19500, 21000, 24800"
       style="display:block;max-width:100%;height:auto;margin:4px 0" />
  <p style="margin:4px 0 0;font-size:11px;color:#9ca3af">Revenue — $24,800 — ▲ +18.1% vs previous</p>
</div>

La valeur, le libellé, et le Δ sont tous du vrai texte avant même que l'<img> du mini-graphique n'apparaisse ; la petite ligne grise en dessous répète les trois mêmes faits en texte brut, de sorte que la carte reste entièrement lisible même sans images.

Voir aussi