Cómo utilizar las condiciones de visualización en el editor «Drag and Drop» [Nuevo]

Para usar esta característica, sus preferencias predeterminadas deben estar configuradas para utilizar el Lenguaje de plantillas de SendinBlue. Consulte esta guía para comprobar o actualizar sus ajustes.

 

La opción de condiciones de visualización le permite diseñar plantillas y campañas de e-mail que muestran elementos específicos para cada destinatario en función de las condiciones que usted establezca.

builder.png   animation.gif

Las condiciones de visualización se pueden aplicar a un bloque de contenido completo en el editor de «Drag and Drop» o pueden activarse según tres opciones: 

  1. Un atributo de contacto: información guardada en SendinBlue sobre sus contactos para usarla en las campañas por e-mail, e-mails automatizados o e-mails transaccionales.
  2. Parámetros: se trata de los parámetros transaccionales que se utilizan mediante una llamada a la API para enviar una campaña o un e-mail transaccional.
  3. Una lista de variables dinámicas: solo puede utilizarse cuando la opción de lista dinámica también está activada para un bloque de diseño concreto en su campaña o e-mail transaccional.

Antes de empezar

Si no ha creado los atributos de contacto deseados, use esta guía para crearlos antes de añadir condiciones de visualización a su e-mail.

Si desea utilizar condiciones de visualización en sus e-mails transaccionales, conozca mejor  nuestras llamadas a la API (v3) para enviar una plantilla de e-mail. (También puede enviar una campaña diseñada en el editor «Drag and Drop» a través de la API). 

Condiciones de visualización basadas en los atributos de contacto

Las condiciones de visualización le permiten mostrar un bloque de diseño concreto (imagen, título, texto, etc.) en función de lo que sabe sobre el destinatario y que ha guardado en sus atributos de contacto de SendinBlue.

Por ejemplo, imaginemos que tenemos una tienda de camisetas en línea y que queremos enviar una campaña personalizada por e-mail basándonos en varios atributos de nuestros contactos: 

  • si son clientes (atributo booleano)
  • color favorito (atributo de texto)
  • género (atributo de categoría)

Imaginemos que sabemos el color favorito y el género de nuestros clientes, pero no sabemos nada sobre los contactos que todavía no han hecho ninguna compra. Nuestro e-mail promocionará una venta de camisetas y personalizaremos el contenido utilizando los datos disponibles sobre cada contacto.

Personalizar el encabezado de su e-mail

En este ejemplo, el encabezado se personaliza en función de si el contacto es o no un cliente existente.

Como hemos guardado esta información como un atributo booleano (el atributo debería mostrar una de las dos opciones: «Yes» o «No»), hemos incluido dos bloques únicos y los hemos configurado para que uno aparezca cuando el atributo «CUSTOMER» sea «Yes» y el otro para cuando el atributo sea «No». Esto hace que todos los destinatarios vean un encabezado diferente.conditional-display-01_EN.png

Personalizar la imagen del e-mail

Personalizaremos la imagen basándonos en dos atributos de contacto: el color favorito y el género. Para garantizar que todos los destinatarios vean una imagen, debemos considerar las opciones disponibles para cada uno de nuestros atributos: 

Color favorito:

  • Azul
  • Verde
  • Amarillo
  • Rosa

Género: 

  • Masculino
  • Femenino
  • Desconocido

Sabemos que las camisetas más vendidas son azules, así que centraremos nuestros esfuerzos de personalización en este color de camisetas en nuestro bloque de imágenes. Configuraremos las siguientes opciones de visualización para estos bloques de diseño: 

  • Camiseta azul sola: se muestra a todos aquellos que tengan el color Azul como Color favorito y cuyo Género sea Desconocido.
  • Hombre vestido con camiseta azul: se muestra a todos aquellos que tenga el Azul como Color favorito y cuyo género sea Masculino.
  • Mujer vestida con camiseta azul: se muestra a todos aquellos que hayan elegido el Azul como Color favorito y cuyo Género sea Femenino
  • Colección multicolor de camisetas: se muestra a todos aquellos que no tengan el Azul como Color favorito

GIF_1.gif

Personalizar el botón de llamada a la acción

Por último, personalizaremos el botón de llamada a la acción en función del color favorito del receptor. 

Incluiremos dos botones: uno cuando para cuando conozcamos el color favorito del receptor y otro para cuando no lo conozcamos.

Para crear el primer botón, haga clic en el texto del botón y, luego, en el menú desplegable de Personalizar, a continuación, seleccione el atributo de color favorito. SendinBlue insertará automáticamente su color favorito en el botón de la siguiente manera: 

«Comprar camisetas azules», «Comprar camisetas verdes», etc. 

Activaremos las condiciones de visualización para el segundo botón y lo configuraremos para que en ese botón no se muestre el color favorito si no hay opciones que correspondan a ese atributo.

Por ejemplo, si el color favorito no es igual a: azul, verde, amarillo, rosa. Este bloque se mostrará cuando el color no sea azul Y no sea verde Y no sea rosa, etc.

Tendremos un botón genérico de «Comprar camisetas» como recurso alternativo.

GIF_4.gif

Información relevante: Para probar la personalización, basta con que envíe un e-mail de prueba a un contacto para ver la vista previa del e-mail personalizado.

 

Mostrar condiciones en función de un parámetro transaccional

Los parámetros transaccionales son variables que no están guardadas en su lista de contactos de SendinBlue y que, por lo contrario, se activan a través de una llamada API para enviar un e-mail transaccional.

Las condiciones de visualización pueden utilizarse para modificar una plantilla de e-mail en función de sus parámetros transaccionales cuando se envíe mediante nuestra API v3.

Los parámetros transaccionales contienen dos elementos (como se muestra a continuación) y cuando se envían a través de la API tienen la siguiente estructura:

{{ params.parameterNAME }}

parameterNAME es su parámetro transaccional para el nombre, formateado y con las mayúsculas exactamente como se envía a través de la API.

Información relevante: Vea nuestra documentación de la API sobre cómo enviar e-mails transaccionales aquí y obtenga más información sobre los parámetros transacciones aquí.

Ejemplo 

Los e-mails transaccionales sirven para objetivos comerciales específicos y también ofrecen la oportunidad de contactar con sus contactos más comprometidos con un mensaje de marketing adicional (si necesita inspiración consulte esta entrada de nuestro blog).

Sigamos con nuestro ejemplo de la tienda de camisetas en línea y digamos que queremos actualizar nuestra plantilla de recepción del pedido con un bloque promocional sobre un futuro evento.

En la plantilla del e-mail podemos habilitar las condiciones de visualización y seleccionar los ajustes en el primer campo.

En el segundo campo (nombre de la variable), introduzca solo el «parameterNAME» que le haya dado a su parámetro transaccional.

Por ejemplo, para insertar un número de invitados para un evento cuyo parámetro es

{{ params.RSVP }}

introduzca RSVP como nombre de la variable.

conditional-display_params_NEW.png

Configure los campos restantes de acuerdo con sus necesidades. En nuestro ejemplo, utilizaremos un formato numérico para el parámetro RSVP y mostraremos bloques promocionales únicos en función de las siguientes condiciones:

  • RSVP for 0 tickets: promoción de evento básica.
  • RSVP for 1 ticket: agradecimiento por comprar una entrada, sugerencia de invitar a un amigo.
  • RSVP for 2 tickets: agradecimiento por la compra en grupo, sugerencia de reservar una mesa.

GIF_5_NEW.gif

Mostrar condiciones en función de una lista dinámica de variables

Cuando utilice la opción de lista dinámica para diseñar un bloque de su campaña y plantilla de e-mail, puede seleccionar mostrar (o no) este bloque cuando se cumplan las condiciones de la lista dinámica.

Esto resulta muy útil cuando solo quiere mostrar una lista si dicha lista contiene los elementos que usted desea.

Ejemplo

Puede que desee enviar un mensaje de correo electrónico para confirmar que los artículos de un pedido han sido enviados y que incluya la opción de enumerar por separado todos los artículos del pedido que todavía están pendientes de ser enviados.

sample_email.png 

Para crear un e-mail como el anterior, configure una lista dinámica (como se muestra en esta guía) y, a continuación, habilite la opción de Condiciones de visualización para la Lista dinámica de variables.

En el campo de Nombre de la clave, introduzca el nombre de la clave que desee que muestre el bloque. En nuestro ejemplo si la clave es «shipped», cuando la plantilla detecte que el valor para la clave es «yes», mostrará un bloque con la lista de los productos enviados.

Cond-display-dyanmic-list-var_true.png

A continuación, crearemos un segundo bloque para mostrar los productos restantes del pedido, si existen.

En el Nombre de la clave de nuestro ejemplo, hemos usado la clave (llamada «shipped») y, cuando la plantilla detecte que el valor para esta clave es «no», mostrará el bloque con la lista de todos los productos que se enviarán más tarde.

Cond-display-dyanmic-list-var_false.png

Información relevante: Esta opción funciona con las etiquetas IF y FOR disponibles en el Nuevo lenguaje de plantillas. Para obtener más información sobre esta característica, consulte esta guía general.

 

Si no está familiarizado con los elementos de una etiqueta FOR, esta referencia con colores puede ayudarle a colocar correctamente cada elemento en su campaña o plantilla de e-mail.

terms.png

Para crear el anterior ejemplo, hemos enviado la siguiente llamada a nuestra API v3 para enviar un e-mail transaccional.

cond-display-dynamic-list-var_call-example.png

 

Cómo guardar su e-mail

Los bloques de diseño del e-mail que contengan contenido dinámico, como listas dinámicas o condiciones de visualización, estarán marcados con un símbolo de código en la esquina superior izquierda del bloque.

SendinBlue_Responsive_Template_Builder.png

Cuando guarde su campaña o plantilla de e-mail, el icono se pondrá en rojo si hay una opción de contenido dinámico activada, pero falta la información necesaria.

SendinBlue_Responsive_Template_Builder_error.png

Para corregirlo, complete los campos vacíos y haga clic de nuevo en guardar.