Crear un banner
Aprende a crear banners cuando construyes Campaigns y Canvas en Braze. Para información más general, consulta Acerca de los banners.
Requisitos previos
Antes de poder lanzar tu Banner, tu equipo de desarrollo debe configurar las ubicaciones en tu aplicación o sitio web. Mientras tanto, puedes redactar tu campaña de Banner, pero no podrás lanzarla hasta que las ubicaciones estén configuradas.
Para las ubicaciones web, también puedes usar la segmentación web para elegir dónde aparece un Banner en tu sitio web sin tener que escribir código de inserción para cada ubicación.
Crear un mensaje Banner
Paso 1: Crear ubicaciones en Braze
Si aún no lo has hecho, tendrás que crear ubicaciones para Banners en Braze, que se utilizan para definir los lugares en tu aplicación o sitio que pueden mostrar Banners. Para crear una ubicación, ve a Configuración > Ubicaciones de Banners y, a continuación, selecciona Crear ubicación.
Dale un nombre a tu ubicación y asígnale un ID de ubicación. Asegúrate de consultar a otros equipos antes de asignar un ID, ya que se utilizará durante todo el ciclo de vida de la tarjeta y no debería cambiarse posteriormente. Para más información, consulta ID de ubicación.
Paso 2: Elige dónde crear tu mensaje
¿No sabes si tu mensaje debe enviarse mediante una Campaign o un Canvas? Las Campaigns son mejores para campañas de mensajería únicas y segmentadas, mientras que los Canvas son mejores para recorridos de usuario de varios pasos.
- Ve a Mensajería > Campaigns y selecciona Crear Campaign.
- Selecciona Banner.
- Ponle a tu Campaign un nombre claro y significativo.
- Añade equipos y etiquetas según sea necesario. Las etiquetas facilitan encontrar tus Campaigns y crear informes a partir de ellas. Por ejemplo, al usar el generador de informes, puedes filtrar por las etiquetas correspondientes.
- Selecciona la ubicación que creaste previamente para asociarla a tu Campaign.
- Añade variantes según sea necesario. Puedes elegir un tipo de mensaje y un diseño diferentes para cada una. Para más información sobre las variantes, consulta Pruebas multivariante y A/B.
- Elige una fecha y hora de inicio para tu Campaign de Banner. De forma predeterminada, los Banners duran indefinidamente. Puedes cambiarlo seleccionando Hora de finalización y especificando una fecha y hora de finalización.
Si todos los mensajes de tu Campaign van a ser similares o a tener el mismo contenido, redacta tu mensaje antes de añadir variantes adicionales. Así podrás seleccionar Copiar de la variante en el desplegable Añadir variante.
- Crea tu Canvas con el creador de Canvas.
- Después de configurar tu Canvas, añade un paso de Mensaje en el generador de Canvas. Ponle a tu paso un nombre claro y significativo.
- Selecciona Banner como canal de mensajería.
- Selecciona una ubicación para el Banner.
- Establece la prioridad. La prioridad del Banner determina el orden en que se muestran los Banners si comparten la misma ubicación.
- Establece una caducidad para el Banner. Puede ser tras un periodo de tiempo después de que el paso esté disponible o en una fecha y hora concretas. La duración máxima de caducidad es de 31 días después de que el paso esté disponible para el usuario.
Paso 3: Redacta un Banner
A continuación, elige cómo quieres empezar a crear:
- Editor de arrastrar y soltar: Empieza con un Banner en blanco y créalo visualmente con bloques y filas.
- Editor HTML: Empieza con un Banner en blanco y trabaja directamente en HTML.
- Plantillas: Abre la biblioteca de plantillas y selecciona un diseño de Plantillas de Braze o Tus plantillas. Las plantillas se abren en el editor de arrastrar y soltar para que las personalices.
Paso 3.1: Aplica estilo al Banner
Puedes arrastrar y soltar bloques y filas en el área del lienzo para empezar a crear tu mensaje. Para consultar los bloques del editor de Banners y los enlaces a los detalles de las propiedades compartidas, consulta Bloques de editor (Banners).
Si estás cargando imágenes con contenido conectado o Liquid, asegúrate de que la URL de tu imagen comience con https://. Usar http:// provocará que tu aplicación se bloquee.
Para personalizar las propiedades de fondo de tu mensaje, la configuración del borde y mucho más, selecciona Estilos. Si solo quieres personalizar el estilo de un bloque o una fila concretos, selecciónalo para hacer cambios.
El editor HTML es ideal para equipos que ya mantienen sus propias plantillas HTML o que quieren tener control total sobre el marcado y el estilo. Puedes escribir o pegar HTML personalizado directamente en el editor. Las etiquetas de personalización de Liquid son totalmente compatibles, así que puedes hacer referencia a atributos de usuario, atributos personalizados, artículos del catálogo y mucho más.
¿Necesitas ayuda para crear el HTML de tu Banner? Selecciona Preguntar a Operator en el editor HTML y describe el Banner que quieres. BrazeAI Operator™ genera HTML que puedes revisar e insertar en el editor. Para más información, consulta Generar mensajes.
Para hacer el seguimiento de clics y descartes en tu HTML personalizado, debes llamar explícitamente a los métodos del puente JavaScript. Para consultar la referencia completa, consulta Código personalizado y puente JavaScript para Banners.
Para dirigirte a usuarios en distintos idiomas dentro de una misma Campaign de Banner, consulta Mensajes multilingües.
Paso 3.2: Define el comportamiento al hacer clic (opcional)
Cuando un usuario hace clic en un enlace del Banner, puedes elegir llevarlo a una sección más profunda de tu aplicación o redirigirlo a otra página web. Además, puedes elegir registrar un atributo o evento personalizado, que actualiza el perfil del usuario con datos personalizados cuando hace clic en el Banner. Para un seguimiento de clics más detallado, asigna un identificador personalizado a cada elemento interactivo mediante el campo Identificador para informes de su panel de propiedades.
El comportamiento al hacer clic puede anularse si un elemento concreto del Banner (como un botón, un enlace o una imagen) tiene su propio comportamiento al hacer clic. Por ejemplo, con los siguientes comportamientos al hacer clic:
- Un Banner tiene un comportamiento al hacer clic que redirige a la página de inicio de un sitio web.
- Una imagen del Banner tiene un comportamiento al hacer clic que redirige a la página de producto de un sitio web.
En el editor HTML, el seguimiento de clics no es automático. Debes llamar a brazeBridge.logClick() desde tu HTML para cada elemento en el que se pueda hacer clic y que quieras rastrear. Por ejemplo:
<a href="https://example.com" onclick="brazeBridge.logClick()">Shop now</a>
Para consultar la referencia completa del puente JavaScript, consulta Código personalizado y puente JavaScript para Banners.
Paso 3.3: Configura el comportamiento de descarte (opcional)
Los descartes de Banners requieren las siguientes versiones mínimas del SDK. Las versiones anteriores del SDK no muestran los Banners que tienen el descarte habilitado.
Selecciona la casilla El Banner se puede descartar en la sección Comportamiento de descarte para permitir que los usuarios descarten el Banner. Esto resulta útil cuando quieres promocionar una oferta por tiempo limitado a una audiencia amplia, pero dejar que los usuarios no interesados oculten el mensaje.
Cuando el descarte está activado, puedes personalizar el botón de descarte en la sección Comportamiento de descarte:
| Configuración | Descripción |
|---|---|
| Tamaño del botón | El tamaño del botón de descarte que se muestra en el Banner. |
| Color del botón | El color del botón de descarte. |
| Etiqueta ARIA | La etiqueta accesible del botón de descarte, que usan los lectores de pantalla. Si se deja en blanco, el valor predeterminado es “Close”. |
Cuando un usuario descarta un Banner, este no vuelve a aparecer para ese usuario, aunque siga cumpliendo los criterios de segmentación de la Campaign.
En el editor HTML, el descarte se gestiona en tu HTML mediante brazeBridge.closeMessage(). Combínalo con brazeBridge.logClick() para registrar también la acción de descarte como un evento de clic. Por ejemplo:
<a href="#" onclick="brazeBridge.logClick(); brazeBridge.closeMessage();">✕ Close</a>
Cuando un usuario descarta un Banner de esta forma, este no vuelve a aparecer para ese usuario, aunque siga cumpliendo los criterios de segmentación de la Campaign.
Para consultar la referencia completa del puente JavaScript, consulta Código personalizado y puente JavaScript para Banners.
Paso 3.4: Añade propiedades personalizadas (opcional)
Puedes añadir propiedades personalizadas a un Banner para adjuntar metadatos estructurados, como cadenas u objetos JSON. Estas propiedades no afectan a la forma en que se muestra el Banner, pero se puede acceder a ellas a través del SDK de Braze para modificar el comportamiento o el aspecto de tu aplicación. Por ejemplo, podrías:
- Envía metadatos para tus análisis o integraciones de terceros.
- Usa metadatos como un
timestampu objeto JSON para desencadenar lógica condicional. - Controla el comportamiento de un Banner basándote en metadatos incluidos como
ratiooformat.
Las propiedades personalizadas funcionan igual tanto en el editor de arrastrar y soltar como en el editor HTML. Para añadir una propiedad personalizada, selecciona Configuración > Propiedades > Añadir propiedad.
Para cada propiedad que quieras añadir, rellena lo siguiente:
| Campo | Descripción | Ejemplo |
|---|---|---|
| Tipo de propiedad | El tipo de datos de la propiedad. Los tipos admitidos son cadena, booleano, número, marca de tiempo, URL de imagen y objeto JSON. | Cadena |
| Clave de propiedad | El identificador único de la propiedad. Esta clave se usa en el SDK para acceder a la propiedad. | color |
| Valor | El valor asignado a la propiedad. Debe coincidir con el tipo de propiedad seleccionado. | #FF0000 |
Cuando termines, selecciona Hecho.
Paso 3.5: Personaliza con contenido conectado (opcional)
Connected Content for Banners se encuentra actualmente en fase de acceso anticipado. Ponte en contacto con tu director de cuentas de Braze si te interesa participar en el acceso anticipado.
Como los Banners se renderizan en línea durante una actualización de sesión, el contenido conectado funciona de forma diferente en este canal que en otros:
- Solo se admiten solicitudes GET.
- Todas las ubicaciones de una misma actualización (hasta 10) comparten un presupuesto de renderizado de aproximadamente dos segundos. Si una llamada es lenta, agota el tiempo de espera o se supera el presupuesto, el resultado del contenido conectado para esa ubicación se trata como nulo. Los Banners no reintentan.
Para obtener los mejores resultados:
- Mantén tus endpoints rápidos y almacena en caché las respuestas siempre que sea posible.
- Limita el número de URL únicas de contenido conectado en las ubicaciones que se renderizan juntas.
- Evita encadenar llamadas en las que una respuesta de contenido conectado determine la URL de la siguiente. Cada llamada adicional consume parte del presupuesto compartido.
- Usa sentencias de protección de Liquid o el filtro
defaultpara gestionar los resultados nulos y evitar Banners en blanco.
Paso 4: Completa el resto de tu Campaign o Canvas
Establecer la prioridad del Banner (opcional)
La prioridad del Banner determina el orden en que se muestran los Banners si comparten la misma ubicación. Para establecer la prioridad manualmente:
- Selecciona Establecer prioridad exacta.
- Arrastra y suelta las Campaigns para ordenarlas con la prioridad correcta.
- Selecciona Aplicar orden.
Si tienes varias Campaigns de Banner que usan el mismo ID de ubicación, te recomendamos usar el ordenador de prioridad de arrastrar y soltar para definir la prioridad exacta.
Configurar la reelegibilidad (opcional)
De forma predeterminada, los usuarios que descartan un Banner nunca vuelven a ser elegibles para esa Campaign. Para que los usuarios que lo descartaron puedan volver a ver el Banner, ve al paso Controles de entrega y selecciona Permitir que los usuarios vuelvan a ser elegibles para recibir la campaña. Cuando esté habilitado, establece un periodo de espera en minutos, horas, días o semanas.
La cuenta atrás empieza cuando el usuario descarta el Banner. Cuando termina el periodo, el usuario vuelve a ser elegible automáticamente, sin necesidad de reiniciar la Campaign. La reelegibilidad se registra por usuario y por Campaign.
Elegir tu audiencia
- En Audiencias objetivo, elige Segments o filtros para acotar tu audiencia. Recibirás automáticamente una vista previa de la población aproximada del Segment. La pertenencia exacta al Segment se calcula antes de enviar el mensaje.
Tu mensaje solo se enviará a los usuarios que ya cumplan las condiciones que estableciste en el paso Público objetivo. Después de eso, aún deben cumplir con el desencadenante que definas en el paso Planificación de entrega. Piensa en la audiencia objetivo como una sala de espera: solo las personas que ya están dentro pueden avanzar cuando se produce la siguiente acción.
- En Asignar conversiones, haz un seguimiento de la frecuencia con la que los usuarios realizan acciones específicas tras recibir una Campaign definiendo eventos de conversión con un periodo de hasta 30 días para contabilizar la acción como conversión.
Elegir eventos de conversión
Braze te permite hacer un seguimiento de los eventos de conversión, es decir, la frecuencia con la que los usuarios realizan acciones específicas tras recibir una Campaign. Tienes la opción de permitir un periodo de hasta 30 días durante el cual se contabiliza una conversión si el usuario realiza la acción especificada.
Si aún no lo has hecho, completa las secciones restantes de tu componente de Canvas. Para más detalles sobre cómo crear el resto de tu Canvas, incluidas las pruebas multivariante y Optimizar con BrazeAITM, consulta Crear tu Canvas.
Para controlar la reelegibilidad de los pasos de Banner en Canvas, usa la configuración de reentrada del Canvas. Para más información, consulta Reelegibilidad para Campaigns y Canvas.
Paso 5: Prueba tu mensaje (opcional)
Selecciona Preview para obtener una vista previa de tu banner o enviar un mensaje de prueba.
Ten en cuenta que la vista previa puede no ser idéntica al renderizado final en el dispositivo del usuario debido a las diferencias entre los distintos equipos.
Para enviar un mensaje de prueba, añade un grupo de prueba de contenido o uno o varios usuarios individuales como Test Recipients y, a continuación, selecciona Send Test. Podrás ver tu mensaje de prueba en el dispositivo durante un máximo de 5 minutos. A continuación, puedes seleccionar Copy preview link para generar y copiar un enlace de vista previa compartible que muestra cómo se verá el banner para un usuario aleatorio. El enlace tendrá una validez de siete días antes de que sea necesario volver a generarlo.
Mientras revisas tu banner de prueba, verifica lo siguiente:
- ¿Tu Campaign de banner está asignada a una ubicación?
- ¿Las imágenes y los medios se muestran y funcionan como esperabas en los tipos de dispositivos y tamaños de pantalla a los que te diriges?
- ¿Tus enlaces y botones dirigen al usuario adonde deben ir?
- ¿Funciona Liquid como se esperaba? ¿Has previsto un valor de atributo predeterminado en caso de que Liquid no devuelva ninguna información?
- ¿Tu texto es claro, conciso y correcto?
Para más información, consulta Enviar mensajes de prueba.
Paso 6: Revisa e implementa
Cuando hayas terminado de crear tu Campaign o Canvas, revisa sus detalles, pruébalo y envíalo cuando estés listo.