Cómo Enviar Matrices de Datos

Con las matrices de datos puedes crear tarjetas de productos y enviar correos electrónicos dinámicos personalizados, por ejemplo, para informar a un cliente sobre el estado de su pedido.

Ya que las plantillas son dinámicas, puedes incluir no solo texto, imágenes y enlaces, sino también cambiar muchos otros elementos usando variables. Estas plantillas pueden incluir múltiples tarjetas de productos según la cantidad de productos para los pedidos de los clientes.

Ahora hablemos sobre cómo crear un evento utilizando una matriz de datos y agregar variables a tu plantilla de correo electrónico.

Cómo Crear un Evento

Ve a la sección "Automatizaciones" > "Administrador de eventos". Haz clic en Agregar nuevo evento y selecciona "Evento personalizado".

Puedes leer más en: Cómo Crear un Evento.

Junto al nombre de la variable que usarás para enviar tu matriz de datos, selecciona el tipo "Estructura" y grega variables de producto dentro de la estructura.

Para pasar un enlace a la imagen de un producto usa una variable del tipo "String".

Una vez que añadas todas las variables, haz clic en Agregar tu evento se habrá creado correctamente. Copia la URL a la que se enviarán los datos y el cuerpo de la estructura de datos. Ahora debes enviárselo a tu desarrollador para poder enviar datos desde tu sitio a través de una solicitud POST.

Añade una Matriz de Datos a su Plantilla

Puedes insertar una matriz de datos en tu plantilla de correo electrónico utilizando el editor HTML o el generador de arrastrar y soltar. Para marcar el inicio y el final de tu matriz de datos, agrega |[ for item in products ]| y |[ endfor ]|, donde products es el nombre de tu variable de matriz.

Para especificar una variable de una variable de estructura, debes agregar un item. Por ejemplo, si está pasando un enlace a la imagen de un producto usando la variable img , debes agregar una variable en el formato {{item.img}}.

Para mostrar una imagen, usa la etiqueta de visualización de imagen con el atributo de origen: <img scr="{{item.img}}">.

Para agregar un enlace en el que se pueda hacer clic, incluye la etiqueta utilizada para crear enlaces con el atributo de dirección: <a href="/{{item.url}}">.

Creación de una tarjeta de producto

Al crear una tarjeta de producto te recomendamos crear una tabla en la que cada elemento, una imagen o texto, sea una celda de tabla separada, ya que aquí se aplican tanto los estilos de imagen como los estilos de tabla.

Un ejemplo de código con matriz de datos sin estilos:

<div>|[ for item in products ]|
<table>
<tbody>
<tr>
<td><img scr="{{item.img}}"></td>
<td>{{item.name}}</td>
<td>{{item .id}}</td>
<td><a href="/{{item.url}}">text</a></td>
<td>{{item.price}}</td>
< /tr>
</tbody>
</table>
|[ endfor ]|</div>

Puedes agregar estilos en línea a tu tabla usando el atributo de estilo para mostrar la información en tu tarjeta de producto según tu diseño. También puedes crear correos electrónicos dinámicos utilizando nuestras plantillas prediseñadas sin tener ningún conocimiento de HTML.

Mostrar productos en una fila

Los productos en una tarjeta se organizan en una columna verticalmente, lo que significa que hay 1 producto en una fila. Para organizar los productos en una fila horizontalmente, agrega las siguientes líneas dentro de la etiqueta <tbody>:

<table>
    <tbody><!--{% set columns = 4 %}--> <!--{% for item in products%} --> <!--{% if loop.first or loop.index0 is divisible by(columns) %}-->
       <tr><!--{% endif %}-->
            <td>{{ item. product_name }}:{{ item.product_price }}</td>
       <!--{% if loop.last or loop.index is divisible by(columns) %}--></tr>
    <!--{% endif %}--> <!--{% endfor %}--></tbody>
</table>

Dónde:

Adición de una matriz de datos mediante el editor de plantillas

Cambia al modo de edición de plantillas y abre el código fuente de tu plantilla.

Si estás creando una plantilla utilizando nuestro generador de arrastrar y soltar, agrega el elemento "Texto" y haz clic en <> en el panel de edición de elementos para abrir el código fuente.

Inserta una matriz de datos con estilos de tabla.

Un ejemplo de una plantilla con un diseño de tabla agregado a su código fuente:

Comprobar el resultado

Para ver cómo se ve tu plantilla, crea una campaña automatizada utilizando esta plantilla en el elemento "Correo electrónico", inicia el flujo y envía un evento con su dirección de correo electrónico y otros datos.

Puedes leer más sobre un ejemplo real en la sección "Prueba lo que creaste".

Última actualización: 18.01.2023