Tutorial: Exibindo um Banner pelo ID de Colocação
Siga o código de exemplo neste tutorial para exibir Banners usando seu ID de colocação. Para mais informações gerais, veja Banners.
Pré-requisitos
Antes de começar este tutorial, verifique se o seu SDK Braze atende aos requisitos mínimos de versão:
Exibindo banners para o SDK web
Estamos testando este novo formato de tutorial. Diga-nos o que você acha — seus comentários nos ajudam a melhorar os guias futuros.
1. Ativar depuração (opcional) {#1-enable-debugging-optional}
Para facilitar a solução de problemas durante o desenvolvimento, considere ativar a depuração.
2. Inscreva-se para atualizações de Banner {#2-subscribe-to-banner-updates}
Use subscribeToBannersUpdates() para registrar um manipulador que será executado sempre que um Banner for atualizado. Dentro do manipulador, chame braze.getBanner("global_banner") para obter a colocação mais recente.
3. Insira o Banner e gerencie grupos de controle {#3-insert-the-banner-and-handle-control-groups}
Use braze.insertBanner(banner, container) para inserir um Banner quando ele for retornado. Para manter seu layout limpo, oculte ou recolha Banners que fazem parte de um grupo de controle (por exemplo, quando isControl é true).
4. Atualize seus Banners {#4-refresh-your-banners}
Após inicializar o SDK, chame requestBannersRefresh(["global_banner", ...]) para garantir que os Banners sejam atualizados no início de cada sessão.
Você também pode chamar essa função a qualquer momento para atualizar as colocações de Banner posteriormente.
5. Adicione um contêiner para o seu Banner {#5-add-a-container-for-your-banner}
No seu HTML, adicione um novo elemento <div> e atribua a ele um id curto e relacionado ao Banner, como global-banner-container. A Braze usará esse <div> para inserir seu Banner na página.
Pré-requisitos
Antes de começar este tutorial, verifique se o seu SDK Braze atende aos requisitos mínimos de versão:
Exibindo banners para o SDK Android
Estamos testando este novo formato de tutorial. Diga-nos o que você acha — seus comentários nos ajudam a melhorar os guias futuros.
1. Ativar depuração (opcional) {#1-enable-debugging-optional}
Para facilitar a solução de problemas durante o desenvolvimento, considere ativar a depuração.
2. Inscreva-se para atualizações de Banner {#2-subscribe-to-banner-updates}
Use subscribeToBannersUpdates() para registrar um manipulador que será executado sempre que um Banner for atualizado.
3. Atualize suas colocações {#3-refresh-your-placements}
Após inicializar o SDK da Braze, chame requestBannersRefresh(["PLACEMENT_ID"]) para buscar o conteúdo mais recente do Banner para essa colocação.
4. Defina BannerView no seu banners.xml {#4-define-bannerview-in-your-bannersxml}
Em banners.xml, declare um elemento <com.braze.ui.banners.BannerView> com app:placementId="PLACEMENT_ID". A Braze usará esse elemento para inserir seu Banner na sua interface de usuário.
Pré-requisitos
Antes de começar este tutorial, verifique se o seu SDK Braze atende aos requisitos mínimos de versão:
Exibindo banners para o SDK Swift
Estamos testando este novo formato de tutorial. Diga-nos o que você acha — seus comentários nos ajudam a melhorar os guias futuros.
1. Ativar depuração (opcional) {#1-enable-debugging-optional}
Para facilitar a solução de problemas durante o desenvolvimento, considere ativar a depuração.
2. Atualize seus posicionamentos {#2-refresh-your-placements}
Após inicializar o SDK da Braze, chame requestBannersRefresh(placementIds: ["PLACEMENT_ID"]) para atualizar o conteúdo do Banner no início de cada sessão.
3. Inicialize o Banner e forneça um retorno de chamada {#3-initialize-the-banner-and-provide-a-callback}
Crie uma instância de BrazeBannerUI.BannerUIView com seu objeto Braze e ID de colocação, e forneça um retorno de chamada processContentUpdates para exibir o Banner e atualizar sua restrição de altura com base na altura do conteúdo fornecido.
4. Ativar restrições de Auto Layout {#4-enable-auto-layout-constraints}
Oculte a visualização do Banner por padrão e desative a tradução da máscara de redimensionamento automático para ativar as restrições de Auto Layout.
5. Ancore o conteúdo e defina restrições de altura {#5-anchor-content-and-set-height-constraints}
Ancore seu conteúdo principal na parte superior usando Auto Layout e coloque a visualização do Banner logo abaixo dele. Prenda as bordas leading, trailing e inferior do Banner à área segura e defina uma restrição de altura inicial de 0 que será atualizada quando o conteúdo for carregado.
1. Ativar depuração (opcional)
Para facilitar a solução de problemas durante o desenvolvimento, considere ativar a depuração.
2. Atualize seus posicionamentos
Após inicializar o SDK da Braze, chame requestBannersRefresh(placementIds: ["PLACEMENT_ID"]) para atualizar o conteúdo do Banner no início de cada sessão.
3. Crie um componente de visualização {#3-create-a-view-component}
Crie um componente de visualização reutilizável em SwiftUI que exiba Banners disponíveis e contenha o conteúdo principal do seu app, se necessário.
4. Exiba apenas Banners disponíveis {#4-only-display-available-banners}
Tente mostrar BrazeBannerUI.BannerView apenas se o SDK estiver inicializado e houver conteúdo de Banner para esse usuário. Em .onAppear, chame getBanner(for:placementID) para definir o estado de hasBannerForPlacement.
5. Mostre BannerView apenas após o carregamento {#5-only-show-bannerview-after-it-loads}
Para evitar espaço em branco na sua interface, mostre BrazeBannerUI.BannerView apenas se um Banner estiver presente e o SDK estiver inicializado.
6. Atualize dinamicamente a altura do Banner {#6-dynamically-update-banner-height}
Use o retorno de chamada processContentUpdates para obter a altura do conteúdo do Banner assim que ele for carregado. Atualize seu estado SwiftUI (contentHeight) e aplique uma restrição .frame(height:) usando a altura fornecida.
7. Limite a altura do Banner {#7-limit-the-banner-height}
Para garantir que seu Banner nunca exceda a altura máxima, aplique o modificador .frame(height: min(contentHeight, 80)). Isso manterá sua interface visualmente equilibrada, independentemente do conteúdo do Banner.