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

Tanto el creador de lógica como las condiciones de mostrar/ocultar con código personalizado que se indican a continuación se usan en plantillas de arrastrar y soltar. Si tienes una plantilla HTML guardada, crea primero una copia de arrastrar y soltar. Necesitas permiso para editar plantillas.

1. Ve a Contenido > Plantillas y selecciona Email: guardado.
2. Abre el menú de tres puntos de la plantilla HTML y selecciona Clonar a arrastrar y soltar.
3. Selecciona Plantillas convertidas. Cuando el estado sea Listo para usar, haz clic en el nombre de la plantilla convertida para abrirla en el editor de arrastrar y soltar.

La plantilla HTML original se mantiene sin cambios. Revisa el diseño del texto y el contenido dinámico antes de añadir condiciones de mostrar/ocultar. Obtén más información sobre cómo convertir una plantilla HTML a arrastrar y soltar.

Puedes mostrar u ocultar contenido en función de:

• Datos del perfil (es decir, propiedades del perfil o propiedades personalizadas)
• Variables de evento, cuando se cumplen estas dos condiciones:
  • 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.

Crea tu mensaje

1. Añade un bloque o una sección a una plantilla de email.
2. Selecciona el bloque o la sección y, a continuación, selecciona la pestaña Visualización.

3. En Mostrar/ocultar lógica, selecciona Usar el generador de lógica.
4. En Tipo de condición, selecciona Propiedades sobre alguien. Elige una propiedad, selecciona su tipo de datos y el operador de comparación, e introduce un valor si la condición lo requiere.
   • Puedes crear una condición sencilla 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.
5. Usa el botón Añadir condición para añadir condiciones adicionales, si lo deseas.
6. Selecciona Guardar.

Haz clic en Vista previa y revisa los perfiles que cumplen y no cumplen tus condiciones, incluidos los perfiles sin la propiedad. Confirma que cada uno vea el contenido previsto.

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:

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 del programa de fidelización con un saldo de puntos positivo un banner con esta condición de mostrar/ocultar:

Puntos de fidelización > es mayor que 0

Si las integraciones dejan loyalty_points sin configurar para las personas que no se han unido, muéstrales un banner con esta condición:

loyalty_points > no está configurado

Ajusta los criterios según los datos disponibles en la cuenta. La condición «no está establecido» también coincide con valores vacíos o falsos, incluido el valor numérico 0. Si los miembros del programa pueden tener 0 puntos, usa una propiedad de afiliación para distinguir a los miembros de las personas que no se han unido.

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

Comparte información específica del producto con quienes abandonen el carrito para darles información clave que podría influir en la decisión de compra. Por ejemplo, si se te está agotando un producto, añade un bloque de texto con una advertencia de pocas existencias que solo aparezca para las personas que tengan ese artículo en el carrito con esta condición:
'ITEM_NAME' in event.Items
Sustituye ITEM_NAME por el nombre exacto del producto. Este ejemplo presupone que el evento activador tiene una lista Items que contiene nombres de productos; usa la variable y la estructura de los datos de tu propio evento.

Mensajería específica por ubicación

Las condiciones específicas de 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 quienes viven en el mismo pueblo que tu tienda temporal física, con esta condición:

Ciudad = Boston

Resolución de problemas de bloques de mostrar/ocultar

Si el bloque de mostrar/ocultar no se está renderizando como esperas, selecciona el bloque o la sección y haz clic en Editar lógica. Selecciona Convertir a código, revisa la confirmación y haz clic en Convertir. Inspecciona y ajusta el código y, a continuación, haz clic en Guardar.

Comprueba cómo se almacena la propiedad y elige el tipo de condición adecuado. Las comparaciones de texto distinguen el número 22 del valor de texto “22”. Sin embargo, las condiciones de número en el generador de lógica convierten texto numérico, como “22”, en un número antes de compararlo. Los valores que no se pueden convertir en números se evalúan como 0, así que comprueba si faltan valores o si hay valores no numéricos al solucionar problemas.

Convertir texto a números

Para comparaciones numéricas con código personalizado, convierte el texto numérico en un número con el filtro |multiply. Añade el filtro directamente después del nombre de la variable. Por ejemplo, si la propiedad Edad almacena la edad como texto numérico:

person|lookup:'Age'|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.

Símbolos de comparación en valores de condición

En el generador de lógica, los valores de las condiciones no pueden contener símbolos de comparación como =, . Estos valores generan un error de validación cuando guardas. Esta restricción se aplica al valor que introduces, no al nombre de la propiedad. Esta validación no bloquea otros signos de puntuación, como espacios o el símbolo @. Los nombres de las propiedades y los valores de texto distinguen entre mayúsculas y minúsculas, así que haz que coincidan exactamente con los datos.

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.

No se puede revertir la conversión de la lógica a código.

Para convertir una condición existente, haz clic en Editar lógica y, a continuación, en Convertir a código. Revisa la confirmación y haz clic en Convertir. Después de editar el código, haz clic en Guardar.

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.

This content requires Functional cookies to be enabled.

Update Cookie Settings

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.

1. Crea un mensaje de campaña o de flujo.
2. Añade un bloque de imagen.
3. Subir la imagen relacionada con el trabajo al bloque.
4. Haz clic en Mostrar en el menú de personalización del bloque de imagen.
5. En Show/hide logic, selecciona Use code.
6. Añade esta condición: person|lookup:'Bag Preference' == 'Work'.
7. Pulsa Guardar.
8. Cierra el panel de configuración del bloque.

Este bloque se mostrará solo a las personas que hayan seleccionado «Trabajo» como preferencia.

This content requires Functional cookies to be enabled.

Update Cookie Settings

A continuación, añade la imagen de exteriores 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»
• Cliente sin preferencia o con una preferencia distinta de «Work» o «Outdoors»

Puedes usar estos pasos para mostrar u ocultar bloques en función de los datos del perfil. Para los datos de eventos, usa un flujo activado por una métrica y consulta las propiedades de su evento de activación.

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:

1. Selecciona un bloque de texto y, luego, haz clic en Personalization para abrir el menú de personalización.
2. Elige una opción del menú para añadirla al bloque de texto.
3. Copia la variable del interior de la etiqueta. Elimina las llaves y los filtros de valor alternativo o de formato que no necesites para la comparación, como |default:''. Conserva cualquier filtro lookup que seleccione la propiedad.
   Por ejemplo, en la captura de pantalla de abajo, 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 la 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:

1. En el editor de plantillas, haz clic en Previsualizar.
2. En una plantilla guardada, en Origen de datos de vista previa, haz clic en Evento. En un mensaje de flujo activado por una métrica, los datos del evento de activación se seleccionan automáticamente.
3. Si hay disponible un menú desplegable de eventos, selecciona la métrica que activará el flujo. Usa las flechas para elegir una ocurrencia de muestra del evento.
4. Desplázate por las Propiedades del evento para encontrar los datos que te gustaría incluir.
5. Haz clic en el nombre de la propiedad para copiar la etiqueta.
6. Pega la etiqueta en un bloque de texto o en un editor de texto.
7. Elimina las llaves (es decir, {{ y }}) y los filtros de reserva o de formato que no necesites para la comparación. Mantén cualquier filtro de lookup que seleccione la propiedad del evento.
8. 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.

Recursos adicionales