Criar um Banner

Saiba como criar Banners ao construir Campaigns e Canvas na Braze. Para saber mais, consulte Sobre Banners.

Pré-requisitos

Antes de lançar seu Banner, sua equipe de desenvolvimento precisa configurar os posicionamentos no seu app ou website. Enquanto isso, você já pode criar o rascunho da sua campanha de Banner, mas só vai conseguir lançá-la depois que os posicionamentos estiverem configurados.

Nota

Para posicionamentos na web, você também pode usar o direcionamento na web para escolher onde um Banner aparece no seu website, sem precisar escrever código de inserção para cada posicionamento.

Criar uma mensagem de Banner

Etapa 1: Criar posicionamentos na Braze

Se ainda não o fez, você precisará criar posicionamentos de Banner na Braze, que são usados para definir os locais em seu app ou site que podem exibir Banners. Para criar um posicionamento, acesse Configurações > Posicionamentos de Banners e selecione Criar posicionamento.

Dê um nome ao seu posicionamento e atribua um ID de posicionamento. Consulte outras equipes antes de atribuir um ID, pois ele será usado durante todo o ciclo de vida do cartão e não deve ser alterado posteriormente. Para saber mais, consulte IDs de posicionamento.

Etapa 2: Escolha onde criar sua mensagem

Não sabe se deve enviar sua mensagem usando uma Campaign ou um Canvas? As Campaigns são melhores para mensagens únicas e direcionadas. Já os Canvas são mais indicados para jornadas do usuário com várias etapas.

• campaign
• canvas

1. Acesse Envio de mensagens > Campanhas e selecione Criar campanha.
2. Selecione Banner.
3. Dê à sua Campaign um nome claro e significativo.
4. Adicione equipes e tags conforme necessário. As tags facilitam encontrar suas Campaigns e gerar relatórios a partir delas. Por exemplo, ao usar o Criador de Relatórios, você pode filtrar pelas tags relevantes.
5. Selecione o posicionamento que você criou anteriormente para associá-lo à sua Campaign.
6. Adicione variantes conforme necessário. Você pode escolher um tipo de mensagem e um layout diferentes para cada uma. Para saber mais sobre variantes, consulte Testes multivariantes e Testes A/B.
7. Escolha uma data e um horário de início para sua Campaign de Banner. Por padrão, os Banners duram indefinidamente. Para mudar isso, selecione Horário de término e especifique uma data e um horário de término.

Dica

Se todas as mensagens da sua Campaign forem parecidas ou tiverem o mesmo conteúdo, crie sua mensagem antes de adicionar outras variantes. Depois, você pode selecionar Copiar da variante no menu suspenso Adicionar variante.

1. Crie seu Canvas usando o criador de Canvas.
2. Depois de configurar seu Canvas, adicione uma etapa de Mensagem no construtor de Canvas. Dê à sua etapa um nome claro e significativo.
3. Selecione Banner como seu canal de envio de mensagens.
4. Selecione um posicionamento para o Banner.
5. Defina a prioridade. A prioridade do Banner determina a ordem em que os Banners são exibidos quando compartilham o mesmo posicionamento.
6. Defina uma expiração para o Banner. Ela pode ocorrer após um período de tempo depois que a etapa fica disponível ou em uma data e horário específicos. A duração máxima de expiração é de 31 dias após a etapa ficar disponível para o usuário.

Etapa 3: Crie um Banner

Em seguida, escolha como você quer começar a criar:

• Editor de arrastar e soltar: Comece com um Banner em branco e crie visualmente com blocos e linhas.
• Editor de HTML: Comece com um Banner em branco e trabalhe diretamente em HTML.
• Modelos: Abra a biblioteca de modelos e selecione um design em Modelos da Braze ou Seus modelos. Os modelos abrem no editor de arrastar e soltar para personalização.

Etapa 3.1: Estilize o Banner

• editor de arrastar e soltar
• editor de html

Você pode arrastar e soltar blocos e linhas na área de criação para começar a montar sua mensagem. Para consultar os blocos do editor de Banner e links para detalhes de propriedades compartilhadas, veja Blocos do editor (Banners).

Importante

Se você está carregando imagens com Conteúdo conectado ou Liquid, certifique-se de que a URL da imagem comece com https://. Usar http:// pode causar falha no seu app.

Para personalizar as propriedades de fundo, as configurações de borda e outros detalhes da mensagem, selecione Estilos. Se quiser personalizar o estilo apenas de um bloco ou linha específico, selecione-o para fazer as alterações.

O editor de HTML é ideal para equipes que já mantêm seus próprios modelos HTML ou querem controle total sobre a marcação e o estilo. Você pode escrever ou colar HTML personalizado diretamente no editor. As tags de personalização em Liquid são totalmente compatíveis, então você pode referenciar atributos do usuário, atributos personalizados, itens de catálogo e muito mais.

Dica

Precisa de ajuda para criar o HTML do seu Banner? Selecione Perguntar ao Operator no editor de HTML e descreva o Banner que você quer. O BrazeAI Operator™ gera um HTML que você pode revisar e inserir no editor. Para saber mais, consulte Gerar mensagens.

Para rastrear cliques e dispensas no seu HTML personalizado, você precisa chamar explicitamente os métodos da ponte JavaScript. Para a referência completa, consulte Código personalizado e ponte JavaScript para Banners.

Nota

Para direcionar usuários em diferentes idiomas em uma única Campaign de Banner, consulte Mensagens multilíngues.

Etapa 3.2: Defina o comportamento ao clicar (opcional)

• editor de arrastar e soltar
• editor de html

Quando um usuário clica em um link no Banner, você pode levá-lo mais fundo no seu app ou redirecioná-lo para outra página da web. Além disso, você pode optar por registrar um atributo ou evento personalizado, que atualiza o perfil do usuário com dados personalizados quando ele clica no Banner. Para um rastreamento de cliques mais detalhado, atribua um identificador personalizado a cada elemento interativo usando o campo Identificador para relatórios no painel de propriedades.

Importante
O comportamento ao clicar pode ser substituído se um elemento específico do Banner (como um botão, link ou imagem) tiver seu próprio comportamento ao clicar. Por exemplo, considere os seguintes comportamentos ao clicar:

• Um Banner tem um comportamento ao clicar que redireciona para a página inicial de um website.
• Uma imagem no Banner tem um comportamento ao clicar que redireciona para a página de produto de um website.

Se um usuário clicar na imagem, ele será redirecionado para a página do produto. Mas, se clicar na área ao redor no Banner, será redirecionado para a página inicial.

No editor de HTML, o rastreamento de cliques não é automático. Você precisa chamar brazeBridge.logClick() dentro do seu HTML para cada elemento clicável que quiser rastrear. Por exemplo:

1

<a href="https://example.com" onclick="brazeBridge.logClick()">Shop now</a>

Para a referência completa da ponte JavaScript, consulte Código personalizado e ponte JavaScript para Banners.

Etapa 3.3: Configure o comportamento de dispensa (opcional)

Importante

A dispensa de Banners exige as seguintes versões mínimas do SDK. Versões mais antigas do SDK não renderizam Banners com a dispensa ativada.

  Swift: 14.1.0+     Web: 6.7.1+     Android: 42.1.0+  Flutter: 20.0.0+  React Native: 22.0.0+  

• editor de arrastar e soltar
• editor de html

1

<a href="#" onclick="brazeBridge.logClick(); brazeBridge.closeMessage();">&#x2715; Close</a>

Etapa 3.4: Adicione propriedades personalizadas (opcional)

Você pode adicionar propriedades personalizadas a um Banner para anexar metadados estruturados, como strings ou objetos JSON. Essas propriedades não afetam a forma como o Banner é exibido, mas podem ser acessadas pelo SDK da Braze para modificar o comportamento ou a aparência do seu app. Por exemplo, você pode:

• Enviar metadados para análise de dados de terceiros ou integrações.
• Usar metadados como um timestamp ou objeto JSON para disparar lógica condicional.
• Controlar o comportamento de um Banner com base em metadados incluídos, como ratio ou format.

As propriedades personalizadas funcionam da mesma forma no editor de arrastar e soltar e no editor de HTML. Para adicionar uma propriedade personalizada, selecione Configurações > Propriedades > Adicionar propriedade.

Para cada propriedade que quiser adicionar, preencha o seguinte:

Quando terminar, selecione Concluído.

Etapa 3.5: Personalize com Connected Content (opcional)

Importante

Connected Content for Banners está atualmente em acesso antecipado. Fale com o seu Braze account manager se tiver interesse em participar do acesso antecipado.

Como os Banners são renderizados em linha durante uma atualização de sessão, o Connected Content neste canal funciona de forma diferente dos outros canais:

• Somente solicitações GET são compatíveis.
• Todos os posicionamentos em uma única atualização (até 10) compartilham um orçamento de renderização de aproximadamente dois segundos. Se uma chamada for lenta, atingir o tempo limite ou o orçamento for excedido, o resultado do Connected Content para aquele posicionamento será tratado como nulo. Os Banners não fazem novas tentativas.

Para obter os melhores resultados:

• Mantenha seus endpoints rápidos e armazene as respostas em cache sempre que possível.
• Limite o número de URLs exclusivos de Connected Content entre os posicionamentos que são renderizados juntos.
• Evite encadear chamadas em que uma resposta do Connected Content determina o URL da próxima. Cada chamada adicional consome o orçamento compartilhado.
• Use instruções de proteção em Liquid ou o filtro default para lidar com resultados nulos e evitar Banners em branco.

Etapa 4: Crie o restante da sua Campaign ou Canvas

• campaign
• canvas

Defina a prioridade do Banner (opcional)

A prioridade do Banner determina a ordem em que os Banners são exibidos quando compartilham o mesmo posicionamento. Para definir a prioridade manualmente:

1. Selecione Definir prioridade exata.
2. Arraste e solte as Campaigns para ordená-las com a prioridade correta.
3. Selecione Aplicar classificação.

Dica

Se você tiver várias Campaigns de Banner usando o mesmo ID de posicionamento, recomendamos usar o classificador de prioridade de arrastar e soltar para definir a prioridade exata.

Configure a reelegibilidade (opcional)

Por padrão, os usuários que dispensam um Banner nunca voltam a ser elegíveis para aquela Campaign. Para permitir que usuários que dispensaram o Banner o vejam novamente, acesse a etapa Controles de entrega e selecione Permitir que os usuários se tornem novamente elegíveis para receber a campanha. Com essa opção ativada, defina um intervalo de espera em minutos, horas, dias ou semanas.

A contagem começa quando o usuário dispensa o Banner. Depois que o intervalo termina, o usuário volta a ser elegível automaticamente, sem precisar reiniciar a Campaign. A reelegibilidade é rastreada por usuário e por Campaign.

Escolha seu público

1. Em Públicos-alvo, escolha Segments ou filtros para refinar seu público. Você recebe automaticamente uma prévia da população aproximada do Segment. A associação exata ao Segment é calculada antes do envio da mensagem.

Importante

Sua mensagem será enviada apenas para usuários que já atendem às condições que você definiu na etapa Público-alvo. Depois disso, eles ainda precisam atender ao gatilho que você definir na etapa Programar Entrega. Pense no público-alvo como uma sala de espera — apenas as pessoas que já estão dentro podem avançar quando a próxima ação acontecer.

2. Em Atribuir conversões, acompanhe com que frequência os usuários realizam ações específicas depois de receber uma Campaign, definindo eventos de conversão com uma janela de até 30 dias para contar a ação como conversão.

Escolha os eventos de conversão

A Braze permite rastrear eventos de conversão, ou seja, com que frequência os usuários realizam ações específicas depois de receber uma Campaign. Você pode definir uma janela de até 30 dias durante a qual uma conversão é contada se o usuário realizar a ação especificada.

Se ainda não tiver feito isso, conclua as seções restantes do seu componente de Canvas. Para saber mais sobre como criar o restante do seu Canvas, incluindo testes multivariantes e Otimizar com BrazeAI^TM, consulte Crie seu Canvas.

Para controlar a reelegibilidade das etapas de Banner do Canvas, use as configurações de reentrada do Canvas. Para saber mais, consulte Reelegibilidade para Campaigns e Canvas.

Etapa 5: Teste sua mensagem (opcional)

Selecione Preview para visualizar seu Banner ou enviar uma mensagem de teste.

Lembre-se de que a prévia pode não ser idêntica à renderização final no dispositivo do usuário devido a diferenças de hardware.

Para enviar uma mensagem de teste, adicione um grupo de teste de conteúdo ou um ou mais usuários individuais como Test Recipients e selecione Send Test. Você poderá visualizar sua mensagem de teste no dispositivo por até 5 minutos. Em seguida, selecione Copy preview link para gerar e copiar um link compartilhável que mostra como o banner ficará para um usuário aleatório. O link ficará válido por sete dias antes de precisar ser regenerado.

Ao revisar seu Banner de teste, verifique o seguinte:

• A sua Campaign de Banner está atribuída a um posicionamento?
• As imagens e mídias aparecem e funcionam como esperado nos tipos de dispositivos e tamanhos de tela segmentados?
• Os links e botões direcionam o usuário para onde deveriam ir?
• O Liquid funciona conforme o esperado? Você definiu um valor de atributo padrão para o caso de o Liquid não retornar nenhuma informação?
• O texto está claro, conciso e correto?

Para saber mais, consulte Enviar mensagens de teste.

Etapa 6: Revise e implemente

Depois de terminar de criar sua Campaign ou Canvas, revise os detalhes, teste e envie quando estiver tudo pronto.