Cómo utilizar un bloque de tabla en un correo electrónico

Qué aprenderás 

Aprende a utilizar un bloque de tabla en un correo electrónico. Estos bloques pueden mostrar imágenes y texto uno al lado del otro. La tabla bloque también puede ser dinámica, iterando sobre los datos para personalizar el correo electrónico a cada destinatario.

Comprender la tabla bloque 

Hay 2 tipos de bloque de mesa: 

• Estática
  Este tipo de bloque de tabla muestra el número exacto de filas y columnas que selecciones. Cada destinatario ve el mismo diseño de tabla, pero el contenido podría variar si utilizas personalización, evento, catálogo u otra etiqueta. 
• Dinámico
  Estos bloques de tablas te permiten iterar sobre una lista de datos (por ejemplo, una lista de artículos en un carrito abandonado o un flujo de confirmación de pedido). El número de filas viene determinado por el número de elementos de la lista: si alguien pidió 1 elemento, tendrá 1 fila; si pidió 5 elementos, tendrá 5 filas. 

El caso de uso más común para un bloque de tabla dinámica es destacar productos en un mensaje de carrito abandonado. Utiliza un bloque dinámico para mostrar varias filas con imágenes, nombres de productos y precios de cada artículo abandonado. 

Cuándo utilizar la tabla bloque

Un bloque de mesa es una de las varias formas de poner 2 o más piezas de contenido una al lado de la otra. Las alternativas son la división en bloque y las columnas. 

Obtén más información sobre las distintas opciones para colocar contenido uno al lado del otro en la tabla siguiente. 

Bloque de tabla estática 

La palabra "estática" significa simplemente que el contenido y el número de filas de la tabla son los mismos para todos los destinatarios. La única vez que cambia el contenido es si añades contenido dinámico, como personalización, fecha y etiqueta de catálogo, dentro de un bloque de tabla estático. 

Casos de uso del bloque de tablas estáticas

Utiliza un bloque de tabla estática para:

• Muestra un artículo específico, por ejemplo para ventas flash o lanzamientos de productos.
• Incluye siempre el mismo número de artículos (por ejemplo, muestra el artículo visto más recientemente en un mensaje de abandono de navegación. 
• Crea un mensaje de flujo en el que los datos del evento sólo contengan 1 elemento, que incluya: 
  • carrito abandonado flujo (añadido al carrito disparador) 
  • flujo de abandono de la navegación 
  • reposición de stock y caída de precio flujo 
• Te gustaría colocar texto estático e imágenes uno al lado del otro

Cómo crear un bloque de tabla estática

1. Navega hasta un correo electrónico (es decir, una campaña plantillas de correo electrónico, o flujo correo electrónico). 
2. Desde el menú bloque, arrastra un bloque Tabla al lienzo.
   
3. Abre el menú Estilos del bloque. Ten en cuenta que estática ya está seleccionada, ya que es la configuración por defecto para la tabla bloque.
   
4. En Columnas, haz clic en Añadir columna para añadir columnas adicionales.
   
5. En Filas, haz clic en Añadir fila para añadir filas adicionales.
   
6. Vuelve a la pestaña de contenido del bloque. 
7. Utiliza el área del selector de celdas para elegir la celda que deseas editar.
   
8. Elige si esa celda debe ser texto o una imagen utilizando el menú Contenido de la celda. Repite la operación para cada celda.
9. Añade contenido (es decir, texto o una imagen) debajo del menú Contenido de la celda. 
10. Una vez que hayas añadido contenido a cada celda, haz clic en la flecha de volver para regresar al menú principal de contenido y continuar construyendo tu correo electrónico.
    

Bloque de tabla dinámica 

El bloque de tabla dinámica itera sobre un conjunto de datos para repetir el contenido en función del número de entradas que contiene. El bloque itera hasta llegar al final de la lista. Por ejemplo, puedes mostrar el número exacto de productos que hay en el carrito de alguien.  

Para utilizar un bloque dinámico, debes hacer referencia a datos formateados como una lista anidada, en la que cada entrada de la lista siga el mismo formato. El caso de uso más común es la información de producto que se encuentra en un evento desencadenante de un flujo (por ejemplo, página de pago iniciada, pedido realizado), pero también puedes utilizar un flujo web para listar entradas de blog, o referenciar datos del perfil que estén formateados como una lista. 

elemento de una tabla dinámica bloque

Crear un bloque de contenido dinámico requiere 3 elementos: 

• Colección de filas
  La ubicación de los datos sobre los que iterar. Cuando observes tus datos de origen (por ejemplo, los elementos de los metadatos de un evento de Página de inicio de pago ), ésta es la parte de la etiqueta de plantilla relevante que es la misma para cada etiqueta.
• Alias de fila
  Una forma abreviada de hacer referencia a tu colección de filas mientras la tabla itera por tu conjunto de datos. El alias de la fila suele ser artículo, pero puedes utilizar cualquier texto. 
• Contenido dinámico
  El contenido que aparecerá en cada fila. Por ejemplo, puedes querer mostrar una imagen, el nombre del producto, el precio y la información de la variante para cada artículo que alguien haya dejado en su cesta. 

Casos de uso del bloque de tablas dinámicas

Utiliza un bloque de tabla dinámica si haces referencia dinámicamente a una lista de datos y cada entrada de la lista tiene el mismo formato. Esto incluye 

• carrito abandonado flujo (página de pago iniciada gatillo) 
• Flujo de confirmación del pedido 
• Up- o venta cruzada flujo

Cómo crear un bloque de tabla dinámica

Esta sección trata el bloque de tablas dinámicas a alto nivel. Para obtener instrucciones más detalladas sobre este proceso, aprende a construir un bloque dinámico en un flujo de correo electrónico.

1. Navega hasta el editor de un correo electrónico. Si utilizas datos de eventos (por ejemplo, detalles de carrito abandonado), navega a un correo electrónico dentro de un flujo desencadenado por el evento correspondiente.  
2. Desde el menú bloque, arrastra un bloque Tabla al lienzo.
   
3. Abre el menú Estilos del bloque y selecciona Dinámico.
    
4. Establece tu colección de Filas: utiliza la parte de la etiqueta de plantilla que sea consistente en cada artículo que quieras mostrar.
   • Por ejemplo, si {{ event.products.0.imageURL }} es la etiqueta de la imagen del primer elemento y {{ event.products.1.name }} es la etiqueta del nombre del segundo elemento, tu colección de filas debe ser event.products. 
   • La colección de filas será casi siempre la parte de la etiqueta que precede al primer número (por ejemplo, event.extra.line_items si la etiqueta completa es {{ event.extra.line_items.0.product.name }}).
5. Establece tu alias de Fila como elemento. 
6. Vuelve a la pestaña de contenido del bloque. 
   • Añade contenido a cada celda de la tabla. Generalmente, la celda de la izquierda es una imagen, y la de la derecha es un texto que contiene una etiqueta dinámica con información sobre el producto. 
7. Sustituye todo lo que precede al primer número de cada etiqueta de tu tabla por tu alias de fila (es decir, "elemento"). Por ejemplo:
   • {{ event.extra.line_items.0.imageURL }} se convierte en {{ item.imageURL }} 
   • {{ event.items.0.product.name }} se convierte en {{ item.product.name }}
8. Haz clic en Previsualizar & test para previsualizar tu correo electrónico. 
   • Asegúrate de que estás previsualizando utilizando los datos correctos (por ejemplo, si se trata de un mensaje de carrito abandonado, previsualiza utilizando el evento Página de pago iniciada ) o la tabla no mostrará nada. 

Este proceso permite a los desarrolladores y especialistas en marketing expertos en código crear contenidos altamente personalizados. Si no tienes un desarrollador en tu equipo y no te sientes cómodo creando este bloque tú mismo, considera la posibilidad de ponerte en contacto con un socio de Klaviyo para que te ayude.

Obtén más información sobre cómo crear un carrito abandonado flujo o cómo utilizar datos de eventos para personalizar correo electrónico y SMS flujo.

Cómo funciona el bloque de tablas dinámicas

Los bloques de tablas dinámicas funcionan exactamente igual que un bucle for en la mayoría de los lenguajes de programación. 

• La colección Fila identifica la parte de los datos que hay que recorrer en bucle. 
• El alias Fila es un alias para identificar dónde aparece el contenido dinámico. 
• Cada etiqueta que utilice el alias Fila hará referencia a la línea correcta dentro de los datos del evento, en función de la fila en la que aparezca. 

Cuando se genera el correo electrónico, Klaviyo recorre cada elemento del conjunto de datos. La primera vez, el alias de la fila se sustituye por [colección de filas].0., haciendo referencia al primer elemento del conjunto de datos. La segunda vez, el alias de la fila se sustituye por [colección de filas].1., que indica el segundo elemento del conjunto de datos. Este proceso continúa hasta que no queda ningún elemento y hay una fila por cada elemento del conjunto de datos. 

Recursos adicionales

• curso: Personalizar el correo electrónico con Django
• Cómo mostrar productos verticalmente en el correo electrónico