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. 

Paso 1: cree su flujo

1. Navegue hasta la pestaña Flujos en Klaviyo.
2. Haga clic en Crear flujo. 
3. Haga clic en Crear desde cero. 
4. Asigne un nombre a su flujo y haga clic en Crear flujo. 
5. En Configuración del activador, haga clic en Métrica. 
6. 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.
7. Pulse Hecho. 
8. Arrastre y suelte una acción de correo electrónico en el flujo.

Paso 2: añadir una tabla dinámica

1. Haga clic en el bloque de correo electrónico que añadió a su flujo en la última sección. 
2. Haga clic en Configurar contenido. 
3. Elija Arrastrar y soltar. 
4. Elija una plantilla para utilizarla como base.
5. Arrastre un bloque de tabla a su correo electrónico.
6. Haga clic en Configuración de la tabla > Dinámica para convertir la tabla en un bloque dinámico. Verá que aparecen 2 campos: Colección de filas y Alias de filas; completaremos esos campos en los próximos pasos.
7. Vuelva a la pestaña Contenido para ajustar los tipos de columna.
8. 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. Haga clic en el selector de filas izquierdo o derecho y, a continuación, en Texto o Imagen para cambiar el tipo de celda.
   

Paso 3: identifique su 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. Haga clic en Vista previa y pruebe.
2. Haga clic en Evento. 
3. Seleccione el evento que desencadena este flujo (por ejemplo, Pago iniciado).
4. Desplácese por los datos de la vista previa de su evento hasta que encuentre una matriz que contenga la información que necesita. Puede utilizar los iconos de flecha situados a la izquierda de los datos para contraer las secciones que no necesite y facilitar la navegación.
   Si nadie ha completado aún la acción desencadenante del flujo, no habrá datos de previsualización disponibles para el flujo. Puede navegar a su sitio para realizar la acción (por ejemplo, añadir artículos a su cesta e iniciar un pago), y entonces su evento se mostrará dentro de las opciones de vista previa de Klaviyo.
   
   En este ejemplo, hay 2 matrices que almacenan información sobre los 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 }}

5. 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. 

6. 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.

Opcional: establecer contenido alternativo

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. 

Paso 4: elija 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. 

Paso 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. Sustituya la colección de filas dentro de la variable (es decir, el texto que utilizó para la colección Fila) y el punto y el número siguientes por el alias seleccionado en el último paso (por ejemplo, artículo), manteniendo los corchetes circundantes. Para este ejemplo, {{ event.extra.line_items.0.title }} se convierte en {{ item.title }}.
   
4. Previsualice el correo electrónico para asegurarse de que aparece el título. Si no aparece, vuelva a comprobar la ortografía, las mayúsculas y el formato del texto, así como la configuración en la pestaña Configuración de la tabla, para asegurarse 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 %}

Paso 6: añadir 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. Haga clic en Añadir imagen dinámica / Examinar imagen.
4. En la pestaña Imagen dinámica, pegue su 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ñada 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.

Paso 7: previsualice su correo electrónico

Tras completar los pasos anteriores, la plantilla de correo electrónico debería tener un aspecto similar al que se muestra a continuación.

Para ver cómo quedaría con contenido dinámico y asegurarse de que los enlaces funcionan correctamente, haga clic en Vista previa y pruebe. Si hay algún error, compruebe la ortografía y la estructura de sus variables, así como la pestaña Configuración de la tabla. 

Puede utilizar estos mismos conceptos para construir bloques dinámicos adicionales para flujos activados en función de diferentes métricas.

Resumen

A modo de recapitulación, siga estos pasos para construir un bloque de tabla dinámica en su correo electrónico de flujo:

1. Cree un flujo activado por métricas.
2. Añada un bloque de tabla y configúrelo como Dinámico.
3. Utilice el modal de vista previa para identificar su colección de filas. 
4. Elija un alias de Fila.
5. Añada detalles dinámicos del producto ajustando las variables.
6. Añada una imagen dinámica.
7. Vista previa.

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. Haga clic en Crear flujo. 
3. Haga clic en Crear desde cero. 
4. Asigne un nombre a su flujo y haga clic en Crear flujo. 
5. En Configuración del activador, haga clic en 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. Haga clic en Seleccionar plantilla para elegir una 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 de la tabla está configurado como Estático en Configuración de la tabla; no cambie 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, configure la celda de la izquierda para que 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