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.

Crea un mensaje 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 campaña 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 con múltiples pasos.

  1. Ve a Mensajería > Campaigns y selecciona Crear Campaign.
  2. Selecciona Banner.
  3. Nombra tu campaña de forma clara y significativa.
  4. Añade equipos y etiquetas según sea necesario. Las etiquetas facilitan encontrar tus campañas y crear 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 a tu campaña.
  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 campaña de Banner. De forma predeterminada, los Banners duran indefinidamente. Puedes cambiar esto seleccionando Hora de finalización y especificando una fecha y hora de finalización.
  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. Nombra tu paso de forma clara y significativa.
  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 periodo 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: Redacta 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: Aplica estilos 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 los 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ífica, 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 que desean tener 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: Define el comportamiento al hacer clic (opcional)

Cuando un usuario hace clic en un enlace del Banner, puedes elegir navegarlo más profundamente en tu aplicación o redirigirlo a otra página web. Además, puedes elegir registrar un atributo o evento personalizado, 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 desees 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: Configura 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 deseas promover una oferta por tiempo limitado a una audiencia amplia, pero aún así 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. Si se deja en blanco, el valor predeterminado es “Cerrar”.

Cuando un usuario descarta un Banner, este no aparece de nuevo para ese usuario, incluso si aún cumple con los criterios de segmentación de la campaña.

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 forma, este no aparece de nuevo para ese usuario, incluso si aún cumple con los criterios de segmentación de la campaña.

Para 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 cómo se muestra el Banner, pero se pueden acceder 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 forma 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 campaña de Banner.

Para cada propiedad que desees 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. String
Clave de propiedad El identificador único para la propiedad. Esta clave se utiliza 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: Personaliza con contenido conectado (opcional)

Debido a que los Banners se renderizan de forma integrada 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 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 URLs únicas de contenido conectado en las ubicaciones que se renderizan juntas.
  • Evita encadenar llamadas donde una respuesta de contenido conectado determina la URL para la siguiente. Cada llamada adicional se suma al presupuesto compartido.
  • Usa instrucciones de protección Liquid o el filtro default para manejar resultados nulos y evitar Banners en blanco.

Paso 4: Construye el resto de tu campaña o Canvas

Establece 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 campañas para ordenarlas con la prioridad correcta.
  3. Selecciona Apply Sort.

Configura la reelegibilidad (opcional)

De forma predeterminada, los usuarios que descartan un Banner nunca vuelven a ser elegibles para esa campaña. 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 campaña. Cuando esté habilitado, establece un periodo de espera en minutos, horas, días o semanas.

La cuenta regresiva comienza cuando el usuario descarta el Banner. Una vez que expira el periodo, el usuario vuelve a ser elegible automáticamente, sin necesidad de reiniciar la campaña. La reelegibilidad se rastrea por usuario y por campaña.

Elige tu audiencia

  1. En Públicos objetivo, elige Segments o filtros para restringir tu audiencia. Recibirás automáticamente una vista previa de la población aproximada del segmento. La pertenencia exacta al segmento 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 campaña definiendo eventos de conversión con un periodo de hasta 30 días para contar la acción como una conversión.

Elige eventos de conversión

Braze te permite rastrear eventos de conversión, es decir, con qué frecuencia los usuarios realizan acciones específicas después de recibir una campaña. Tienes la opción de permitir un periodo de hasta 30 días durante el cual una conversión se cuenta si el usuario realiza la acción especificada.

Si aún no lo has hecho, completa las secciones restantes del componente de tu Canvas. Para más detalles sobre cómo construir el resto de tu Canvas, incluyendo pruebas multivariante y Optimizar con BrazeAITM, consulta Crea tu Canvas.

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

Paso 5: Prueba tu mensaje (opcional)

Selecciona vista previa 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 vista previa 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: Revisa y despliega

Cuando hayas terminado de construir tu campaña o Canvas, revisa sus detalles, pruébala y luego envíala cuando estés listo.
New Stuff!