Cómo crear bloques dinámicos en un correo electrónico de flujo

Objetivos del artículo

Aprende cómo usar bloques de tablas dinámicas para agregar información de productos y de otros eventos a tus flujos activados por métricas. En este artículo, aprenderás a crear un bloque dinámico usando el ejemplo de un recordatorio de carrito abandonado que muestra los productos que se dejaron atrás.

Si usas una de las integraciones de ecommerce prediseñadas de Klaviyo (p. ej., Shopify, BigCommerce, Magento o WooCommerce), no necesitas crear estos bloques manualmente. En cambio, usa la biblioteca de flujos para encontrar correos electrónicos de flujo prediseñados y completamente funcionales para usarlos como plantillas.

Dentro de un flujo activado por una métrica, puedes personalizar el contenido de los correos electrónicos en función del evento que activa el flujo. Por ejemplo, si alguien inicia un proceso de pago, puedes incluir imágenes y precios de productos dentro de un correo electrónico de carrito abandonado para animar a los destinatarios a volver a su carrito y finalizar su compra. El bloque de tabla dinámica se repetirá automáticamente con la información especificada para cada artículo en el carrito.

This content requires Functional cookies to be enabled.

Update Cookie Settings

Antes de empezar

Antes de empezar, asegúrate de tener datos de eventos para usar. Ve a Analytics > Métricas para asegurarte de que el evento exista en Klaviyo.

Si no conoces el uso de datos de eventos o de perfil en los correos electrónicos, como primer paso revisa nuestra referencia sobre personalización de mensajes.

También será útil comprender los tipos de datos en Klaviyo, en particular las listas (es decir, arreglos). Un arreglo es una forma de almacenar varias piezas de datos que están estructuradas de la misma manera. Por ejemplo, los artículos del carrito de un cliente se almacenan como un arreglo dentro de un evento Checkout Started. El arreglo items contiene una entrada por cada artículo pedido, y cada entrada contiene los detalles de ese artículo (por ejemplo, nombre del artículo, URL de la imagen, cantidad, talla, color, etc.).

¿Qué tipos de flujos pueden usar bloques de tabla dinámicos?

Los bloques de tabla dinámica contienen información sobre uno o más productos con los que un cliente interactuó de alguna manera (p. ej., los compró o los dejó en su carrito). Estos bloques de tabla son útiles para eventos que podrían incluir diferentes cantidades de productos, según una acción del cliente. Los bloques de tabla dinámica son útiles para flujos activados por estos eventos:

• Pedido realizado (flujo de confirmación del pedido)
• Proceso de pago iniciado (flujo de proceso de pago abandonado)
• Pedido completado (flujo de confirmación de envío)
• Pedido cancelado (confirmación de cancelación)
• Cualquier otro evento que contenga una lista de uno o más productos

Usa un bloque de tabla estática cuando el evento proporcione los detalles de un solo producto sin una lista de productos sobre la cual repetir. Algunos ejemplos incluyen:

• Agregado al carrito (flujo de carrito abandonado)
• Producto visto (flujo de abandono de la navegación)

Descubre cómo crear un bloque de tabla estática para eventos de un solo producto.

1. Crea tu flujo

Empieza por crear el flujo:

1. Navega hasta la pestaña Flujos en Klaviyo.
2. Haz clic en Crear flujo.
3. Haz clic en Crea la tuya.
4. Asigna un nombre al flujo y haz clic en Crear flujo.
5. En Seleccionar un activador, haz clic en Tus métricas.
6. Selecciona desde qué integración se envía la métrica del activador (p. ej., Shopify).
7. Elige el evento que debe activar tu flujo. En este ejemplo, usaremos el evento Checkout Started. Esto garantiza que tengamos acceso a los datos del evento necesarios para crear un bloque de carrito abandonado.
8. Haz clic en Guardar, revisa el activador y luego haz clic en Confirmar y guardar.
9. Arrastra y suelta una acción de Correo electrónico en el flujo.

2. Agrega una tabla dinámica al correo electrónico del flujo

Luego, agrega una tabla dinámica al correo electrónico del flujo:

1. Haz clic en el bloque de correo electrónico que agregaste a tu flujo en la última sección.
2. Junto a plantilla, haz clic en Seleccionar plantilla.
3. Elige una plantilla para usarla como base.
4. Arrastra un bloque de tabla al correo electrónico.
5. Haz clic en Estilos > Dinámico para convertir la tabla en un bloque dinámico. Verás que aparecen 2 campos: Colección de filas y Alias de fila, que completarás durante los pasos 3 y 4.
6. Haz clic en la pestaña Contenido para ajustar los tipos de columna.
7. Por lo general, un mensaje de carrito abandonado muestra imágenes de los artículos abandonados a la izquierda y detalles del artículo a la derecha. En Selector de celda, selecciona la celda izquierda o derecha, luego haz clic en Texto o Imagen en Contenido de la celda para cambiar el tipo de celda.

3. Identifica la colección de filas

En este paso, agregarás el nombre de la matriz que planeas iterar en el campo Colección de filas. Para encontrar el nombre de la matriz:

1. Haz clic en Vista previa.
2. Selecciona un evento de muestra que contenga datos de producto y, luego, desplázate por sus datos de vista previa hasta que encuentres un arreglo que contenga la información que necesitas.
3. Si todavía nadie ha completado la acción de activación del flujo, no habrá datos de vista previa disponibles para el flujo. Puedes ir a tu sitio para realizar la acción (p. ej., agregar artículos al carrito e iniciar el proceso de pago) y, luego, el evento se mostrará en las opciones de vista previa de Klaviyo.
4. En este ejemplo de Shopify, hay 2 arrays que almacenan información de los artículos:

• Artículos
  Una matriz de nivel superior que contiene una lista simple del nombre de cada artículo.
• line_items
  Un arreglo anidado dentro del objeto extra que contiene más detalles, incluido el título, el precio, el SKU y la URL de la imagen de cada artículo.
  

1. Conviene usar el arreglo más detallado, line_items, ya que contiene la información detallada necesaria para mostrar en el bloque de tabla repetida. Para encontrar la variable adecuada que debes configurar en el campo Colección de filas, selecciona 2 variables dentro de la primera sección del arreglo y cópialas. En este ejemplo, copia las etiquetas de price y title. Estas son las 2 etiquetas de este ejemplo:
2. {{ event.extra.line_items.0.price }}
3. {{ event.extra.line_items.0.title }}

4. Ignora las llaves y mira las variables dentro de ellas. Ten en cuenta que el comienzo de ambas variables es el mismo: event.extra.line_items.0.
5. Usa todo lo que esté antes de .0 como tu colección de filas. En este ejemplo, el valor es event.extra.line_items. Cierra la vista previa, vuelve a la pestaña Estilos de la tabla e ingresa ese valor en Colección de filas sin llaves.

Establece contenido alternativo (opcional)

El contenido de respaldo aparecerá si no hay datos en la colección de filas que selecciones. Esto solo es necesario cuando creas una tabla basada en datos que no aparecen de forma consistente en el evento activador. Para agregar contenido de respaldo, activa la opción Contenido de respaldo y agrega contenido (es decir, texto o una imagen) al campo que aparece.

4. Elige un alias de fila

El alias de fila puede ser cualquier texto que quieras usar (sin caracteres especiales ni espacios). Usarás este alias dentro de tu bloque de tabla dinámica para identificar variables que se deben extraer del arreglo que seleccionaste antes. Es útil elegir un alias simple pero descriptivo, para que sea fácil de recordar.

En este ejemplo, el bloque de tabla dinámica se repite en una lista de artículos en un carrito abandonado, por lo que item es un buen alias para usar. Si el bloque se repite en una lista de publicaciones de blog, podrías usar post como alias.

Puedes usar el alias que quieras; solo asegúrate de usar ese alias de forma consistente en las variables de tu arreglo (como se describe en los siguientes pasos).

Una vez que hayas llenado los campos colección de filas y alias de fila, estarás listo para empezar a crear la tabla.

5. Agrega detalles de producto dinámicos

Después de configurar la fuente de datos, puedes usar etiquetas para agregar texto al correo electrónico. Como este correo electrónico es para un flujo de carrito abandonado, es importante mostrar el nombre del producto que se dejó, junto con otros detalles, como el precio y el enlace para comprarlo.

Para introducir el título del producto en el bloque:

1. En la pestaña Contenido de la tabla, selecciona la celda donde quieres los detalles del producto en Selector de celda. Para una imagen a la izquierda y texto a la derecha, selecciona la celda derecha.
2. Haz doble clic en la celda de texto del correo electrónico y, luego, pega la variable de evento completa desde el modal de vista previa (p. ej., {{ event.extra.line_items.0.title  }}).
3. Reemplaza la colección de filas dentro de la variable (es decir, el texto que usaste para la Colección de filas) y el punto y el número que siguen con el alias seleccionado en el último paso (por ejemplo, item), manteniendo los corchetes que la rodean. Para este ejemplo, {{ event.extra.line_items.0.title  }} se convierte en {{ item.title }}.
   

4. Previsualiza el correo electrónico para asegurarte de que el título aparezca. Si no aparece, revisa la ortografía, el uso de mayúsculas y el formato del texto, así como la configuración en la pestaña Estilos, para asegurarte de que no haya errores.

Repite los mismos pasos para agregar detalles adicionales del artículo.

Agregar un hipervínculo a un título de producto

Para agregar un hipervínculo al título del producto:

1. Encuentra la variable de URL del producto en los detalles de tu evento.
2. Reemplaza la colección de filas y el número por el alias de fila, como con la variable anterior (p. ej., {{ event.extra.line_items.0.url }} se convierte en {{ item.url }}).
3. Resalta la variable completa del título del artículo (por ejemplo, {{ item.title }}).
4. Haz clic en el ícono de enlace y pega la variable de URL en el campo URL. Haz clic en Aplicar.

Consideraciones para las variables de moneda

Si el precio del artículo se pasa como un número en los detalles del evento (sin símbolo de moneda), usa la etiqueta currency_format para aplicar el formato de moneda. Para aplicar esta etiqueta, reemplaza variable_name en el siguiente código con la variable de precio completa, sin incluir las llaves de la variable original:

{% currency_format variable_name %}

Así que tu variable final podría verse así:

{% currency_format item.price %}

6. Añadir una imagen

Para insertar una imagen dinámica, busca la variable de evento de la imagen en la vista previa. A menudo, esta variable aparece en image, img o src, pero depende de la integración. En este ejemplo, es {{ event.extra.line_items.0.product.images.0.src }}. Reemplaza event.extra.line_items.0 por item, como en el paso 5. Mantén el .0 después de images: selecciona la primera imagen de cada producto.

1. Una vez que tengas esta variable, ve a la columna en la que quieres mostrar la imagen (la columna izquierda, en este caso).
2. Haz clic en Imagen en Contenido de celda si actualmente está configurado como Texto.
3. Haz clic en Seleccionar imagen.
4. Selecciona la pestaña Imagen dinámica.
5. Pega la variable de imagen personalizada, {{ item.product.images.0.src }}, en el campo Variable dinámica o URL dinámica.
6. Haz clic en Guardar.
7. Agrega la variable de URL del producto del paso cinco en el campo Dirección del enlace para que se pueda hacer clic en la imagen.
8. Establece el ancho máximo de la imagen; comienza con 250–300 píxeles y ajústalo según sea necesario.

7. Previsualiza tu correo electrónico

Después de completar los pasos anteriores, la plantilla de correo electrónico debería verse similar a la de abajo al previsualizarla.

Haz clic en Vista previa y selecciona un evento de muestra con varios productos, si hay uno disponible. Comprueba que la imagen, los detalles y los enlaces de cada producto coincidan. Si falta una imagen u otro detalle, revisa la ortografía y la estructura de las variables con respecto a los datos de la vista previa, así como la pestaña Estilos del bloque.

Cuando termines, cierra la vista previa y haz clic en Salir. Antes de activar un flujo de carrito abandonado, completa la configuración de tiempo y filtros en nuestra guía del flujo de carrito abandonado.

Puedes usar estos mismos conceptos para crear bloques dinámicos adicionales para flujo que se activan según distintas métricas.

Crea un bloque de tabla estática para eventos de un solo producto

Si un evento proporciona los detalles de un solo producto sin una lista de productos, usa un bloque de tabla estática. Para estos eventos, no es necesario configurar una colección de filas ni un alias de fila, y puedes usar variables sin editar directamente desde los datos del evento.

1. Navega hasta la pestaña Flujos en Klaviyo.
2. Haz clic en Crear flujo.
3. Haz clic en Crea la tuya.
4. Asigna un nombre al flujo y haz clic en Crear flujo.
5. En Seleccionar un activador, haz clic en Tus métricas.
6. Selecciona la integración que envía la métrica y luego elige una métrica de un solo producto, como Vio producto o Agregó al carrito.
7. Haz clic en Guardar, revisa el activador y luego haz clic en Confirmar y guardar.
8. Arrastra y suelta una acción de Correo electrónico en el flujo.
9. Haz clic en el bloque de correo electrónico y luego haz clic en Seleccionar plantilla junto a Plantilla.
10. Selecciona una plantilla para usarla como base.
11. Arrastra un bloque de tabla al correo electrónico.
12. De forma predeterminada, el campo Data se configura como Static en Styles; no cambies esta configuración.
    

13. Haz clic en Vista previa para ver las variables disponibles para el mensaje. Haz clic en la variable de URL de la imagen para copiarla y luego cierra la vista previa.
    

14. Con los campos Selector de celda y Contenido de celda, configura la celda izquierda para que use el tipo de celda Imagen.
15. Haz clic en Seleccionar imagen.
16. Selecciona Imagen dinámica.
17. Pega la variable de URL de la imagen que copiaste en el campo Variable dinámica o URL dinámica.
18. Haz clic en Guardar.
19. Configura la celda de la derecha para usar el tipo de celda Texto.
20. Haz clic en Vista previa para copiar una variable que te gustaría mostrar (p. ej., el título del producto o el precio del producto). Cierra la vista previa, luego haz doble clic en la celda de texto de tu correo electrónico y pega la variable. Repite el proceso con cualquier otro detalle que quieras agregar.

21. Agrega bloques adicionales, como un botón de llamada a la acción para volver al carrito, y diseña el correo electrónico como quieras.
22. Haz clic en Vista previa y revisa la imagen, el texto y los enlaces del producto usando un evento de muestra para el activador del flujo.
23. Cuando termines, cierra la vista previa y haz clic en Salir.

Recursos adicionales