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. Ativar depuração (opcional) {#1-enable-debugging-optional} {#1-enable-debugging-optional}
Para facilitar a resolução de problemas durante o desenvolvimento, considere ativar a depuração.
2. Inscrever-se em eventos de Banner {#2-subscribe-to-banner-events} {#2-subscribe-to-banner-events}
Use subscribeToBannersEvents() para registrar um handler que é executado quando o cache de Banner é reproduzido ou atualizado. BannersCacheSnapshot.banners é um mapa de ID de colocação para Banner.
Para a lista completa de eventos que você pode receber, consulte Inscrições em eventos.
3. Atualizar suas colocações {#3-refresh-your-placements} {#3-refresh-your-placements}
Após inicializar o SDK da Braze, chame requestBannersRefresh(["PLACEMENT_ID"]) para buscar o conteúdo de Banner mais recente para essa colocação.
Essa chamada é mesclada ao cache de Banner existente. Apenas os IDs de colocação que você solicitar são adicionados, atualizados ou removidos. Banners em cache para 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.
4. Definir BannerView no seu banners.xml {#4-define-bannerview-in-your-bannersxml} {#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.
Após uma atualização, o SDK atualiza um BannerView apenas quando o conteúdo dessa colocação muda. Banners exibidos que não foram alterados permanecem como estão.
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.