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 resolução de problemas durante o desenvolvimento, considere ativar a depuração.
2. Inscrever-se nos eventos de Banner {#2-subscribe-to-banner-events}
Use subscribeToBannersEvents() no Web SDK 7.0.0 e posterior para registrar um manipulador. O manipulador é executado quando o cache do Banner é reproduzido, recarregado ou atualizado, ou quando ocorre um erro. Dentro do manipulador, leia a colocação a partir de event.cacheSnapshot.banners. subscribeToBannersUpdates() é o padrão anterior, descontinuado a partir da versão 7.0.0. Para a lista completa de eventos, consulte Inscrições em eventos.
3. Inserir o Banner e lidar com 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 organizado, oculte ou recolha Banners que fazem parte de um grupo de controle (por exemplo, quando isControl é true).
4. Atualizar 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. Adicionar um contêiner para 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. Ative a 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 nos eventos de Banner {#2-subscribe-to-banner-events}
Use subscribeToBannersEvents() para registrar um handler que é executado quando o cache de Banners é reproduzido ou atualizado. BannersCacheSnapshot.banners é um mapa de ID de colocação para Banner.
Para ver a lista completa de eventos que você pode receber, confira Inscrições em eventos.
3. Defina BannerView no seu banners.xml {#3-define-bannerview-in-your-bannersxml}
Em banners.xml, declare um <com.braze.ui.banners.BannerView> com app:placementId="PLACEMENT_ID" e defina android:layout_height como 0dp. A visualização permanece no layout sem altura até que o Banner informe a altura do seu conteúdo. Assim, a tela não reserva espaço vazio antes de um Banner carregar.
Depois de uma atualização, o SDK atualiza um BannerView somente quando o conteúdo daquela colocação muda. Banners exibidos que não mudaram permanecem como estão.
4. Atualize a altura do Banner {#4-update-the-banner-height}
Defina heightCallback no BannerView. O retorno de chamada recebe a altura do Banner em dp. Aplique essa altura à visualização você mesmo: converta dp em pixels e, então, defina a altura do layout.
O HTML do Banner informa a altura por meio de uma interface JavaScript, então o heightCallback pode ser executado fora da thread principal. Atualize a visualização dentro de bannerView.post para que a alteração seja executada na thread principal.
Uma altura de 0.0 significa que não há conteúdo para exibir. O SDK informa 0.0 quando a colocação não tem Banner, quando o Banner está em um grupo de controle ou quando o Banner foi descartado. Aplique 0.0 também, para que a visualização seja recolhida e permaneça no layout para o próximo Banner.
5. Limite a altura do Banner {#5-limit-the-banner-height}
Defina um limite para a altura que você aplica. Neste exemplo, min(heightDp, 80.0) mantém o Banner com 80 dp ou menos.
6. Atualize suas colocações {#6-refresh-your-placements}
Depois de inicializar o SDK da Braze, chame requestBannersRefresh(["PLACEMENT_ID"]) para buscar o conteúdo mais recente do Banner para essa colocação.
Essa chamada é mesclada ao cache de Banners existente. Somente os IDs de colocação que você solicitar são adicionados, atualizados ou removidos. Banners em cache de outras colocações permanecem no cache e expiram no horário de vencimento original. Se o servidor não retornar nenhum Banner para uma colocação solicitada, essa colocação é removida do cache.
Para usar o Jetpack Compose, adicione o artefato com.braze:android-sdk-jetpack-compose ao módulo do seu app. Use a mesma versão das suas outras dependências do SDK Android da Braze.
1. Ative a depuração (opcional)
Para facilitar a solução de problemas durante o desenvolvimento, considere ativar a depuração.
2. Inscreva-se nos eventos de Banner
Chame subscribeToBannersEvents e guarde o subscriber para poder removê-lo quando o composable sair da tela. Defina hasBannerForPlacement quando CacheReplay, CacheLoad ou DataUpdated contiver essa colocação. Em um ErrorEvent com FeatureDisabled, defina hasBannerForPlacement como false.
Os eventos de Banner chegam em uma thread em segundo plano. Envie as atualizações de interface para a thread principal.
Para saber quando cada evento é disparado, confira Inscrições em eventos.
3. Atualize suas colocações {#3-refresh-your-placements}
Depois de registrar o subscriber, chame requestBannersRefresh(["PLACEMENT_ID"]) para buscar o conteúdo mais recente do Banner para essa colocação. Remova o subscriber com removeSingleSubscription quando não precisar mais dele.
4. Exiba o Banner somente depois que ele estiver no cache {#4-only-show-the-banner-after-it-is-in-the-cache}
Exiba Banner somente quando hasBannerForPlacement for verdadeiro. A colocação fica fora do seu layout até que o cache contenha um Banner para ela.
Importe com.braze.jetpackcompose.banners.Banner. Outras bibliotecas do Compose definem o próprio composable Banner.
5. Atualize a altura do Banner {#5-update-the-banner-height}
Passe heightCallback para Banner. O retorno de chamada recebe a altura do Banner em dp. Armazene esse valor em contentHeight e aplique-o com Modifier.height. O Banner deixa o dimensionamento a cargo do seu layout.
O heightCallback pode ser executado fora da thread principal. Envie a atualização de estado para a thread principal antes de alterar contentHeight.
Uma altura de 0.0 significa que não há conteúdo para exibir e evita espaços vazios na sua interface. O SDK informa 0.0 quando a colocação não tem Banner, quando o Banner está em um grupo de controle ou quando o Banner foi descartado.
6. Limite a altura do Banner {#6-limit-the-banner-height}
Defina um limite para a altura que você aplica. Neste exemplo, min(contentHeight, 80.0) mantém o Banner com 80 dp ou menos.
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. Inscrever-se nos eventos de Banner {#2-subscribe-to-banner-events} {#2-subscribe-to-banner-events}
Use subscribeToEvents para registrar um handler que é executado quando o cache de Banner é reproduzido, recarregado ou atualizado, ou quando ocorre um erro. cacheSnapshot.banners é um dicionário de ID de colocação para Banner. Mantenha uma referência forte ao Braze.Cancellable retornado, pois o SDK cancela a inscrição quando ele é desalocado.
Para saber quando cada evento é disparado, consulte Inscrições em eventos.
3. Atualizar suas colocações {#3-refresh-your-placements} {#3-refresh-your-placements}
Depois de registrar sua inscrição, chame requestBannersRefresh(placementIds: ["PLACEMENT_ID"]) para atualizar o conteúdo do Banner no início de cada sessão.
4. Inicializar o Banner e fornecer um retorno de chamada {#4-initialize-the-banner-and-provide-a-callback} {#4-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 fornecida.
5. Ativar restrições de Auto Layout {#5-enable-auto-layout-constraints} {#5-enable-auto-layout-constraints}
Oculte a visualização do Banner por padrão e, em seguida, desative a tradução da máscara de redimensionamento automático para ativar as restrições de Auto Layout.
6. Ancorar conteúdo e definir restrições de altura {#6-anchor-content-and-set-height-constraints} {#6-anchor-content-and-set-height-constraints}
Ancore seu conteúdo principal no topo usando Auto Layout e posicione a visualização do Banner 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 for carregado.
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} {#2-refresh-your-placements}
Depois de 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. Inscrever-se nos eventos de Banner {#4-subscribe-to-banner-events} {#4-subscribe-to-banner-events}
Em .onAppear, use subscribeToEvents para registrar um handler que define hasBannerForPlacement sempre que o cache de Banner é reproduzido, recarregado ou atualizado. Mantenha uma referência forte ao Braze.Cancellable retornado no seu estado, pois o SDK cancela a inscrição quando ele é desalocado.
Para saber quando cada evento é disparado, consulte Inscrições em eventos.
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 somente se um Banner estiver presente e o SDK estiver inicializado.
6. Atualizar a altura do Banner dinamicamente {#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 for carregado. 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.