mailinapp
Documentation menu

Bloque de embudo

Un gráfico de etapas progresivas para una secuencia como visitas → registros → compras, donde cada etapa se mide contra la etapa que inició la secuencia. Existe para responder una pregunta que un gráfico de barras simple no puede: no solo qué tan grande es cada etapa, sino qué proporción de la audiencia original llegó hasta ahí.

Cómo funciona

El gráfico dibuja cada etapa escrita como una barra horizontal, que se angosta de izquierda a derecha a medida que el valor baja — el mismo lenguaje visual usado en otras partes del producto para embudos de interacción. Se colorea con una rampa ordinal (un solo tono, sombreado según la posición de la etapa), no con la paleta categórica que usan otros gráficos. Esa distinción importa: una etapa de embudo no es una identidad independiente como una porción de gráfico circular o una serie de gráfico de barras, es una posición en una secuencia ordenada, y el color lo refleja.

Debajo de la imagen se encuentra la tabla de datos siempre visible — nunca opcional, ya que es lo que hace que el bloque sea utilizable en clientes de solo texto, bandejas de entrada con imágenes bloqueadas, y lectores de pantalla. La tabla del embudo lleva dos números que la imagen sola no muestra:

  • % del primero — el valor de esta etapa como porcentaje de la primera etapa, la lectura de "cuánto queda de la audiencia original".
  • % del anterior — el valor de esta etapa como porcentaje de la etapa justo anterior, la caída paso a paso que un embudo existe para revelar.

El orden de las etapas es el dato. Como el significado de un embudo depende completamente del orden en que escribiste las etapas, no hay forma de agrupar una etapa desbordada en un cubo "Otros" como hacen el gráfico circular o el mapa de árbol cuando se quedan sin espacio. Fusionar dos etapas distorsionaría la forma de la secuencia. En cambio, pasadas 8 etapas, todo lo que exceda el límite simplemente no se dibuja (ni se incluye en la tabla). Una etiqueta en blanco, un valor que no se puede interpretar, o un valor negativo se omite directamente — una etapa de embudo no puede ser negativa, así que un valor por debajo de cero se trata como no completado en lugar de una etapa real que vale cero.

Campos configurables:

  • Título del gráfico — texto de encabezado opcional encima del gráfico.
  • Etapas (en orden) — la propia lista de filas: una etiqueta de Etapa y un Valor numérico por fila, escritas en el orden en que progresan las etapas. No hay un campo de color por fila — el color de una etapa siempre se deriva de su posición, no se elige por fila.
  • Color de rampa — anula el tono base de la rampa ordinal; déjalo en blanco para usar el color de marca del proyecto.
  • Color de fondo, relleno, borde y radio de borde en la tarjeta.
  • Color/tamaño del título y color/tamaño de la leyenda — estilo de texto para el encabezado y el texto de la leyenda/tabla debajo de la imagen.

Si aún no se ha escrito ninguna etapa, el bloque renderiza su título y el marco de la tarjeta con un simple aviso de "Agrega al menos una fila de datos para renderizar este gráfico" en lugar de la imagen. Así, nunca hay un gráfico roto o vacío a mitad de la edición.

Ejemplos

Un informe de registro a compra (Visitó, Se registró, Agregó al carrito, Compró) le da al equipo una lectura de abandono. Un correo de soporte o incorporación puede rastrear un flujo de configuración de varios pasos (Cuenta creada → Perfil completado → Primer proyecto → Invitó a un compañero) para ver exactamente dónde se estancan los nuevos usuarios. Un equipo de contenido que organiza un webinar puede graficar Se registró → Asistió → Hizo una pregunta → Solicitó seguimiento para ver qué proporción de la lista de registro realmente participó en vivo.

Cómo se ve la alternativa estática

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

El <img> lleva una descripción textual completa de cada etapa en su texto alt, y la tabla debajo repite los mismos números como HTML seleccionable — incluyendo la columna de caída que la imagen misma no dibuja.

Relacionado