Cómo usar un bloque de tabla en un email

Qué aprenderás

Descubre cómo usar un bloque de tabla en un email. Estos bloques pueden mostrar imágenes y texto en paralelo. Los bloques de tabla también pueden ser dinámicos e iterar sobre datos para personalizar el email para cada destinatario.

Cómo entender los bloques de tabla

Hay 2 tipos de bloques de tabla:

• Estático
  Este tipo de bloque de tabla muestra el número exacto de filas y columnas que seleccionas. Cada destinatario ve el mismo diseño de tabla, pero el contenido podría variar si utilizas etiquetas de personalización, eventos, catálogos u otras.
• Dinámico
  Estos bloques de tabla te permiten iterar sobre una lista de datos (por ejemplo, una lista de artículos en un carrito abandonado o en 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 artículo, tendrá 1 fila; si pidió 5 artículos, tendrá 5 filas.

El caso de uso más habitual de un bloque de tabla dinámica es destacar productos en un mensaje de carrito abandonado. Esto utiliza 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 las varias maneras de colocar 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ática

La palabra «static» aquí simplemente significa que el contenido y el número de filas de la tabla se mantienen iguales para todos los destinatarios. La única vez que cambia el contenido es si añades contenido dinámico, como personalización, fecha y etiquetas de catálogo, dentro de un bloque de tabla static.

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 el mismo número de artículos (p. ej., 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 solo contengan 1 artículo, que incluye:
  • Flujos de carrito abandonado (activador añadido al carrito)
  • Flujos de abandono de la navegación
  • Flujos de reposición de stock y bajada de precio
• Te gustaría colocar texto estático e imágenes en paralelo

Cómo crear un bloque de tabla estática

1. Accede a un email (es decir, un email de campaña, una plantilla o un email de flujo).
2. En el menú Bloques, arrastra un bloque Tabla al lienzo.
   

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

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 Contenido del bloque.
7. Usa el área Selector de celda para elegir qué celda te gustaría editar.
   

8. Elige si esa celda debe ser texto o una imagen mediante el menú Contenido de celda. Repite el proceso para cada celda.
9. Añade contenido (es decir, texto o una imagen) debajo del menú Contenido de celda.
10. Una vez que hayas añadido contenido en 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 tabla dinámica recorren un conjunto de datos para repetir contenido en función del número 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 alguien. 

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

Elementos de un bloque de tabla dinámica

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

• Recopilación de filas
  La ubicación de los datos sobre los que iterar. Al revisar los datos de origen (p. ej., los artículos en los metadatos de un evento Started Checkout), esta es la parte de las etiquetas de plantilla relevantes 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 recorre tu conjunto de datos. El alias de fila suele ser 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 su carrito.

Casos de uso de los bloques de tabla dinámicos

Utiliza un bloque de tabla dinámica si haces referencia dinámicamente a una lista de datos y todas las entradas de la lista tienen el mismo formato. Esto incluye:

• Flujos de carrito abandonado (desencadenante: inicio de pago)
• Flujos de confirmación de pedido
• Flujos de venta adicional o venta cruzada

Cómo crear un bloque de tabla dinámica

Esta sección ofrece una descripción general de los bloques de tablas dinámicas. Para obtener instrucciones más detalladas sobre este proceso, consulta cómo crear bloques dinámicos en un email de flujo.

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

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

4. Configura tu Recopilación de filas: usa la parte de la etiqueta de personalización que sea coherente en cada elemento que quieras mostrar.
   • Por ejemplo, si {{ event.products.0.imageURL }} es la etiqueta de la imagen del primer artículo y {{ event.products.1.name }} es la etiqueta del nombre del segundo artículo, entonces tu colección de filas debería ser event.products.
   • La colección de filas casi siempre será 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 item.
6. Vuelve a la pestaña Contenido del bloque.
   • Añade 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 etiquetas dinámicas con información del producto.
7. Sustituye todo lo que precede al primer número en cada etiqueta de tu tabla por el alias de tu fila (es decir, «item»). Por ejemplo:
   • {{ event.extra.line_items.0.imageURL }} pasa a ser {{ item.imageURL }}
   • {{ event.items.0.product.name }} se convierte en {{ item.product.name }}
8. Haz clic en Previsualizar y probar para previsualizar tu email.
   • Asegúrate de que estás previsualizando con los datos correctos (por ejemplo, si este es un mensaje de carrito abandonado, previsualiza usando 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 muy personalizado. Si no tienes un desarrollador en tu equipo y no te sientes cómodo creando este bloque tú mismo, 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 email 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 Row collection 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, en función de la fila en la que aparezca.

Cuando se renderiza 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 artículo del conjunto de datos. La segunda vez, el alias de fila se sustituye por [row collection].1., lo que indica el segundo artículo del conjunto de datos. Este proceso continúa hasta que no quedan artículos y hay una fila por cada artículo del conjunto de datos.

Recursos adicionales