Tutorial: Mostrar un banner por ID de ubicación
Sigue el código de ejemplo de este tutorial para mostrar banners utilizando su ID de ubicación. Para obtener información más general, consulta Banners.
Requisitos previos
Antes de comenzar este tutorial, comprueba que tu SDK de Braze cumple los requisitos mínimos de versión:
Mostrar banners para el SDK Web
Estamos probando este nuevo formato de tutorial. Dinos qué opinan — sus comentarios nos ayudan a mejorar las guías futuras.
1. Habilitar depuración (opcional) {#1-enable-debugging-optional}
Para facilitar la solución de problemas durante el desarrollo, considera habilitar la depuración.
2. Suscríbete a las actualizaciones de banner {#2-subscribe-to-banner-updates}
Utiliza subscribeToBannersUpdates() para registrar un controlador que se ejecute cada vez que se actualice un banner. Dentro del controlador, llama a braze.getBanner("global_banner") para obtener la última ubicación.
3. Inserta el banner y gestiona los grupos de control {#3-insert-the-banner-and-handle-control-groups}
Utiliza braze.insertBanner(banner, container) para insertar un banner cuando se devuelva. Para mantener tu diseño limpio, oculta o contrae los banners que forman parte de un grupo de control (por ejemplo, cuando isControl es true).
4. Actualiza tus banners {#4-refresh-your-banners}
Después de inicializar el SDK, llama a requestBannersRefresh(["global_banner", ...]) para asegurarte de que los banners se actualicen al inicio de cada sesión.
También puedes llamar a esta función en cualquier momento para actualizar posteriormente las ubicaciones de los banners.
5. Añade un contenedor para tu banner {#5-add-a-container-for-your-banner}
En tu HTML, añade un nuevo elemento <div> y asígnale un id breve relacionado con el banner, como global-banner-container. Braze utilizará este <div> para insertar tu banner en la página.
Requisitos previos
Antes de comenzar este tutorial, comprueba que tu SDK de Braze cumple los requisitos mínimos de versión:
Mostrar banners para el SDK de Android
Estamos probando este nuevo formato de tutorial. Dinos qué opinan — sus comentarios nos ayudan a mejorar las guías futuras.
1. Habilitar depuración (opcional) {#1-enable-debugging-optional}
Para facilitar la solución de problemas durante el desarrollo, considera habilitar la depuración.
2. Suscríbete a las actualizaciones de banner {#2-subscribe-to-banner-updates}
Utiliza subscribeToBannersUpdates() para registrar un controlador que se ejecute cada vez que se actualice un banner.
3. Actualiza tus ubicaciones {#3-refresh-your-placements}
Después de inicializar el SDK de Braze, llama a requestBannersRefresh(["PLACEMENT_ID"]) para obtener el contenido más reciente del banner para esa ubicación.
4. Define BannerView en tu banners.xml {#4-define-bannerview-in-your-bannersxml}
En banners.xml, declara un elemento <com.braze.ui.banners.BannerView> con app:placementId="PLACEMENT_ID". Braze utilizará este elemento para insertar tu banner en tu interfaz de usuario.
Requisitos previos
Antes de comenzar este tutorial, comprueba que tu SDK de Braze cumple los requisitos mínimos de versión:
Mostrar banners para el SDK de Swift
Estamos probando este nuevo formato de tutorial. Dinos qué opinan — sus comentarios nos ayudan a mejorar las guías futuras.
1. Habilitar depuración (opcional) {#1-enable-debugging-optional}
Para facilitar la solución de problemas durante el desarrollo, considera habilitar la depuración.
2. Actualiza tus ubicaciones {#2-refresh-your-placements}
Después de inicializar el SDK de Braze, llama a requestBannersRefresh(placementIds: ["PLACEMENT_ID"]) para actualizar el contenido del banner al inicio de cada sesión.
3. Inicializa el banner y proporciona una devolución de llamada {#3-initialize-the-banner-and-provide-a-callback}
Crea una instancia de BrazeBannerUI.BannerUIView con tu objeto Braze y el ID de ubicación, y proporciona una devolución de llamada processContentUpdates para mostrar el banner y actualizar su restricción de altura en función de la altura del contenido proporcionado.
4. Habilitar restricciones de Auto Layout {#4-enable-auto-layout-constraints}
Oculta la vista del banner de forma predeterminada y, a continuación, desactiva la traducción de la máscara de redimensionamiento automático para habilitar las restricciones de Auto Layout.
5. Anclar contenido y establecer restricciones de altura {#5-anchor-content-and-set-height-constraints}
Fija tu contenido principal en la parte superior utilizando Auto Layout y coloca la vista del banner después de él. Fija los bordes inicial, final e inferior del banner al área segura y establece una restricción de altura inicial de 0 que se actualizará cuando se cargue el contenido.
1. Habilitar depuración (opcional)
Para facilitar la solución de problemas durante el desarrollo, considera habilitar la depuración.
2. Actualiza tus ubicaciones
Después de inicializar el SDK de Braze, llama a requestBannersRefresh(placementIds: ["PLACEMENT_ID"]) para actualizar el contenido del banner al inicio de cada sesión.
3. Crear un componente de vista {#3-create-a-view-component}
Crea un componente de vista SwiftUI reutilizable que muestre los banners disponibles y contenga el contenido principal de tu aplicación si es necesario.
4. Mostrar solo los banners disponibles {#4-only-display-available-banners}
Solo intenta mostrar BrazeBannerUI.BannerView si el SDK está inicializado y existe contenido de banner para ese usuario. En .onAppear, llama a getBanner(for:placementID) para establecer el estado de hasBannerForPlacement.
5. Mostrar solo BannerView después de que se cargue {#5-only-show-bannerview-after-it-loads}
Para evitar espacios en blanco en la interfaz de usuario, solo muestra BrazeBannerUI.BannerView si hay un banner presente y el SDK está inicializado.
6. Actualizar de forma dinámica la altura del banner {#6-dynamically-update-banner-height}
Utiliza la devolución de llamada processContentUpdates para obtener la altura del contenido del banner tan pronto como se cargue. Actualiza tu estado SwiftUI (contentHeight) y aplica una restricción .frame(height:) utilizando la altura proporcionada.
7. Limitar la altura del banner {#7-limit-the-banner-height}
Para asegurarte de que tu banner nunca supere la altura máxima, aplica un modificador .frame(height: min(contentHeight, 80)). Esto mantendrá tu interfaz de usuario visualmente equilibrada independientemente del contenido del banner.