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} {#1-enable-debugging-optional}
Para facilitar a solução de problemas durante o desenvolvimento, considere ativar a depuração.
2. Atualizar suas colocações {#2-refresh-your-placements} {#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. Inicializar o Banner e fornecer um retorno de chamada {#3-initialize-the-banner-and-provide-a-callback} {#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} {#4-enable-auto-layout-constraints}
Oculte a visualização do Banner por padrão e desative a tradução de máscara de redimensionamento automático para ativar as restrições de Auto Layout.
5. Ancorar o conteúdo e definir restrições de altura {#5-anchor-content-and-set-height-constraints} {#5-anchor-content-and-set-height-constraints}
Ancore seu conteúdo principal no topo usando Auto Layout e posicione a visualização do Banner logo após ele. Fixe as bordas esquerda, direita e inferior do Banner na área segura e defina uma restrição de altura inicial de 0 que será atualizada quando o conteúdo carregar.
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. Atualizar suas colocações {#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. Criar um componente de visualização {#3-create-a-view-component} {#3-create-a-view-component}
Crie um componente de visualização SwiftUI reutilizável que exiba os Banners disponíveis e contenha o conteúdo principal do seu app, se necessário.
4. Exibir apenas Banners disponíveis {#4-only-display-available-banners} {#4-only-display-available-banners}
Tente exibir BrazeBannerUI.BannerView apenas se o SDK estiver inicializado e houver conteúdo de Banner para aquele usuário. Em .onAppear, chame getBanner(for:placementID) para definir o estado de hasBannerForPlacement.
5. Exibir BannerView somente após o carregamento {#5-only-show-bannerview-after-it-loads} {#5-only-show-bannerview-after-it-loads}
Para evitar espaço em branco na sua interface, exiba BrazeBannerUI.BannerView apenas se um Banner estiver presente e o SDK estiver inicializado.
6. Atualizar dinamicamente a altura do Banner {#6-dynamically-update-banner-height} {#6-dynamically-update-banner-height}
Use o retorno de chamada processContentUpdates para obter a altura do conteúdo do Banner assim que ele carregar. Atualize o estado do SwiftUI (contentHeight) e aplique uma restrição .frame(height:) usando a altura fornecida.
7. Limitar a altura do Banner {#7-limit-the-banner-height} {#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.