mailinapp
Documentation menu

Blocco Imbuto

Un grafico a fasi progressive per una sequenza come visite → iscrizioni → acquisti, in cui ogni fase è misurata rispetto alla fase che ha aperto la sequenza. Esiste per rispondere a una domanda che un semplice grafico a barre non può: non solo quanto è grande ogni fase, ma quanta parte del pubblico originale è arrivata fin lì.

Come funziona

Il grafico disegna ogni fase inserita come una barra orizzontale, che si restringe da sinistra a destra man mano che il valore scende — lo stesso linguaggio visivo usato altrove nel prodotto per gli imbuti di coinvolgimento. È colorato con una rampa ordinale (una sola tonalità, sfumata in base alla posizione della fase), non con la palette categorica usata da altri grafici. Questa distinzione è importante: una fase di un imbuto non è un'identità indipendente come uno spicchio di torta o una serie di un grafico a barre, è una posizione in una sequenza ordinata, e il colore lo riflette.

Sotto l'immagine c'è la tabella dei dati, sempre visibile — mai facoltativa, poiché è ciò che rende il blocco utilizzabile nei client solo testo, nelle caselle di posta che bloccano le immagini e negli screen reader. La tabella dell'imbuto riporta due numeri che l'immagine da sola non mostra:

  • % sulla prima fase — il valore di questa fase come percentuale della primissima fase, la lettura "quanto resta del pubblico originale".
  • % sulla fase precedente — il valore di questa fase come percentuale della fase immediatamente precedente, il calo passo dopo passo che un imbuto esiste per far emergere.

L'ordine delle fasi è il dato stesso. Poiché il significato di un imbuto dipende interamente dall'ordine in cui hai digitato le fasi, non c'è modo di accorpare una fase in eccesso in un bucket "Altro" come fanno il grafico a torta o il treemap quando esauriscono lo spazio. Unire due fasi tra loro rappresenterebbe in modo scorretto la forma della sequenza. Invece, oltre le 8 fasi, tutto ciò che eccede il limite semplicemente non viene disegnato (né tabellato). Un'etichetta vuota, un valore non interpretabile o un valore negativo vengono scartati del tutto — una fase di un imbuto non può essere negativa, quindi un valore sotto zero viene trattato come non compilato anziché come una fase reale che vale zero.

Campi configurabili:

  • Titolo del grafico — testo di intestazione facoltativo sopra il grafico.
  • Fasi (in ordine) — l'elenco righe vero e proprio: un'etichetta Fase e un Valore numerico per riga, inseriti nell'ordine in cui le fasi progrediscono. Non esiste un campo colore per riga — il colore di una fase deriva sempre dalla sua posizione, non viene scelto riga per riga.
  • Colore della rampa — sovrascrive la tonalità di base della rampa ordinale; lascialo vuoto per usare il colore del brand del progetto.
  • Colore di sfondo, padding, bordo e raggio del bordo della card.
  • Colore/dimensione del titolo e colore/dimensione della legenda — stile del testo per l'intestazione e per il testo di legenda/tabella sotto l'immagine.

Se non è ancora stata inserita nessuna fase, il blocco renderizza il suo titolo e il contorno della card con un semplice avviso "Aggiungi almeno una riga di dati per visualizzare questo grafico" al posto dell'immagine. In questo modo non esiste mai un grafico rotto o vuoto a metà modifica.

Esempi

Un report da iscrizione ad acquisto (Visitato, Iscritto, Aggiunto al carrello, Acquistato) offre al team una lettura del calo di conversione. Un'email di supporto o onboarding può tracciare un flusso di configurazione a più passaggi (Account creato → Profilo completato → Primo progetto → Invitato un collaboratore) per vedere esattamente dove i nuovi utenti si bloccano. Un team contenuti che organizza un webinar può graficare Registrato → Partecipato → Ha fatto una domanda → Ha richiesto un follow-up per vedere quanta parte della lista di registrazione si è effettivamente coinvolta dal vivo.

Come appare il fallback statico

<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> riporta una descrizione testuale completa di ogni fase nel proprio testo alt, e la tabella sottostante ripete gli stessi numeri come HTML selezionabile — inclusa la colonna del calo che l'immagine da sola non disegna.

Vedi anche