Bloque de tarjeta de indicador clave
Un gran número destacado para la métrica principal que reporta un correo — ingresos, registros, NPS, lo que sea que el destinatario deba ver primero. Es el bloque con el que más suelen abrir los correos de resumen y de panel de control, generalmente tres de ellos en fila sobre un gráfico.
Cómo funciona
Una tarjeta de indicador clave es una etiqueta, un valor grande, un indicador de tendencia opcional, y una minigráfica opcional — en ese orden visual, de arriba a abajo. El valor y la etiqueta siempre se renderizan como texto HTML real, con el tamaño de fuente y color que hayas definido; leer el número principal nunca depende de que cargue una imagen. Solo la minigráfica es una imagen PNG renderizada, y aun así es decoración sobre un número que ya es legible sin ella.
El indicador de tendencia (la "Δ") solo aparece una vez que se definen tanto un valor anterior como una dirección de tendencia. El bloque los trata como una sola unidad escrita a mano, no como dos campos opcionales independientes, así que nunca hay un estado ambiguo donde se muestre un porcentaje Δ sin una flecha que explique qué dirección es buena. El porcentaje en sí siempre se calcula a partir de value frente a previousValue; la dirección (arriba/abajo/plano) no se infiere de si el número subió — la defines tú mismo.
Esto importa porque "subió" no siempre es buena noticia. Un conteo de tickets de soporte o una tasa de abandono que sube es malo, y una tarjeta de indicador clave que reporte cualquiera de los dos necesita decirlo con una flecha de color de bajada aunque el número en bruto haya aumentado. El color de la flecha sigue la dirección que elegiste (verde para arriba, rojo para abajo, ámbar para plano) usando los colores de estado propios del proyecto, no una paleta fija.
La minigráfica es una pequeña imagen de línea de tendencia que traza los valores que escribes en el campo Valores de minigráfica — o, en modo vinculado, los valores por fila del campo vinculado, con un tope de 60 puntos. Solo se renderiza una vez que hay al menos dos puntos entre los cuales trazar una línea. Su color de línea sigue el color de la Δ cuando hay una, así que una tendencia descendente y de aspecto serio literalmente se lee en rojo de un vistazo; sin una Δ configurada, recurre al color de marca del proyecto.
Campos configurables:
- Etiqueta — el nombre de la métrica, más su propio color y tamaño de fuente.
- Valor — el número principal, como una cadena literal (así que también puede contener una etiqueta de combinación).
- Formato — Número, Moneda (USD, sin decimales), o Porcentaje — controla cómo se formatean
valueypreviousValuepara mostrarse, no cómo se almacenan. - Valor anterior — el punto de comparación para la Δ. Requerido junto con Dirección de tendencia para que aparezca cualquier Δ.
- Dirección de tendencia — Ninguna / Arriba / Abajo / Plano. Determina tanto el glifo de la flecha como su color.
- Valores de minigráfica — una lista de números escrita manualmente, trazada de izquierda a derecha.
- Color de fondo, relleno, borde, radio de borde en la tarjeta.
- Pares independientes de color/tamaño de fuente para el texto del valor y el texto de la etiqueta.
Más allá de los valores escritos a mano, una tarjeta de indicador clave puede vincular su valor a una fuente de datos conectada o a los propios resultados de respuesta de una campaña pasada. Una vinculación a fuente de datos empareja un campo Valor con un agregado (Suma, Promedio, Conteo, o Fila más reciente) que colapsa cada fila vinculada en el único número principal. La vinculación reemplaza solo value y los datos de origen de la minigráfica; previousValue y trendDirection siempre se mantienen escritos por el autor, ya que un número "anterior" vinculado necesitaría instantáneas históricas que este esquema no conserva. Mira Vincular gráficos a datos reales para la mecánica completa de ambos modos.
Ejemplos
Subject
Your July performance summary
La forma más rápida de ver este bloque en contexto es iniciar un proyecto con el propósito Panel de control. Genera un encabezado "Rendimiento semanal" y tres tarjetas de indicador clave una junto a otra en columnas: Ingresos como moneda con una Δ ascendente, Nuevos registros como un número plano con una Δ ascendente, Tasa de conversión como porcentaje con una Δ plana. Sigue un gráfico de barras (el preset de cuadrícula de Panel de control). Es un punto de partida con números de ejemplo plausibles, no vinculado a nada hasta que lo conectes.
Un resumen semanal de operaciones podría abrir con tres tarjetas (tickets abiertos, tiempo de respuesta promedio, CSAT), cada una con una Δ contra la semana anterior, dándole al lector el titular antes de que se desplace a cualquier gráfico. Un informe posterior a una campaña puede usar una sola tarjeta grande para "Ingresos totales" vinculada a los pedidos del bloque de producto de esa campaña mediante un agregado de fuente de datos, con una minigráfica que muestra el aumento día a día hasta el envío. El resumen mensual de un negocio de suscripción podría poner en tarjetas los MRR, las cuentas dadas de baja y las cuentas netas nuevas juntas: tres tarjetas, tres direcciones de Δ distintas, cada una coloreada correctamente porque la dirección se autora por tarjeta en lugar de adivinarse a partir del signo del cambio.
Cómo se ve la alternativa estática
<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>
El valor, la etiqueta y la Δ son todos texto real antes de que aparezca siquiera la <img> de la minigráfica; la pequeña línea gris debajo repite los mismos tres datos como texto plano, así que la tarjeta es completamente legible con las imágenes desactivadas.