Bloques de analítica y gráficos
Esta página es un resumen rápido de los trece bloques de gráficos e indicadores clave — cada uno también tiene su propia página dedicada con la lista completa de campos y ejemplos trabajados, enlazada al final de su sección más abajo.
Trece bloques de gráficos e indicadores clave para contar una historia de datos dentro del correo mismo — un resumen semanal, un recuento de ventas, un informe que tus destinatarios no tienen que hacer clic para leer. Viven en la misma sección Contenido de la paleta Insertar que cualquier otro bloque; no hay una categoría "Analítica" separada.
Algunas cosas son ciertas para cada gráfico de esta familia, así que se dicen una vez aquí en lugar de trece veces más abajo:
- Cada gráfico se renderiza como una única imagen generada en el servidor — sin biblioteca de gráficos del lado del cliente, sin JavaScript — con una tabla de datos visible justo al lado. La tabla no es una nota al pie ni un añadido de accesibilidad tardío: son los mismos números que la imagen, en HTML plano, y es lo que hace que el gráfico sea realmente utilizable en clientes de solo texto, bandejas de entrada con imágenes bloqueadas, y lectores de pantalla. Nunca es opcional.
- Los números de un gráfico se fijan en el momento del envío o la exportación — la misma convención de "preciso al momento del envío" que la fecha límite del temporizador de cuenta regresiva o la insignia de inventario de un bloque de producto, no un widget que se actualiza en vivo. (La única excepción: un gráfico vinculado a los propios resultados de respuesta de una campaña se lee en vivo en el momento de renderizar — mira Vincular gráficos a datos reales).
- Nunca hay gráficos de doble eje. Dos medidas de escala distinta son dos bloques de gráfico uno al lado del otro, no un gráfico fingiendo tener dos ejes Y.
Tarjeta de indicador clave
Un número grande para una métrica principal — ingresos, registros, lo que sea que el correo esté reportando.
- Campos: una etiqueta, un valor con un formato (número plano, moneda, o porcentaje), un valor anterior opcional para mostrar una Δ contra él, y una minigráfica opcional.
- La dirección de la Δ (arriba/abajo/plano) es algo que defines tú mismo, no algo que se infiere de si los números subieron — así mantienes el control de qué cuenta como buena noticia.
- La minigráfica es una pequeña imagen de tendencia; la etiqueta/valor/Δ debajo de ella siempre es texto HTML real, nunca dependiente de que la imagen se renderice.
Gráfico de barras
Barras verticales u horizontales, hasta 3 series definidas.
- Pasadas alrededor de 8 categorías, el gráfico deja de mostrar etiquetas de valor directas en cada barra en favor de un eje compartido con líneas de cuadrícula — leer números exactos en una docena de barras etiquetadas deja de ser legible antes de eso, así que la tabla de datos se convierte en la fuente precisa.
Gráfico de líneas / área
La misma forma de creación fila por fila que el gráfico de barras — categorías en las filas, hasta 3 series en las columnas — más un interruptor filled para la variante de gráfico de área.
- Los marcadores de punto en cada valor de datos empiezan a reducirse pasados alrededor de 20 puntos para que la línea no se convierta en una fila sólida de puntos; la línea trazada, el eje compartido y la tabla de datos siguen mostrando la tendencia después de eso.
Gráfico circular / de dona
Un valor por categoría, dibujado como un círculo o (en modo dona) un anillo con una etiqueta central opcional para un número estilo indicador clave en el medio.
- Pasadas 8 porciones, las más pequeñas se agrupan en una única porción "Otros" en lugar de que el gráfico se vuelva ilegiblemente delgado — la leyenda y la tabla de datos muestran ambas el mismo agrupamiento.
Gráfico de dispersión / burbujas
Puntos X/Y, con una columna opcional de series para agrupar puntos en varios colores y una columna opcional de size para convertirlo en un gráfico de burbujas.
- La identidad de la serie proviene de lo que escribas en la columna Serie — déjala en blanco y cada punto comparte el propio título del bloque como su única serie.
Histograma
Agrupa una columna de valores en bruto en rangos automáticamente — dale números individuales, no cubos ya contados, y él hace el agrupamiento por ti.
- Controlas aproximadamente a cuántos grupos apuntar; si cada valor que escribiste es idéntico, colapsa en un solo grupo en lugar de dibujar diecinueve vacíos.
Mapa de calor
Una cuadrícula de fila × columna de valores, sombreada en una rampa de color secuencial de claro a oscuro.
- Las celdas muestran su valor exacto como texto solo mientras la cuadrícula se mantiene lo bastante pequeña para leerla de un vistazo — pasado eso, la rampa en sí (más la tabla de datos siempre visible) transmite los números en lugar de apretar texto en celdas diminutas. Una combinación verdaderamente faltante (ninguna fila para ese par de fila/columna) se renderiza como un gris distintivo de "sin datos" en lugar de parecer un cero.
Embudo
Valores de etapa ordenados — visitas → registros → compras, ese tipo de secuencia — cada uno mostrado como un porcentaje de la primera etapa.
- Como el significado de un embudo depende enteramente 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/de árbol — una etapa que excede el límite simplemente no se dibuja. La tabla de datos agrega tanto "porcentaje de la primera etapa" como "porcentaje de la etapa anterior" (la caída paso a paso), que la imagen sola no muestra.
Cascada
Un gráfico de total acumulado — valor inicial, luego una secuencia de barras de aumento/disminución, opcionalmente terminando en una barra de "total" definida a mitad de camino o al final.
- Las barras de aumento/disminución/total siempre usan los mismos tres colores reservados, así una cascada se lee de forma consistente en cada correo en lugar de como sea que elegiste los colores la última vez. Igual que el embudo, una barra desbordada se descarta en lugar de agruparse, ya que las matemáticas del total acumulado dependen del orden definido.
Medidor
Una sola métrica mostrada contra bandas de umbral de bien/advertencia/grave que tú defines — un dial estilo aguja, no un gráfico basado en filas.
- El único bloque de esta familia sin una tabla de datos debajo, por la misma razón que la tarjeta de indicador clave: el valor y su estado ya son texto HTML real junto a la imagen, no números encerrados en una imagen.
Radar
Una comparación multieje — hasta 3 series trazadas en ejes compartidos, útil para comparar categorías en varias dimensiones a la vez (por ejemplo, un producto puntuado en precio/calidad/velocidad/soporte).
- Necesita al menos 3 ejes para dibujarse siquiera como un polígono — menos que eso muestra el mismo marcador de "agrega más datos" que recibe un gráfico vacío. A diferencia del resto de la familia, esto es tanto un piso como un techo (limitado a 8 ejes).
Mapa de árbol
Mosaicos proporcionales dimensionados por valor, dispuestos para llenar un rectángulo (un diseño "cuadrado") en lugar de los ángulos de un gráfico circular — la misma forma de creación de un valor por categoría que el gráfico circular, solo que con una forma distinta para comparar la proporción de un todo.
- Sigue la misma regla de agrupamiento pasadas 8 porciones que el gráfico circular, ya que comparte la misma preparación de datos subyacente.
Sankey
Flujo proporcional entre nodos nombrados — filas de Desde, Hacia, y Valor, por ejemplo fuente de tráfico → página de destino → conversión.
- Los nodos no se definen directamente; se derivan de las etiquetas que se repiten en tus filas Desde/Hacia, y su posición de izquierda a derecha se calcula automáticamente a partir de la dirección del flujo.
- Pasado el límite de nodos o enlaces, un nodo desbordado se descarta, no se agrupa — fusionar dos extremos de flujo distintos en uno tergiversaría lo que muestra el diagrama, a diferencia de la porción "Otros" de un gráfico circular. La tabla de datos sigue listando cada fila que definiste sin importar si llegó al diagrama dibujado, así que nada de lo que escribiste desaparece silenciosamente de la vista.
Vinculación a datos reales
Tarjeta de indicador clave, gráfico de barras, gráfico de líneas, y gráfico circular — y solo esos cuatro — pueden vincularse a una fuente de datos conectada o a los propios resultados de respuesta de una campaña pasada en lugar de números que escribes a mano. También hay un iniciador de proyecto Panel de control de un clic que crea junto una fila de indicadores clave y un gráfico de barras. Mira Vincular gráficos a datos reales para saber cómo.