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

Objetivos del artículo

Descubre cómo usar un bloque de tabla en un correo electrónico. Estos bloques pueden mostrar imágenes y texto uno al lado del otro. Los bloques de tabla también pueden ser dinámicos y recorrer datos para personalizar el correo electrónico para cada destinatario.

Cómo entender los bloques de tabla

Hay 2 tipos de bloques de tabla:

• Estática
  Este tipo de bloque de tabla muestra la cantidad exacta de filas y columnas que selecciones. Cada destinatario ve el mismo diseño de tabla, pero el contenido podría variar si usas etiquetas de personalización, eventos, catálogo u otras.
• Dinámico
  Estos bloques de tabla permiten iterar sobre una lista de datos (p. ej., una lista de artículos en un flujo de carrito abandonado o de confirmación de pedido). La cantidad de filas se determina por el número de elementos de la lista: si alguien pidió 1 artículo, tendrá 1 fila; si pidió 5 artículos, 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. Esto usa un bloque dinámico para mostrar varias filas con imágenes, nombres de productos y precios de cada artículo abandonado.

Cuándo usar bloques de tabla

Un bloque de tabla es una de varias formas de poner 2 o más elementos de contenido uno al lado del otro. Las alternativas incluyen bloques de división y columnas.

Obtén más información sobre las diferentes opciones para colocar contenido lado a lado en la tabla de abajo.

Bloques de tabla estáticos

La palabra “static” aquí simplemente significa que el contenido y el número de filas de la tabla se mantienen iguales para cada destinatario. El contenido solo cambia si agregas contenido dinámico, como etiquetas de personalización, de fecha y de catálogo, dentro de un bloque de tabla estático.

Casos de uso de bloques de tabla estática

Usa un bloque de tabla estática para:

• Mostrar un artículo específico, por ejemplo, para ventas flash o lanzamientos de productos.
• Incluye siempre la misma cantidad de artículos (p. ej., muestra el artículo visto más recientemente en un mensaje de abandono de la navegación.
• Crear un mensaje de flujo en el que los datos del evento solo contengan 1 artículo, lo que incluye:
  • Flujos de carrito abandonado (activador de agregar al carrito)
  • Flujos de abandono de la navegación
  • Flujos de reposición de stock y bajada de precio
• Quieres colocar texto estático e imágenes uno al lado del otro

Cómo crear un bloque de tabla estática

1. Accede a un correo electrónico (p. ej., un correo electrónico de campaña, una plantilla o un correo electrónico de flujo).
2. En el menú Bloques, arrastra un bloque de Tabla al lienzo.
   

3. Abre el menú Estilos del bloque. Ten en cuenta que Estático ya está seleccionado, ya que esta es la configuración predeterminada para los bloques de tabla.
   

4. En Columnas, haz clic en Agregar columna para agregar columnas adicionales.
   

5. En Rows, haz clic en Add row para agregar filas adicionales.
   

6. Vuelve a la pestaña Content del bloque.
7. Usa el área del Selector de celdas para elegir qué celda quieres editar.
   

8. Elige si esa celda debe ser texto o una imagen con el menú Contenido de la celda. Repite esto para cada celda.
9. Agrega contenido (es decir, texto o una imagen) debajo del menú Cell content.
10. Una vez que hayas añadido contenido a cada celda, haz clic en la flecha hacia atrás para volver al menú principal de Contenido y seguir creando tu email.
    

Bloques de tabla dinámica

Los bloques de tablas dinámicas iteran sobre un conjunto de datos para repetir contenido en función de la cantidad de entradas que contiene. El bloque se repite hasta que llega al final de la lista. Por ejemplo, puedes mostrar el número exacto de productos en el carrito de una persona. 

Para usar un bloque dinámico, debes hacer referencia a datos con formato de lista anidada, donde cada entrada de la lista siga el mismo formato. El caso de uso más común es la información del producto que se encuentra en el evento activador de un flujo (p. ej., inició el proceso de pago, realizó un pedido), pero también puedes usar un feed web para listar publicaciones de blog o hacer referencia a datos del perfil que tengan formato de lista.

Elementos de un bloque de tabla dinámico

Para crear un bloque de contenido dinámico se necesitan 3 elementos:

• Colección de filas
  La ubicación de los datos que se deben iterar. Al revisar los datos de origen (por ejemplo, los artículos en los metadatos de un evento de Started Checkout), esta es la parte de las etiquetas de plantilla pertinentes que es igual para cada etiqueta.
• Alias de fila
  Una forma abreviada de hacer referencia a la colección de filas mientras la tabla recorre el conjunto de datos. El alias de fila normalmente es item, pero puedes usar cualquier texto.
• Contenido dinámico
  El contenido que aparecerá en cada fila. Por ejemplo, es posible que quieras mostrar una imagen, el nombre del producto, el precio y la información de la variante para cada artículo que alguien dejó en el carrito.

Casos de uso para bloques de tabla dinámicos

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

• Flujos de carrito abandonado (activador de pago iniciado)
• Flujos de confirmación del pedido
• Flujos de venta adicional o venta cruzada

Cómo crear un bloque de tabla dinámica

Esta sección cubre los bloques de tablas dinámicas a un nivel general. Para obtener instrucciones más detalladas sobre este proceso, consulta cómo crear bloques dinámicos en un correo electrónico de flujo.

1. Ve al editor de un correo electrónico. Si usas datos de eventos (p. ej., detalles del carrito abandonado), ve a un correo electrónico dentro de un flujo activado por el evento relevante. 
2. En el menú Bloques, arrastra un bloque de Tabla al lienzo.
   

3. Abre el menú Estilos del bloque y selecciona Dinámico.
   

4. Configura Colección de filas: usa la parte de la etiqueta de personalización que sea consistente en cada artículo que quieras mostrar.
   • Por ejemplo, si {{ event.products.0.imageURL }} es la etiqueta para la imagen del primer artículo y {{ event.products.1.name }} es la etiqueta para el nombre del segundo artículo, entonces la colección de filas debe ser event.products.
   • La colección de filas casi siempre será la parte de la etiqueta que aparece antes del primer número (p. ej., event.extra.line_items si la etiqueta completa es {{ event.extra.line_items.0.product.name }}).
5. Establece el Alias de fila como elemento.
6. Vuelve a la pestaña Content del bloque.
   • Agrega contenido a cada celda de la tabla. Por lo general, la celda de la izquierda es una imagen, y la celda de la derecha es texto que contiene etiqueta dinámicas con información del producto.
7. Reemplaza todo lo que esté antes del primer número en cada etiqueta de tu tabla con el alias de fila (es decir, “item”). 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 y probar para previsualizar el correo electrónico.
   • Asegúrate de estar previsualizando con los datos correctos (p. ej., si este es un mensaje de carrito abandonado, previsualiza con el evento Started checkout) o la tabla no mostrará nada.

Este proceso permite a desarrolladores y especialistas en marketing con conocimientos de código crear contenido altamente personalizado. Si no tienes un desarrollador en tu equipo y no te sientes con confianza para crear este bloque por tu cuenta, considera ponerte en contacto con un socio de Klaviyo para obtener ayuda.

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

Cómo funcionan los bloques de tabla dinámica

Los bloques de tabla dinámica funcionan exactamente como un bucle for en la mayoría de los lenguajes de programación.

• La colección de filas identifica la parte de los datos por la que se va a iterar.
• El alias de fila es un alias para identificar dónde aparece el contenido dinámico.
• Cada etiqueta que use el alias de fila hará referencia a la línea correcta dentro de los datos del evento, según la fila en la que aparezca.

Cuando se muestra el email, Klaviyo recorre cada artículo del conjunto de datos. La primera vez, el alias de fila se sustituye por [row collection].0., que hace referencia al primer elemento del conjunto de datos. La segunda vez, el alias de la fila se reemplaza por [row collection].1., que indica el segundo elemento del conjunto de datos. Este proceso continúa hasta que no quedan elementos y hay una fila por cada elemento del conjunto de datos.

Recursos adicionales