Crear bloque de productos personalizados en un email

Los bloques de productos dinámicos sirven para mostrar recomendaciones personalizadas de productos a tus contactos. Esto permite que los contenidos de tus emails se adapten al comportamiento y al ciclo de vida de cada usuario, manteniéndose actualizados y relevantes, lo que mejora las conversiones.

En este artículo, aprenderás cómo crear un bloque de productos personalizados en un email.

  

Tiempo de implementación: 15 minutos.
Dificultad: Baja
¿Cuándo utilizarlo?: Cuando necesites mostrar productos personalizados en tus emails.

  

Antes de leer este artículo, te recomendamos echar un vistazo al Editor de email.

 

PASO 1. Crea un diseño de email con un bloque de productos dinámico

1. Accede a "Contenidos > Emails" y haz clic en  Crear nuevo email.

Bloque_Productos_Personalizados_Email_-_1.png

2. Añade un componente  de tipo "Contenido dinámico", arrastrando el bloque desde la pestaña Componentes al editor.

Bloque_Productos_Personalizados_Email_-_2.png

 

PASO 2. Personaliza tu bloque de productos

 

Puedes previsualizar cualquier cambio en el proceso de creación y personalización de un bloque de productos. Siempre que consideres necesario, sigue las instrucciones del PASO 3  para validar tus cambios, antes de continuar con el siguiente punto.

 

2.1. Configuración básica

(En este apartado se van a indicar los datos identificativos y estilo general del bloque de productos).

3. Haz clic en  (Editar elemento) en el menú contextual que aparece al pasar el ratón sobre el bloque insertado.

Bloque_Productos_Personalizados_Email_-_3.png

4. (Opcional) En Nombre, establece un título para identificar el bloque.

 

Si usas más de un bloque de productos dinámico, te recomendamos establecer un nombre a cada uno de ellos. Esto te facilitará la asignación de variables en el workflow en el que se haga uso del contenido web.

Bloque_Productos_Personalizados_Email_-_4.png

 

2.2. Configuración de la plantilla

(En este apartado se va a definir el contenido del bloque de productos).

5. En Plantillas, escoge entre las tres opciones por defecto.

  

Las plantillas incluyen espacios designados para mostrar la información esencial de un producto: su nombre, imagen o un botón para ir a su ficha en el eCommerce, entre otros datos del producto.

Las características principales que las distinguen son:
Producto básico: incluye un espacio reservado para la descripción del producto.
Producto con marca: incluye un espacio reservado para mostrar la marca del producto y otro para su precio.
Producto con precio: incluye un espacio reservado para mostrar la descripción del producto y otro para su precio.

Bloque_Productos_Personalizados_Email_-_5.png

6. Usa el editor para personalizar los estilos de la plantilla seleccionada.

  

El editor de la plantilla permite tanto dar estilo como añadir elementos al componente. Podrás modificar, por ejemplo, la tipografía, tamaño o colores de los textos o añadir imágenes.

Bloque_Productos_Personalizados_Email_-_6.png

7. (Opcional) Haz clic en   (Editar código HTML) para personalizar por medio de código tu componente, si fuera necesario para tu diseño.

Bloque_Productos_Personalizados_Email_-_7.png

 

2.3. (Opcional) Creación de nuevas variables dinámicas

(En este apartado se van a definir nuevas variables a utilizar en el bloque de productos, en caso de que desees añadir datos adicionales).

  

Cuando el diseño del email se incluya en un workflow, se establecerá la vinculación entre los datos del flujo y las variables del email por medio de un nodo "Enviar email". Si quieres saber más sobre este tipo de nodos, haz clic aquí.

8. En el editor, haz clic en el lugar del contenido donde quieres añadir la variable.

9. Haz clic en el botón Variables.

Bloque_Productos_Personalizados_Email_-_8.png

10. En Identificador de variable, escribe un nombre para tu variable.

 

El identificador de variable no puede incluir espacios y sólo puede contener letras, números y los símbolos de guion ( - ) y barra baja ( _ ).

Bloque_Productos_Personalizados_Email_-_9.png

 

En nuestro ejemplo, se ha llamado a la variable "descripcion", no lleva tilde al ser un carácter no permitido.

11. Haz clic en  Aceptar.

  

Al crear la variable, el editor le añade las llaves dobles que la distinguen.

Bloque_Productos_Personalizados_Email_-_10.png

12. Repite los pasos 8 a 11 por cada variable que quieras añadir.

  

Para eliminar una variable, selecciónala en el editor, incluyendo las llaves que la rodean, y pulsa la tecla suprimir de tu teclado.

 

2.4. Configuración de la estructura

(En este apartado se van a definir la cantidad de productos a mostrar).

13. En Estructura, define la cantidad de productos que deseas que se muestren en el contenido.

  

La cantidad de productos visibles dependerá de las filas y columnas que establezcas, y puede ser distinta si el contacto hace la visita desde un ordenador ("Filas en escritorio" y "Columnas en escritorio") o desde un dispositivo móvil ("Filas en móvil" y "Columnas en móvil").

 

En nuestro ejemplo, se han seleccionado 1 fila y 3 columnas en escritorio, por lo que mostraran 3 productos cuando el contacto visualice el email desde un ordenador. 
Si el usuario lee el correo desde móvil, el bloque también mostrará 3 artículos pero cada uno en una fila distinta.

Bloque_Productos_Personalizados_Email_-_11.png

14. (Opcional) Desmarca la casilla "Mostrar filas incompletas" para que los productos se visualicen sólo cuando hay suficientes para mostrar en todas las columnas de una fila.

 

En nuestro ejemplo, si desmarcamos la casilla "Mostrar filas incompletas", el contenido sólo se mostrará si se reciben los datos de al menos 3 productos.

 

PASO 3. Previsualiza el diseño de tu bloque de productos personalizado

 

Ten en cuenta que tanto las nuevas variables que hayas creado como las incluidas en la plantilla no están aún vinculadas a ningún dato de los productos, por lo que se previsualizarán como texto (placeholder).

La asignación de datos a las variables, que permite que el contacto visualice el contenido, se realiza desde un workflow.

15. Haz clic en  Previsualizar.

Bloque_Productos_Personalizados_Email_-_12.png

16. Haz clic en  (Vista en escritorio) y revisa que el diseño en ordenador sea el adecuado para tu estrategia.

  

La vista por defecto del previsualizador corresponde a la de ordenador.

Bloque_Productos_Personalizados_Email_-_13.png

17. Haz clic en  Vista en móvil y revisa que el diseño en dispositivos móviles es el adecuado para tu estrategia.

Bloque_Productos_Personalizados_Email_-_15.png

18. (Opcional) Haz clic en  (Enviar email de previsualización) para evaluar la maquetación en tu gestor de correo. Para ello, rellena los parámetros de envío y haz clic en el botón  Enviar email de previsualización. El modo Previsualizar se cerrará.

Bloque_Productos_Personalizados_Email_-_17.png

19. (Opcional) En tu gestor de correo, comprueba el email de visualización que has enviado.

  

El email de previsualización tiene como objetivo verificar la maquetación. Al no ser enviado desde un workflow, este correo carece del contexto del contacto y la navegación, por lo que las variables del bloque de contenidos no estarán vinculadas a productos y los enlaces especiales no funcionaran.

20. Haz clic en  Cerrar previsualización, en caso de que no hayas mandado un email de previsualización.

21. (Opcional) Haz las modificaciones necesarias, repitiendo los pasos y puntos anteriores que correspondan, para que el diseño sea el adecuado a tu estrategia.

22. En el editor, haz clic en   Guardar.

 

 

 ¡Éxito!
Tu bloque de productos personalizado en un email ya está listo.


¡Sigue aprendiendo!

Para aprovechar todo el potencial de tu cuenta en Connectif, te recomendamos continuar con los siguientes artículos:

¿Fue útil este artículo?
Usuarios a los que les pareció útil: 0 de 0