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

Qué aprenderás

Aprenda a utilizar bloques de tablas dinámicas para añadir información sobre productos y otros eventos a sus flujos activados por métricas. En este artículo, aprenderá a crear un bloque dinámico utilizando el ejemplo de un recordatorio de carrito abandonado que muestra los productos que se han dejado atrás.

Si utiliza una de las integraciones de comercio electrónico preconstruidas de Klaviyo (por ejemplo, Shopify, BigCommerce, Magento o WooCommerce), no necesitará construir estos bloques manualmente. En su lugar, utilice la biblioteca de flujos para encontrar correos electrónicos de flujo preconstruidos y totalmente funcionales para utilizarlos como plantillas. 

Dentro de un flujo desencadenado por métricas, puede personalizar el contenido de sus correos electrónicos en función del evento que desencadena el flujo. Por ejemplo, si alguien inicia una compra, puede incluir imágenes de productos y precios 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 del carrito.

Antes de empezar

Antes de lanzarse, asegúrese de que dispone de datos de eventos para utilizarlos. Vaya a Analytics > Metrics para asegurarse de que el evento existe en Klaviyo.

Si no está familiarizado con el uso de datos de eventos o perfiles en los mensajes de correo electrónico, consulte nuestra referencia sobre personalización de mensajes como primer paso. 

También será útil comprender los tipos de datos en Klaviyo, en particular las listas (es decir, las matrices). Una matriz es una forma de almacenar varios datos estructurados de la misma manera. Por ejemplo, los artículos de la cesta de un cliente se almacenan como una matriz dentro de un evento Checkout Started. 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 flujos pueden utilizar los bloques de tablas dinámicas? 

Los bloques de tablas dinámicas contienen información sobre uno o varios productos con los que un cliente ha interactuado de algún modo (por ejemplo, los ha comprado o los ha dejado en su cesta). Estos bloques de tablas son útiles para eventos que pueden contener distintos números de productos, en función 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)
• Caja iniciada (flujo de carros abandonados) 
• 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 su evento contiene siempre un único producto. Los eventos que se indican a continuación requieren en su lugar bloques de tablas estáticas. 

• Añadido a la cesta (flujo de caja abandonado)
• Producto visto (flujo de abandono de la navegación) 

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

1. Crea tu flujo

Empieza por crear tu flujo:

1. Navegue hasta la pestaña Flujos 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. Elija el acontecimiento que debe desencadenar su flujo. En este ejemplo, utilizaremos el evento Checkout Started. Esto garantiza que tengamos acceso a los datos del evento necesarios para construir un bloque de carro abandonado.
8. Pulse Hecho. 
9. Arrastre y suelte 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. Haga clic en el bloque de correo electrónico que añadió a su flujo en la última sección. 
2. Junto a la plantilla, haz clic en Seleccionar plantilla. 
3. Elija una plantilla para utilizarla como base.
4. Arrastre un bloque de tabla a su 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. Vuelva a la pestaña Contenido para ajustar los 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á el nombre del array sobre el que planea iterar al campo de colección Fila. Para encontrar el nombre de su 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 almacenan información sobre artículos: 
   
   • Elementos
     Una matriz de nivel superior que contiene una lista simple con el nombre de cada elemento.
   • line_items,
     Una matriz anidada dentro de la matriz extra que contiene más detalles, incluidos el título, el precio, la SKU y la URL de la imagen de cada artículo.
     

   Querrá utilizar la matriz más detallada, line_items, ya que contiene la información detallada necesaria para mostrar en el bloque de tabla repetitiva. Para encontrar la variable adecuada para establecer en el campo de recogida Fila, seleccione dos variables dentro de la primera sección de la matriz y cópielas. En este ejemplo, copie las etiquetas para variant_price y title. Aquí están las dos etiquetas de este ejemplo: 

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

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

3. Ignore las llaves y fíjese en las variables que contienen. Observe que el comienzo de ambas variables es el mismo: event.extra.line_items.0. 

4. Utilice todo hasta (pero excluyendo) el punto y el número al final de esta parte de la variable como su colección de filas. En este ejemplo, el ajuste apropiado para el campo de recogida Row es event.extra.line_items.

Establecer contenido alternativo (opcional)

Aparecerá contenido de reserva si no hay datos en la colección de filas que seleccione. Esto sólo es necesario cuando construye una tabla basada en datos que no aparecen de forma consistente dentro del evento desencadenante. Para añadir contenido alternativo, active la opción Contenido alternativo y añada contenido (es decir, texto o una imagen) al campo que aparece. 

4. Elige un alias de fila

Su alias de fila puede ser cualquier texto que desee utilizar (sin caracteres especiales ni espacios). Utilizará este alias dentro de su bloque de tabla dinámica para identificar las variables que deben extraerse de la matriz que seleccionó 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 su bloque se repite en una lista de entradas de blog, entonces podría utilizar post como alias.

Puede utilizar cualquier alias que desee; sólo asegúrese de utilizar sistemáticamente ese alias en las variables de su matriz (como se indica en los pasos siguientes). 

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

5. Añadir detalles dinámicos del producto

Una vez configurada la fuente de datos, puede utilizar etiquetas para añadir texto en su correo electrónico. Dado que este correo electrónico es para un flujo de carritos abandonados, 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 su bloque:

1. Navegue hasta una de las columnas de la tabla. Si desea una imagen en la primera columna y el texto en la segunda, haga clic en el selector de columnas situado a la derecha de la sección Contenido del bloque.
2. Pegue la variable de evento completa del 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 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.

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

Hipervínculo al título de un producto

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

1. Busque la variable URL del producto en los detalles de su evento.
2. Sustituya la colección de filas y el número por su alias de fila, como con la variable anterior (por ejemplo, {{ event.extra.line_items.url }} se convierte en {{ item.url }}). 
3. Resalte la variable completa para el título del artículo (por ejemplo, {{ item.title }}). 
4. Pulse el icono de enlace y pegue su variable URL en el campo URL.

Consideraciones sobre las variables monetarias

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

{% currency_format variable_name %}

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

{% currency_format item.price %}

6. Añade una imagen

Para insertar una imagen dinámica, busque 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 su integración. Aquí, se encuentra bajo src: {{ event.extra.line_items.0.product.images.0.src }}. Aplique 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 artículo específico.

1. Una vez que disponga de esta variable, diríjase a la columna en la que desea mostrar la imagen (la columna de la izquierda, en este caso).
2. Haga 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. Introduzca la variable de evento de imagen personalizada, {{ item.product.images.0.src }}.
6. Pulse 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. Establezca una anchura máxima para la imagen, empezando con 250-300 y ajustando según sea necesario.
9. Una vez que termine de hacer los cambios, haga clic en Hecho y previsualice su correo electrónico para asegurarse de que aparece como esperaba. Si no aparece ninguna imagen, compruebe 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. 

Puede utilizar estos mismos conceptos para construir bloques dinámicos adicionales para flujos activados 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, utilice un bloque de tabla estática. Para estos eventos, no es necesario establecer una colección de filas o un alias de filas, y puede utilizar variables sin editar directamente a partir de los datos del evento. 

1. Navegue hasta la pestaña Flujos 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. Elija una métrica de un solo producto, como Producto visto o Añadido al carro. 
7. Pulse Hecho. 
8. Arrastre y suelte una acción de correo electrónico en el flujo.
9. Junto a la plantilla, haz clic en Seleccionar plantilla. 
10. Seleccione una plantilla para utilizarla como base.
11. Arrastre un bloque de tabla a su correo electrónico.
12. Por defecto, el campo Datos está configurado como Estático en Estilos; no cambies esta configuración.
    
13. Haga clic en Vista previa & test para ver las variables disponibles para su mensaje. Haga 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. Pulse Seleccionar imagen. 
16. Seleccione Imagen dinámica. 
17. Pegue la variable URL de la imagen que ha copiado en el campo Variable dinámica o URL dinámica. 
18. Pulse Guardar. 
19. Configure la celda derecha para que utilice el tipo de celda Texto. 
20. Copie las variables que desee mostrar (por ejemplo, título del producto, precio del producto) y péguelas en la celda de texto.
    
21. Añada bloques adicionales, como un botón CTA para volver a su cesta, y estilice el correo electrónico como desee.
22. Cuando haya terminado, haga clic en Salir.

Recursos adicionales

• Cómo crear un flujo de carritos abandonados
• Referencia de personalización del mensaje
• Cómo mostrar los productos verticalmente en los correos electrónicos
• Curso: Aplicar conceptos de lógica de programación para construir mensajes más personalizados