En ocasiones, como marca, necesitas configurar banners con imágenes que se muestren de acuerdo a alguna condición en específico. Por ejemplo, de acuerdo a un atributo extendido, el día de la semana, categoría (Última compra realizada), género del cliente, código postal, etc.
Lo anterior se hace por medio de la creación de una fila que con la configuración que explicamos en este artículo, puede mostrar el banner dinámico según lo que desees.
Paso 1: Cargar las imágenes en el administrador de archivos
Es necesario cargar una imagen en el administrador de archivos por cada condición. Por ejemplo, si quieres mostrar un banner por cada día de la semana, debes cargar una imagen por cada día.
Asegurarte de que la imagen tenga formato Nombre_de_la_imagen.jpg (todas deben tener la misma extensión/formato).
El nombre de la imagen va a depender de la condición que vas a aplicar.
Para saber cómo subir archivos ir al siguiente enlace: Administrador de Archivos
Importante: crear una carpeta aparte para cargar las imágenes para el banner. Así mantienes el orden en tus archivos.
Paso 2: Crear una fila y agregar bloque con imagen
Es necesario agregar una fila y seguido un bloque de imagen desde Contenido>Imagen:
Paso 3: Agregar imagen
Luego, es necesario cargar una imagen (cualquiera) que esté en el admin de archivos. La única condición es que se cargue una imagen con el tamaño con el que se quiere mostrar la imagen (banner dinámico) en el mail. Ya que cuando se cargan las imágenes toman el tamaño de la imagen estática que hayas puesto en principio.
Paso 4: Activar la opción de imagen dinámica
Seleccionar la imagen cargada anteriormente y activar la opción de Imagen dinámica:
Paso 5: Modificar link de la imagen dinámica
En este paso, es necesario agregar en el campo “URL dinámica”, el link de cualquier imagen cargada en el editor.
La url de la imagen dinámica debe ser tomada de la url de alguna de estas imágenes. Se puede tomar haciendo click en la vista previa de la imagen:
Copiar la url del navegador:
Y luego, poner ese link en el campo “URL dinámica” de la imagen:
Paso 6: Personalizar el banner por cada condición
Hasta el paso anterior es el mismo procedimiento para todas las condiciones, así que llegó la hora de personalizar por la condición que deseas. Algunos ejemplos que puedes aplicar:
Banner según el día de la semana
Banner según el día de la semana
¿Cómo funciona esta fila?
El bloque de imagen dinámica va a buscar la imagen que corresponda según el día al momento del envío.
¿Qué debes tener en cuenta antes de crear esta fila?
Debes preparar las imágenes de cada día de la semana indicando en su nombre el día en inglés, por ejemplo, la imagen del día viernes debe llamarse “Friday.jpg”.
Recuerda que las tres imágenes deben tener la misma extensión/formato, es decir, ".jpg".
Configuración de la condición en el link dinámico
Si recuerdas en el paso 5 copiaste la URL de una imagen del administrador de archivos y la pegaste en el campo "URL dinámica" en el editor. ¡Es momento de incluir en ese link la condición para que se muestre el banner del día!
Para ello debes reemplazar el nombre de la imagen por el campo {{today}}.jpg.
Por ejemplo, copiaste el siguiente link:
https://templates.woowup.com/private-images/NG0xLOSoQ/Nombre_de_la_imagen.jpg
Ahora debes identificar el nombre de la imagen. En este caso, el campo Nombre_de_la_imagen.jpg y reemplazarlo por {{today}}.jpg.
El link quedaría de la siguiente maneta
https://templates.woowup.com/private-images/NG0xLOSoQ/{{today}}.jpg
Configuración de la condición en la fila dinámica
No te preocupes, ¡ya casi tienes listo tu banner dinámico! solo debes aplicar la condición en la fila, seleccionando la fila que contiene la imagen > Contenido dinámico> Añadir condición:
En el campo Nombre y Descripción debes incluir la información que desees para luego poder identificar la fila.
En el campo Antes va el siguiente código:
<!-- {% set date = now | date("l") %} {% set formated_date = date_format(date, "m/d/Y") %} {% set today = date_format(date, "l") %} -->
En el campo Después va el siguiente código:
<!-- -->
Quedaría de la siguiente manera:
Le das click en "Guardar Bloque" y listo, estás listo para ir al paso, guardar la fila y hacer las pruebas correspondientes.
En las pruebas que hagas solo va a mostrarse la imagen correspondiente al día que se hace el test. Por ejemplo, si hoy es viernes y realizas la prueba, solo vas a recibir la imagen correspondiente al día viernes.
Banner según género del cliente
Banner según género del cliente
¿Cómo funciona esta fila?
El bloque de imagen dinámica va a buscar la imagen que corresponda según el género del cliente, es decir, si el cliente es mujer mostrará una imagen y en caso de que sea hombre, va a mostrar otra (imágenes que determinas tu previamente). Y si el campo de género está vacío, se mostrará una imagen específica que también determinas tu.
¿Qué debes tener en cuenta antes de crear esta fila?
Debes preparar las imágenes de cada género indicando el nombre en ingles, es decir, para el género "Mujer" debe llamarse “female.jpg” y para "Hombre" sería "male.jpg". Para los clientes con el campo vacío o diferente a mujer u hombre subir una imagen con el nombre "unisex.jpg".
Es importante que en el nombre de las imágenes se respete el nombre tal cual lo especificamos, es decir, no incluir mayúsculas o caracteres especiales. Por ejemplo “female.jpg” y “Female.jpg” puede parecer lo mismo pero el código se rompe si se incluye una mayúscula.
Recuerda que las tres imágenes deben tener la misma extensión/formato, es decir, ".jpg".
Configuración de la condición en el link dinámico
Si recuerdas en el paso 5 copiaste la URL de una imagen del administrador de archivos y la pegaste en el campo "URL dinámica" en el editor. ¡Es momento de incluir en ese link la condición para que se muestre el banner según el género del cliente!
Para ello debes reemplazar el nombre de la imagen por el campo {{banner}}.jpg (dependiendo del formato en el que hayas subido las imágenes).
Por ejemplo, copiaste el siguiente link:
https://templates.woowup.com/private-images/NG0xLOSoQ/Nombre_de_la_imagen.jpg
Ahora debes identificar el nombre de la imagen. En este caso, el campo Nombre_de_la_imagen.jpg y reemplazarlo por {{banner}}.jpg.
El link quedaría de la siguiente manera:
https://templates.woowup.com/private-images/NG0xLOSoQ/{{banner}}.jpg
Configuración de la condición en la fila dinámica
No te preocupes, ¡ya casi tienes listo tu banner dinámico! solo debes aplicar la condición en la fila, seleccionando la fila que contiene la imagen > Contenido dinámico> Añadir condición:
En el campo Nombre y Descripción debes incluir la información que desees para luego poder identificar la fila.
En el campo Antes va el siguiente código:
<!--
{% set banner = null %}
{% if customer.gender == 'Femenino' %}
{% set banner = 'female.jpg' %}
{% elseif customer.gender == 'Masculino' %}
{% set banner = 'male.jpg' %}
{% else %}
{% set banner = 'unisex.jpg' %}
{% endif %}
-->
En el campo Después va el siguiente código:
<!-- -->
Quedaría de la siguiente manera:
Le das click en "Guardar Bloque" y listo, estás listo para ir al paso 6.
Paso 6: Guardar la fila y hacer pruebas
Una vez guardada la fila (¿Cómo guardar filas customizables?), recomendamos hacer las pruebas correspondientes ¡y listo!