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

Objetivos de aprendizaje

Aprende a utilizar el bloque de tablas dinámicas para añadir información sobre productos y otros eventos a tu flujo desencadenado por métrica. En este artículo, aprenderás a crear un bloque dinámico utilizando el ejemplo de un recordatorio de carrito abandonado que muestra los productos que se han dejado.

Si utilizas una de Klaviyo ecommerce las integraciones preconstruidas de(porShopify ejemplo,,,, BigCommerce Magento WooCommerceo), no necesitas construir estos bloques manualmente. En su lugar, utiliza la biblioteca de flujo para encontrar flujo electrónico prediseñado y totalmente funcional para utilizarlo como plantilla. 

Dentro de un flujo desencadenado métricamente, puedes personalizar el contenido de tu correo electrónico en función del evento que desencadena el flujo. Por ejemplo, si alguien inicia una página de pago, puedes incluir imágenes de productos y precios dentro de un carrito abandonado por correo electrónico 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 del carrito.

Antes de empezar

Antes de lanzarte, asegúrate de que dispones de los datos del evento que vas a utilizar. Navega a análisis > métrica para asegurarte de que el evento existe en Klaviyo.

Si no estás familiarizado con el uso de eventos o datos del perfil en correo electrónico, paga nuestra referencia de personalización de mensajes como primer paso. 

También te será útil comprender los tipos de datos en Klaviyo, en particular la lista (es decir, las matrices). Un array es una forma de tienda, comercio múltiples piezas de datos que se estructuran de la misma manera. Por ejemplo, los artículos del carrito de un cliente son tienda, comercio como una matriz dentro de una página de pago Evento iniciado. La matriz de artículos contiene una entrada por artículo pedido, y cada entrada contiene los detalles de ese artículo (por ejemplo, nombre del artículo, URL de la imagen, cantidad, tamaño, color, etc.). 

¿Qué tipos de flujo pueden utilizar el bloque de tablas dinámicas? 

Los bloques de tablas dinámicas contienen información sobre uno o varios productos con los que un cliente interactuó de alguna manera (por ejemplo, compró o dejó en su carrito). Estos bloques de tablas son útiles para eventos que pueden contener distintos números de productos, dependiendo de la acción de un cliente. Los bloques de tablas dinámicas son útiles para los flujos desencadenados por estos eventos: 

• Pedido realizado (flujo de confirmación del pedido)
• Inicio del proceso de pago (proceso de pago abandonado) 
• Pedido cumplido (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

Los bloques de tablas dinámicas no son útiles si tu evento siempre contiene un único producto. Los eventos que se indican a continuación requieren en su lugar un bloque de tabla estática. 

• Añadido a la cesta (abandonada página de pago flujo)
• Producto visto (flujo de abandono de la navegación) 

Aprende a crear un bloque de tabla estática para eventos de un solo producto. 

1. Crea tu flujo

Empieza por crear tu flujo:

1. Navega hasta la pestaña flujo en Klaviyo.
2. Haz clic en Crear flujo. 
3. Haz clic en Construye el tuyo. 
4. Ponle un nombre a tu flujo y haz clic en Crear flujo. 
5. En Selecciona un activador, haz clic en Tu métrica. 
6. Selecciona desde qué integraciones se envía tu activación métrica (por ejemplo, Shopify).
7. Elige el acontecimiento que debe desencadenar tu flujo. En este ejemplo, utilizaremos el evento Página de pago Iniciada. Esto garantiza que tengamos acceso a los datos de eventos necesarios para construir un bloque de carrito abandonado.
8. Pulsa Hecho. 
9. Arrastra y suelta una acción de correo electrónico en el flujo.

2. Añade una tabla dinámica a tu correo electrónico de flujo

A continuación, añade una tabla dinámica a tu correo electrónico de flujo:

1. Haz clic en el bloque de correo electrónico que añadiste a tu flujo en la última sección. 
2. Junto a la plantilla, haz clic en Seleccionar plantilla. 
3. Elige una plantilla para utilizarla como base.
4. Arrastra un bloque de tabla a tu 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 filas, que rellenarás en los pasos 3 y 4.
6. Vuelve a la pestaña Contenido para ajustar tus tipos de columna.
7. Generalmente, un mensaje de carrito abandonado muestra imágenes de los artículos abandonados a la izquierda y detalles sobre el artículo a la derecha. Haz clic en el selector de filas izquierdo o derecho y, a continuación, en Texto o Imagen para cambiar el tipo de celda.
   

3. Identifica tu colección de filas

En este paso, añadirás el nombre del array sobre el que plan iterar al campo de colección Fila. Para encontrar el nombre de tu matriz:

1. Haz clic en Vista previa de la prueba & .
2. Desplázate por los datos de la vista previa de tu evento hasta que encuentres una matriz que contenga la información que necesitas. 
   Si nadie ha completado aún la acción desencadenante del flujo, no habrá datos de vista previa disponibles para el flujo. Puedes navegar a tu sitio web para realizar la acción (por ejemplo, añadir artículos a tu cesta e iniciar una página de pago), y entonces tu evento se mostrará dentro de las opciones de vista previa de Klaviyo.
   
   En este ejemplo, hay 2 matrices que tienda, comercio información del artículo: 
   
   • Elementos
     Una matriz de nivel superior que contiene una lista simple con el nombre de cada elemento.
   • artículos_de_línea,
     Una matriz anidada dentro de la matriz extra que contiene más detalles, incluidos el título, el precio, el SKU y la URL de la imagen de cada artículo.
     

   Querrás utilizar la matriz más detallada, line_items, ya que contiene la información detallada necesaria para mostrarla en el bloque de tabla repetitiva. Para encontrar la variable adecuada que establecer en el campo Colección de filas, selecciona dos variables dentro de la primera sección de la matriz y cópialas. En este ejemplo, copia la etiqueta para variant_price y title. Aquí tienes las dos etiquetas de este ejemplo: 

   {{ event.extra.line_items.0.variant_price }}

   {{ event.extra.line_items.0.title }}

3. Ignora las llaves y mira las variables que contienen. Observa que el comienzo de ambas variables es el mismo: evento.extra.artículos_línea.0. 

4. Utiliza todo hasta (pero excluyendo) el punto y el número al final de esta parte de la variable como tu colección de Filas. En este ejemplo, el ajuste adecuado para el campo Colección de filas es event.extra.line_items.

Establecer contenido alternativo (opcional)

Aparecerá contenido alternativo si no hay datos en la colección de filas que selecciones. Esto sólo es necesario cuando construyes una tabla basada en datos que no aparecen sistemáticamente en el evento desencadenante. Para añadir contenido alternativo, activa la opción Contenido alternativo y añade contenido (es decir, texto o una imagen) al campo que aparece. 

4. Elige un alias de fila

Tu alias de fila puede ser cualquier texto que quieras utilizar (sin caracteres especiales ni espacios). Utilizarás este alias dentro de tu bloque de tabla dinámica para identificar las variables que deben extraerse de la matriz que seleccionaste anteriormente. Es útil elegir un alias sencillo pero descriptivo, para que sea fácil de recordar. 

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

Puedes utilizar el alias que quieras; sólo tienes que asegurarte de utilizar sistemáticamente ese alias en las variables de tu matriz (como se indica en los pasos siguientes). 

Una vez que hayas rellenado los campos Colección de filas y Alias de filas, estarás listo para empezar a construir tu tabla. 

5. Añadir detalles dinámicos del producto

Una vez configurada la fuente de datos, puedes utilizar etiqueta para añadir texto en tu correo electrónico. Como este correo electrónico es para un flujo de carrito abandonado, es importante mostrar el nombre del producto abandonado, junto con otros detalles como el precio y el enlace a la compra.

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

1. Navega hasta una de las columnas de la tabla. Si quieres una imagen en la primera columna y el texto en la segunda, haz clic en el selector de columna situado a la derecha de la sección Contenido del bloque.
2. Pega la variable de evento completa desde el modal de vista previa (por ejemplo, {{ event.extra.line_items.0.title }}).
3. Sustituye la colección de filas dentro de la variable (es decir, el texto que utilizaste para la colección Fila) y el punto y el número siguientes por el alias seleccionado en el último paso (por ejemplo, elemento), manteniendo los corchetes circundantes. En este ejemplo {{ event.extra.line_items.0.title }} se convierte en {{ item.title }}.
   
4. Previsualiza el correo electrónico para asegurarte de que aparece el título. Si no aparece, vuelve a comprobar la ortografía, las mayúsculas y el formato del texto, así como tu configuración en la pestaña Estilos, para asegurarte de que no hay errores.

Repite los mismos pasos para añadir detalles adicionales del artículo. 

Hiperenlazar el título de un producto

Para añadir un hipervínculo al título del producto: 

1. Busca la variable URL del producto en los detalles de tu evento.
2. Sustituye la colección de filas y el número por tu alias de fila, como en la variable anterior (por ejemplo {{ event.extra.line_items.url }} se convierte en {{ item.url }}). 
3. Resalta la variable completa del título del elemento (por ejemplo, {{ item.title }}). 
4. Haz clic en el icono de enlace y pega tu variable URL en el campo URL.

Consideraciones sobre las variables monetarias

Si el precio de tu artículo se pasa como un número en los detalles de tu evento (sin símbolo de moneda), utiliza la etiqueta currency_format para aplicar el formato de moneda. Para aplicar esta etiqueta, sustituye nombre_variable en el código siguiente por la variable precio completa, excluyendo las llaves de la variable original: 

{% currency_format variable_name %}

Así, tu variable final podría tener este aspecto: 

{% currency_format item.price %}

6. Añade una imagen

Para insertar una imagen dinámica, busca la variable de evento de la imagen en el modal de vista previa. A menudo, esta variable aparece bajo image, img o src, pero depende de tus integraciones. Aquí, está bajo src: {{ event.extra.line_items.0.product.images.0.src }}. Aplica a esta variable los mismos ajustes que en el paso cinco (sustituyendo event.extra.line_items.0 con artículo). Se trata de una matriz de variables de evento dentro de event.extra.line_items, que contiene las imágenes de este elemento concreto.

1. Una vez que tengas esta variable, dirígete a la columna donde quieras mostrar la imagen (la columna de la izquierda, en este caso).
2. Haz clic en Imagen bajo Contenido de celda si actualmente está configurado como Texto.
3. Haz clic en Seleccionar imagen.
4. En la pestaña Imagen dinámica, pega tu variable de imagen en el campo Variable dinámica o URL dinámica.
5. Introduce la variable de evento de imagen personalizada, {{ item.product.images.0.src }}.
6. Haz clic en Guardar.
7. Añade la variable URL del producto del paso cinco en el campo Dirección del enlace para que se pueda hacer clic en la imagen.
8. Establece una anchura máxima para la imagen, empezando por 250-300 y ajustándola según sea necesario.
9. Cuando termines de hacer los cambios, haz clic en Listo y previsualiza tu correo electrónico para asegurarte de que aparece como esperabas. Si no aparece una imagen, comprueba la ortografía de la variable con la del modal de vista previa.

7. Vista previa de tu correo electrónico

Tras completar los pasos anteriores, las plantillas de correo electrónico deberían tener un aspecto similar al que se muestra a continuación cuando se previsualizan.

Para ver cómo quedaría con contenido dinámico y asegurarte de que los enlaces funcionan correctamente, haz clic en Vista previa & test. Si hay algún error, comprueba la ortografía y la estructura de tus variables, así como la pestaña Estilos de tu bloque. 

Puedes utilizar estos mismos conceptos para construir bloques dinámicos adicionales para el flujo desencadenado en función de diferentes métricas.

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

Si un evento sólo puede contener un único producto, utiliza un bloque de tabla estática. Para estos eventos, no es necesario establecer una colección Fila o un alias Fila, y puedes utilizar variables sin editar directamente desde los datos de tu evento. 

1. Navega hasta la pestaña flujo en Klaviyo.
2. Haz clic en Crear flujo. 
3. Haz clic en Construye el tuyo. 
4. Ponle un nombre a tu flujo y haz clic en Crear flujo. 
5. En Selecciona un activador, haz clic en Tu métrica. 
6. Elige una métrica de un solo producto, como Producto visto o Añadido al carrito. 
7. Pulsa Hecho. 
8. Arrastra y suelta una acción de correo electrónico en el flujo.
9. Junto a la plantilla, haz clic en Seleccionar plantilla. 
10. Selecciona una plantilla para utilizarla como base.
11. Arrastra un bloque de tabla a tu correo electrónico.
12. Por defecto, el campo Datos está configurado como Estático en Estilos; no cambies esta configuración.
    
13. Haz clic en Vista previa de la prueba & para ver las variables disponibles para tu mensaje. Haz clic en la variable URL de la imagen para copiarla.
    
14. Utilizando los campos Selector de celda y Contenido de celda, establece que la celda de la izquierda utilice el tipo de celda Imagen.
15. Haz clic en Seleccionar imagen. 
16. Selecciona Imagen dinámica. 
17. Pega la variable URL de la imagen que has copiado en el campo Variable dinámica o URL dinámica. 
18. Haz clic en Guardar. 
19. Configura la celda de la derecha para que utilice el tipo de celda Texto. 
20. Copia las variables que quieras mostrar (por ejemplo, título del producto, precio del producto) y pégalas en la celda de texto.
    
21. Añade bloques adicionales, como un botón CTA para volver a su carrito, y estiliza el correo electrónico como desees.
22. Cuando hayas terminado, haz clic en Salir.

Recursos adicionales

• Cómo crear un flujo de carritos abandonados
• Referencia de personalización de mensajes
• Cómo mostrar productos verticalmente en el correo electrónico
• curso: Aplicar conceptos de lógica de programación para construir mensajes más personalizados