Cómo mostrar u ocultar bloques y secciones de la plantilla en función de variables dinámicas
Qué aprenderás
Descubre cómo mostrar un bloque o una sección concretos en un email a determinados destinatarios con el creador de lógica de mostrar/ocultar del editor de plantillas.
Puedes usar esto para mostrar contenido diferente a, por ejemplo, quienes estén en ciertos niveles de fidelización o hayan comprado un producto específico. Esta función te permite segmentar el contenido de tu email en función de la información sobre tus suscriptores, para que cada destinatario tenga una experiencia de marketing altamente personalizada.
Antes de empezar
Puedes mostrar u ocultar contenido en función de:
- Datos del perfil (es decir, perfil o propiedades personalizadas)
- Variables de evento, pero solo para:
- Flujos activados por evento (también llamados activados por métrica)
- Bloques de mostrar/ocultar con código personalizado
Antes de crear tu email, debes tener los datos que necesitas en tu cuenta. En otras palabras, debes tener 1 evento o perfil con la propiedad que quieres usar.
Uso de datos de perfil
Si quieres condiciones de mostrar/ocultar basadas en datos del perfil (por ejemplo, ubicación, idioma, etc.), necesitas al menos 1 perfil con esos datos.
Las propiedades de perfil y personalizadas se pueden añadir de las siguientes formas:
- Formularios de registro
- Cargas de archivos CSV
- Integraciones de plataformas de comercio electrónico
- Integraciones de crecimiento de listas y fidelización, como Typeform o Yotpo
Más información sobre las propiedades de perfil en Klaviyo.
Propiedades del evento
Del mismo modo, para las propiedades de evento, debe haber 1 evento en tu cuenta de Klaviyo. Luego, puedes mostrar u ocultar bloques en función del evento desencadenante de ese flujo usando bloques con código personalizado. No puedes hacer referencia a los datos de evento usando el generador de lógica.
Así, en un flujo de carrito abandonado con el activador Inició el pago, puedes crear condiciones para mostrar/ocultar en función del valor de un carrito o de los artículos específicos que el cliente añadió.
Crea tu mensaje
El creador de lógica de mostrar/ocultar admite datos de perfil con formato de texto, números y listas. No admite datos de eventos, fechas ni valores booleanos. Si quieres usar datos no compatibles en tu condición de mostrar/ocultar, usa código personalizado para escribir la condición.
- Añade un bloque o una sección a una plantilla de email.
- Selecciona la pestaña Visualización.
- En Mostrar/ocultar lógica, selecciona Usar creador de lógica.
- Seleccionar una condición.
- Puedes crear una condición simple con un solo criterio o una condición más compleja con varios criterios conectados por AND u OR. Obtén más información sobre los conectores AND frente a OR.
- Usa el botón Añadir condición para añadir condiciones adicionales, si lo deseas.
- Selecciona Guardar.
Si utilizas la lógica de mostrar/ocultar en una sección y en un bloque dentro de esa sección, la configuración puede interactuar y causar conflictos. Más información en nuestro artículo sobre las opciones de visualización.
Y frente a O en las condiciones de mostrar/ocultar
Al evaluar la lógica de mostrar/ocultar, las condiciones conectadas por AND se evalúan antes que las condiciones conectadas por OR. Ten en cuenta el orden en que se evaluará tu lógica al redactarla para asegurarte de que se interprete como quieres.
Como ejemplo, ten en cuenta la siguiente condición:
Según estos criterios, comprueba si el bloque es visible para algunos destinatarios de muestra:
Destinatario | ¿Aparece el bloque? | El motivo |
Jane loyalty_points = 145 Color favorito = verde Fruta favorita = banana | No | Jane podría cumplir los requisitos si su color favorito fuera azul o si su fruta favorita fuera plátano. |
Alex Color favorito = azul Fruta favorita = manzana | No | Alex podría cumplir los requisitos con más puntos de fidelización o si su fruta favorita fuese el kiwi. |
Amanda Color favorito = azul Fruta favorita = granada | Sí | Amanda cumple los requisitos porque tiene > 99 puntos de fidelidad y su color favorito es azul. Su fruta favorita no se tiene en cuenta porque cumple ambos criterios en el lado opuesto del operador OR. |
Stephanie Color favorito = orange Fruta favorita = kiwi | Sí | Stephanie cumple los requisitos porque su fruta favorita es el kiwi. No se tienen en cuenta las demás condiciones porque cumple los criterios de uno de los lados del operador OR. |
Casos de uso de los bloques de mostrar/ocultar
Banner del programa de fidelización
Si tienes un programa de fidelización, muestra a los participantes activos cuántos puntos tienen actualmente. Ofrece a los contactos que todavía no se han registrado en el programa un incentivo para unirse. Para configurar esto, necesitarás 2 banners.
Muestra a los participantes activos del programa de fidelización un banner con esta condición de mostrar/ocultar:
Puntos de fidelización > es mayor que 0
Muestra a los posibles clientes un banner con esta condición:
loyalty_points > no está configurado
Es posible que tengas que ajustar los criterios en función de los datos disponibles en tu propia cuenta.
Imágenes personalizadas
Si recopilas información sobre cómo usan tus suscriptores tu producto, muéstrales imágenes relacionadas con ellos.
Por ejemplo, una marca que vende mochilas podría preguntar si los suscriptor las usan para ir al trabajo, para viajar o para hacer senderismo. En función de su respuesta, esta marca podría mostrar imágenes de sus productos en esos entornos.
Para configurar esto, necesitarás 3 bloques de imagen que muestren tu producto en 3 entornos diferentes.
Mostrar a los viajeros una imagen de un ciclista que lleva la mochila durante el trayecto al trabajo con esta condición:
Preferencia de bolso = Desplazamientos
Muestra a los viajeros una imagen de una de tus mochilas en un aeropuerto concurrido con esta condición:
Preferencia de bolso = Viaje
Muestra a todo el mundo una foto de una de tus mochilas en un paisaje exterior pintoresco con esta condición:
Preferencia de bolso > no es igual a > Viajes Y Preferencia de bolso > no es igual a > Desplazamientos
Observa que la última imagen no está dirigida solo a senderistas; la verá cualquiera que no sea una persona que se desplace al trabajo o que viaje. Es importante tener en cuenta a los destinatarios que quizá no tengan esta propiedad configurada, para que tu email se vea genial para todo el mundo.
Notas específicas de un producto
Para hacer referencia a un elemento desde el evento desencadenante de un flujo, es necesario usar código personalizado.
Comunica información específica del producto a quienes abandonan el carrito para darles información clave que podría influir en su decisión de compra. Por ejemplo, si te estás quedando sin un producto, añade un bloque de texto con una advertencia de existencias bajas que solo aparezca para quienes tengan ese artículo en su carrito con esta condición:
ITEM_NAME in event.Items
Mensajería específica por ubicación
Las condiciones específicas de la ubicación solo pueden evaluar texto; no pueden evaluar la distancia desde un código postal. Muestra un banner personalizado a los residentes que viven en una zona determinada, como los que están en la misma ciudad que tu tienda temporal física, con esta condición:
Ciudad = Boston
Resolución de problemas de bloques de mostrar/ocultar
Si tu bloque de mostrar/ocultar no se muestra como esperas, usa el botón Convertir en código para convertir la lógica del creador en código. A partir de ahí, puedes inspeccionar y ajustar el código para que se muestre como esperas.
No se puede revertir la conversión de la lógica a código.
Al solucionar problemas, confirma que el tipo de datos usado en el valor de la condición sea el mismo que el tipo de datos en los perfiles a los que haces referencia. Por ejemplo, el número 22 es diferente del valor de texto «22». Si tu condición está configurada como Number pero tus valores se almacenan como texto en el perfil, la condición no podrá evaluarse correctamente.
Convertir texto a números
Si tienes propiedades numéricas, pero se almacenan como texto dentro de un perfil, puedes convertirlas a números dentro del campo de código personalizado mediante el filtro |multiply. Para usarlo, añade el filtro justo después del nombre de la variable:
person.Birthday|multiply:"1" > 21
Valores booleanos almacenados como texto
Si los datos de verdadero/falso se almacenan como texto, no como booleanos, o si estás haciendo referencia a una propiedad que contiene tanto booleanos como texto, puedes usar estas estructuras para cubrir todos los escenarios. Incluye todas las grafías y mayúsculas/minúsculas que estén presentes en tus datos.
Condición de ejemplo | Mostrar el bloque si... |
person|lookup:'VIP' == 1 or person|lookup:'VIP' == 'true' or person|lookup:'VIP' == 'True' | La propiedad VIP se establece con el valor booleano true o las cadenas true o True |
person|lookup:'VIP' == 0 or person|lookup:'VIP' == 'false' or person|lookup:'VIP' == 'False' | La propiedad VIP se establece en el valor booleano false o en las cadenas false o False |
Caracteres no alfanuméricos en las propiedades
Si las propiedades o los valores a los que hace referencia tu bloque de mostrar/ocultar contienen caracteres no alfanuméricos (p. ej., símbolos como =, ), tu condición no será compatible y verás un mensaje de error. Para obtener los mejores resultados, usa solo letras (mayúsculas o minúsculas, distingue entre mayúsculas y minúsculas), números, guiones bajos (_) o guiones (-).
Codificación personalizada para mostrar/ocultar bloques
Si prefieres más control o si quieres crear una condición usando datos de eventos, fechas o booleanos, codifica con código personalizado tus bloques de mostrar/ocultar en lugar de usar el creador de lógica. Para empezar desde cero usando código, selecciona el botón Usar código en la configuración de la lógica de mostrar/ocultar.
Como alternativa, convierte una condición existente de mostrar/ocultar para usar código con el botón Convertir a código.
No se puede revertir la conversión de la lógica a código.
Si decides usar código, asegúrate de tener unos sólidos conocimientos de Django, lógica de programación y tipos de datos de Klaviyo. El equipo de soporte de Klaviyo no puede proporcionar soporte directo ni solución de problemas para código personalizado.
Obtén más información sobre las estructuras de condiciones compatibles.
Mostrar/ocultar condiciones en función de los datos de eventos
Si tu email se envía como parte de un flujo activado por eventos (p. ej., un flujo de carrito abandonado o un flujo de confirmación de pedido), puedes mostrar u ocultar bloques en función de los detalles del evento activador de ese flujo. Por tanto, en un flujo de carrito abandonado con el activador Started Checkout, puedes codificar condiciones personalizadas para mostrar u ocultar en función del valor del carrito o de los artículos específicos que el cliente añadió. Obtén más información sobre las variables de eventos.
Comprender cómo se almacenan los datos
Antes de configurar tu condición de mostrar/ocultar, comprueba cómo se almacenan tus datos. Hay 5 tipos de datos en Klaviyo:
- Mensaje de texto
- Número
- Fecha
- Booleano
- Lista
La forma en que se almacenan tus datos influirá en qué condiciones de mostrar/ocultar te funcionarán. Descubre cómo identificar tipos de datos en tu propia cuenta.
Crea tu mensaje
El primer paso para añadir condiciones de mostrar/ocultar con código personalizado en un mensaje es crear la plantilla de email. En esta sección se explicará un ejemplo concreto, pero puedes seguir los mismos pasos para hacer que cualquier bloque se muestre en función de tus propios criterios.
Por ejemplo, si tu empresa vende bolsos de cuero, podrías recopilar las preferencias de los clientes sobre cómo usan sus bolsos con un formulario de registro, como se muestra a continuación.
A continuación, puedes mostrar una imagen diferente en función de la preferencia de bolso de tu cliente. Por ejemplo, si la preferencia del cliente es «Trabajo», el bolso aparecerá en una imagen junto a un portátil. Si la preferencia del cliente es «Aire libre», el bolso aparecerá cerca de un mirador panorámico en una ruta de senderismo.
- Crea un mensaje de campaña o de flujo.
- Añade un bloque de imagen.
- Subir la imagen relacionada con el trabajo al bloque.
- Haz clic en Mostrar en el menú de personalización del bloque de imagen.
- En Show/hide logic, selecciona Use code.
- Añade esta condición: person|lookup:'Bag Preference' == 'Work'.
- Haz clic en Guardar cambios.
- Haz clic en Listo en el bloque.
Este bloque se mostrará solo a las personas que hayan seleccionado «Trabajo» como preferencia.
A continuación, añade la imagen relacionada con viajes a un nuevo bloque debajo de la imagen relacionada con el trabajo. Sigue los mismos pasos que antes, pero esta vez usa la condición person|lookup:'Bag Preference' == 'Outdoors'.
Este bloque solo se mostrará a las personas que hayan seleccionado «Outdoors» como preferencia.
Por último, añade una imagen para que aparezca para cualquiera que no haya seleccionado ni «Trabajo» ni «Aire libre». Usa una imagen más genérica y esta condición: person|lookup:'Bag Preference' != 'Work' y person|lookup:'Bag Preference' != 'Outdoors'.
Aquí, != significa «no es igual a», así que esta condición busca a personas que hayan elegido algo distinto de “Trabajo” o “Aire libre”, o que nunca hayan seleccionado una preferencia.
Una vez que hayas configurado cada uno de los bloques, previsualiza tu mensaje usando 3 perfiles. Estos perfiles deben ser suscriptores que cumplan uno de cada uno de los criterios de imagen:
- Cliente que eligió «Outdoors»
- Cliente que eligió «Trabajo»
- Y clientes sin preferencia/otra preferencia
Puedes usar estos pasos para mostrar u ocultar bloques en función de cualquier dato de perfil o de evento de tu cuenta.
Crea una condición de mostrar/ocultar con datos del perfil
Si estás creando una condición personalizada de mostrar/ocultar basada en una propiedad de perfil, sustituye la variable de ejemplo de las tablas en la referencia de lógica condicional (por ejemplo, person|lookup:'Favorite Color') por tu propiedad de perfil.
Para encontrar la variable correcta que debes usar:
- Haz clic en Personalización para abrir el menú de personalización.
- Elige una opción del menú para añadirla al bloque de texto.
- Copia el nombre de la variable desde dentro de la etiqueta. Para identificar el nombre de la variable, elimina las llaves alrededor de la variable, así como |default:'' al final (si está presente), junto con cualquier otro filtro.
Por ejemplo, en la captura de pantalla siguiente, la etiqueta completa es {{ person|lookup:"Accepts Marketing"|default:"" }}. El nombre de la variable es person|lookup:"Accepts Marketing", así que selecciona esa parte para usarla en tu condición de mostrar/ocultar.
Crea una condición de mostrar/ocultar con datos del evento
Puedes usar datos de eventos para mostrar u ocultar un bloque si tu mensaje forma parte de un flujo activado por eventos. Solo se pueden usar los datos del evento de activación en una condición de mostrar/ocultar.
Para identificar variables de eventos:
- Desde el editor de plantillas, haz clic en Previsualizar y probar.
- En Vista previa de la fuente de datos, haz clic en Evento.
- En el menú desplegable, selecciona el evento que activará el mensaje que estás creando.
- Desplázate por las Propiedades del evento para encontrar los datos que te gustaría incluir.
- Haz clic en el nombre de la propiedad para copiar la etiqueta.
- Pega la etiqueta en un bloque de texto o en un editor de texto.
- Elimina las llaves (es decir, {{ y }}) de la etiqueta, así como cualquier filtro.
- Usa la variable que permanece en tu condición de mostrar/ocultar.
En la captura de pantalla de abajo, verás la etiqueta {{ event|lookup:'Item Count' }}. Solo necesitarás el texto event|lookup:'Item Count' para tu condición de mostrar/ocultar. Ten en cuenta que tus datos pueden usar una estructura diferente, como {{ event.extra.line_items.0.title }} o {{ event.ShippingAddress.address1 }}. Usa la variable tal y como aparece en los datos de tu evento.
Personaliza tus condiciones de mostrar/ocultar
Descubre cómo crear condiciones de mostrar/ocultar personalizadas con la referencia de lógica condicional. Este recurso contiene condiciones de ejemplo, que puedes personalizar con tus propios datos de perfil y de evento.