Skip to content

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 el borrador de tu campaña de Banner, pero no podrás lanzar la campaña hasta que las ubicaciones estén configuradas.

Crear un mensaje de Banner

Paso 1: Crear colocaciones en Braze

Si aún no lo has hecho, tendrás que crear ubicaciones para Banners en Braze, que se utilizan para definir las ubicaciones en las que tu aplicación o sitio pueden mostrar Banners. Para crear una colocación, ve a Configuración > Colocaciones de banners y, a continuación, selecciona Crear colocación.

Sección Colocaciones de Banner para crear ID de colocación.

Dale un nombre a tu colocación y asígnale un ID de colocació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 colocación.

Los detalles de colocación que designan un Banner se mostrarán en la barra lateral izquierda para las campañas de promoción de ventas de primavera.

Paso 2: Elige dónde crear tu mensaje

¿No estás seguro de 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.

  1. Ve a Mensajería > Campaigns y selecciona Crear Campaign.
  2. Selecciona Banner.
  3. Dale a tu Campaign un nombre claro y significativo.
  4. Añade equipos y etiquetas según sea necesario. Las etiquetas facilitan encontrar tus Campaigns y generar informes a partir de ellas. Por ejemplo, al usar el generador de informes, puedes filtrar por las etiquetas relevantes.
  5. Selecciona la ubicación que creaste previamente para asociarla con tu Campaign.
  6. Añade variantes según sea necesario. Puedes elegir un tipo de mensaje y diseño diferente para cada una. Para más información sobre variantes, consulta Pruebas multivariante y A/B.
  7. Elige una fecha y hora de inicio para tu Campaign de Banner. De forma predeterminada, los Banners duran indefinidamente. Puedes cambiar esto seleccionando Hora de finalización y especificando una fecha y hora de fin.
  1. Crea tu Canvas usando el creador de Canvas.
  2. Después de configurar tu Canvas, añade un paso de Mensaje en el constructor de Canvas. Dale a tu paso un nombre claro y significativo.
  3. Selecciona Banner como tu canal de mensajería.
  4. Selecciona una ubicación para el Banner.
  5. Establece la prioridad. La prioridad de Banner determina el orden en que se muestran los Banners si comparten la misma ubicación.
  6. Establece una expiración para el Banner. Puede ser después de un período de tiempo tras la disponibilidad del paso o en una fecha y hora específicas. La duración máxima de expiración es de 31 días después de que el paso esté disponible para el usuario.

Paso 3: Componer un Banner

A continuación, elige cómo quieres empezar a construir:

  • Editor de arrastrar y soltar: Comienza con un Banner en blanco y construye visualmente con bloques y filas.
  • Editor HTML: Comienza 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 su personalización.

Opciones para elegir el editor de arrastrar y soltar, el editor HTML o las plantillas para tu Banner.

Paso 3.1: Dar estilo al Banner

Puedes arrastrar y soltar bloques y filas en el área del lienzo para empezar a construir tu mensaje. Para una referencia de los bloques del editor de Banner y enlaces a detalles de propiedades compartidas, consulta Bloques de editor (Banners).

Para personalizar las propiedades de fondo de tu mensaje, la configuración de bordes y más, selecciona Estilos. Si solo quieres personalizar el estilo de un bloque o fila específicos, selecciónalo para hacer cambios.

Panel de estilos del creador de Banner.

Ocultar filas y bloques por dispositivo

Para adaptar tu diseño a escritorio frente a tableta y móvil, selecciona una fila o un bloque en el lienzo y luego usa el alternador Ocultar en en el panel de propiedades para ocultarlo en Escritorio o Tableta y dispositivos más pequeños. Una fila o bloque oculto no aparecerá para ese tipo de dispositivo, ya sea al previsualizar tu Banner en el editor de arrastrar y soltar o en el Banner en vivo.

El editor HTML es ideal para equipos que ya mantienen sus propias plantillas HTML o quieren control total sobre el marcado y los estilos. Puedes escribir o pegar HTML personalizado directamente en el editor. Las etiquetas de personalización Liquid son totalmente compatibles, por lo que puedes hacer referencia a atributos de usuario, atributos personalizados, elementos de catálogo y más.

Para el seguimiento de clics y descartes en tu HTML personalizado, debes llamar a los métodos del puente JavaScript de forma explícita. Para la referencia completa, consulta Código personalizado y puente JavaScript para Banners.

Paso 3.2: Definir el comportamiento al hacer clic (opcional)

Cuando un usuario hace clic en un enlace del Banner, puedes elegir navegar más profundamente dentro de tu aplicación o redirigirlo a otra página web. Además, puedes elegir registrar un atributo personalizado o evento, lo que actualiza el perfil de tu usuario con datos personalizados cuando hace clic en el Banner. Para un seguimiento de clics más granular, asigna un identificador personalizado a cada elemento interactivo usando el campo Identificador para informes en su panel de propiedades.

En el editor HTML, el seguimiento de clics no es automático. Debes llamar a brazeBridge.logClick() desde tu HTML para cada elemento clicable que quieras rastrear. Por ejemplo:

1

<a href="https://example.com" onclick="brazeBridge.logClick()">Shop now</a>

Para la referencia completa del puente JavaScript, consulta Código personalizado y puente JavaScript para Banners.

Paso 3.3: Configurar el comportamiento de descarte (opcional)

Selecciona la casilla El Banner puede ser descartado en la sección Comportamiento de descarte para permitir que los usuarios descarten el Banner. Esto es útil cuando quieres promocionar una oferta por tiempo limitado a una audiencia amplia pero aún permitir 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 para el botón de descarte, utilizada por lectores de pantalla. De forma predeterminada es “Cerrar” si se deja en blanco.

Cuando un usuario descarta un Banner, este no vuelve a aparecer para ese usuario, incluso si aún cumple con los criterios de segmentación de la Campaign.

En el editor HTML, el descarte se gestiona en tu HTML usando brazeBridge.closeMessage(). Combínalo con brazeBridge.logClick() para también rastrear la acción de descarte como un evento de clic. Por ejemplo:

1

<a href="#" onclick="brazeBridge.logClick(); brazeBridge.closeMessage();">&#x2715; Close</a>

Cuando un usuario descarta un Banner de esta manera, este no vuelve a aparecer para ese usuario, incluso si aún cumple con los criterios de segmentación de la Campaign.

Para la referencia completa del puente JavaScript, consulta Código personalizado y puente JavaScript para Banners.

Paso 3.4: Añadir propiedades personalizadas (opcional)

Puedes añadir propiedades personalizadas a un Banner para adjuntar metadatos estructurados, como cadenas u objetos JSON. Estas propiedades no afectan cómo se muestra el Banner, pero pueden ser accedidas a través del SDK de Braze para modificar el comportamiento o la apariencia de tu aplicación. Por ejemplo, podrías:

  • Envía metadatos para tus análisis o integraciones de terceros.
  • Usa metadatos como un timestamp u objeto JSON para desencadenar lógica condicional.
  • Controla el comportamiento de un Banner basándote en metadatos incluidos como ratio o format.

Las propiedades personalizadas funcionan de la misma manera 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.

La página de propiedades mostrando la opción de añadir la primera propiedad personalizada a una Campaign de Banner.

Para cada propiedad que quieras añadir, completa lo siguiente:

Campo Descripción Ejemplo
Tipo de propiedad El tipo de datos para la propiedad. Los tipos compatibles incluyen cadena, booleano, número, marca de tiempo, URL de imagen y objeto JSON. Cadena
Clave de propiedad El identificador único para 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 hayas terminado, selecciona Listo.

La página de propiedades con una propiedad de tipo cadena con una clave de color y un valor de #FF0000.

Paso 3.5: Personalizar con contenido conectado (opcional)

Debido a que los Banners se renderizan en línea durante una actualización de sesión, el contenido conectado en este canal funciona de manera diferente que en otros canales:

  • Solo se admiten solicitudes GET.
  • Todas las ubicaciones en una sola actualización (hasta 10) comparten un presupuesto de renderizado de aproximadamente dos segundos. Si una llamada es lenta, se agota el tiempo o se excede el presupuesto, el resultado del contenido conectado para esa ubicación se trata como nulo. Los Banners no reintentan.

Para mejores resultados:

  • Mantén tus endpoints rápidos y almacena en caché las respuestas siempre que sea posible.
  • Limita el número de URLs únicas de contenido conectado entre las ubicaciones que se renderizan juntas.
  • Evita encadenar llamadas donde una respuesta de contenido conectado determina la URL de la siguiente. Cada llamada adicional se suma al presupuesto compartido.
  • Usa declaraciones de protección Liquid o el filtro default para manejar resultados nulos y evitar Banners en blanco.

Paso 4: Construir el resto de tu Campaign o Canvas

Establecer la prioridad del Banner (opcional)

La prioridad de Banner determina el orden en que se muestran los Banners si comparten la misma ubicación. Para establecer la prioridad manualmente:

  1. Selecciona Set exact priority.
  2. Arrastra y suelta las Campaigns para ordenarlas con la prioridad correcta.
  3. Selecciona Apply Sort.

Configurar la reelegibilidad (opcional)

De forma predeterminada, los usuarios que descartan un Banner nunca son reelegibles para esa Campaign. Para permitir que los usuarios que descartaron el Banner lo vean de nuevo, ve al paso Controles de entrega y selecciona Permitir que los usuarios vuelvan a ser elegibles para recibir la Campaign. Cuando esté habilitado, establece una ventana de espera en minutos, horas, días o semanas.

La cuenta regresiva comienza cuando el usuario descarta el Banner. Después de que la ventana expire, el usuario es automáticamente reelegible, sin necesidad de reiniciar la Campaign. La reelegibilidad se rastrea por usuario por Campaign.

Elegir tu audiencia

  1. En Públicos objetivo, elige Segments o filtros para reducir tu audiencia. Recibes automáticamente una vista previa de la población aproximada del Segment. La membresía exacta del Segment se calcula antes de que se envíe el mensaje.
  1. En Asignar conversiones, rastrea con qué frecuencia los usuarios realizan acciones específicas después de recibir una Campaign definiendo eventos de conversión con una ventana de hasta 30 días para contar la acción como una conversión.

Elegir eventos de conversión

Braze te permite rastrear eventos de conversión, con qué frecuencia los usuarios realizan acciones específicas, después de recibir una Campaign. Tienes la opción de permitir una ventana de hasta 30 días durante la cual se cuenta 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 construir el resto de tu Canvas, implementar pruebas multivariante y selección inteligente, y más, consulta el paso Construir tu Canvas de nuestra documentación de Canvas.

Para controlar la reelegibilidad en los pasos de Banner de Canvas, usa la configuración de reentrada de Canvas. Para más información, consulta Reelegibilidad para Campaigns y Canvas.

Paso 5: Probar tu mensaje (opcional)

Selecciona Preview para obtener una vista previa de tu banner o enviar un mensaje de prueba.

Pestaña Vista previa del compositor de banners.

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.

Pestaña Vista previa del compositor de banners.

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: Revisar e implementar

Después de que hayas terminado de construir tu Campaign o Canvas, revisa sus detalles, pruébala y luego envíala cuando estés listo.
New Stuff!