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 deve configurar os posicionamentos no seu app ou website. Você ainda pode criar o rascunho da sua campanha de Banner enquanto isso, mas não poderá lançar a campanha até que os posicionamentos estejam configurados.

Criar uma mensagem de Banner

Etapa 1: Criar posicionamentos no Braze

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

Dê um nome à sua colocação e atribua uma ID de colocação. Certifique-se de consultar outras equipes antes de atribuir uma ID, pois ela será usada durante todo o ciclo de vida do cartão e não deve ser alterada posteriormente. Para saber mais, consulte Placement IDs.

Etapa 2: Escolha onde criar sua mensagem

Não tem certeza se sua mensagem deve ser enviada usando uma campanha ou um Canvas? Campaigns são melhores para campanhas de mensagens únicas e direcionadas, enquanto Canvas são melhores para jornadas de usuários em várias etapas.

• campaign
• canvas

1. Acesse Messaging > Campaigns e selecione Create Campaign.
2. Selecione Banner.
3. Dê um nome claro e significativo à sua campanha.
4. Adicione equipes e tags conforme necessário. Tags facilitam a localização das suas campanhas e a criação de relatórios. Por exemplo, ao usar o Report Builder, você pode filtrar pelas tags relevantes.
5. Selecione o posicionamento que você criou anteriormente para associá-lo à sua campanha.
6. Adicione variantes conforme necessário. Você pode escolher um tipo de mensagem e layout diferentes para cada uma. Para saber mais sobre variantes, consulte Testes multivariantes e A/B.
7. Escolha uma data e hora de início para sua campanha de Banner. Por padrão, Banners duram indefinidamente. Você pode alterar isso selecionando End Time e especificando uma data e hora de término.

Dica

Se todas as mensagens da sua campanha serão semelhantes ou terão o mesmo conteúdo, componha sua mensagem antes de adicionar variantes adicionais. Depois, selecione Copy from Variant no menu suspenso Add Variant.

1. Crie seu Canvas usando o criador de Canvas.
2. Após configurar seu Canvas, adicione uma etapa de Mensagem no construtor de Canvas. Dê um nome claro e significativo à sua etapa.
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 se compartilharem o mesmo posicionamento.
6. Defina uma expiração para o Banner. Isso pode ser após uma duração de tempo depois que a etapa estiver disponível ou em uma data e hora específicas. A duração máxima de expiração é de 31 dias após a etapa ficar disponível para o usuário.

Etapa 3: Componha um Banner

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

• Editor de arrastar e soltar: Comece com um Banner em branco e construa 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 Braze Templates ou Your Templates. 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 do canvas para começar a construir sua mensagem. Para referência dos blocos do editor de Banner e links para detalhes de propriedades compartilhadas, consulte 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, configurações de borda e mais da sua mensagem, selecione Styles. Se você quiser personalizar o estilo apenas de um bloco ou linha específica, selecione-o para fazer alterações.

O editor de HTML é ideal para equipes que já mantêm seus próprios modelos HTML ou desejam controle total sobre a marcação e o estilo. Você pode escrever ou colar HTML personalizado diretamente no editor. Tags de personalização Liquid são totalmente suportadas, permitindo que você referencie atributos de usuário, atributos personalizados, itens de catálogo e mais.

Dica

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

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

Nota

Para direcionar usuários em diferentes idiomas dentro de uma única campanha de Banner, consulte Mensagens multi-idioma.

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 optar por navegar o usuário para uma parte mais profunda do seu app ou redirecioná-lo para outra página web. Além disso, você pode optar por registrar um atributo personalizado ou evento, que atualiza o perfil do usuário com dados personalizados quando ele clica no Banner. Para rastreamento de cliques mais granular, atribua um identificador personalizado a cada elemento interativo usando o campo Identifier for Reporting no painel de propriedades.

Importante
O comportamento ao clicar pode ser substituído se um elemento específico (como um botão, link ou imagem do Banner) tiver seu próprio comportamento ao clicar. Por exemplo, dados 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 de produto. No entanto, clicar na área ao redor do Banner redireciona para a página inicial.

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

1

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

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

Etapa 3.3: Configure o comportamento de dispensa (opcional)

Importante

Dispensas de Banner requerem 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 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ê poderia:

• 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 tanto no editor de arrastar e soltar quanto no editor de HTML. Para adicionar uma propriedade personalizada, selecione Settings > Properties > Add property.

Para cada propriedade que você deseja adicionar, preencha o seguinte:

Quando terminar, selecione Done.

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 inline durante uma atualização de sessão, o Connected Content neste canal funciona de forma diferente de outros canais:

• Apenas requisições GET são suportadas.
• 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, expirar ou o orçamento for excedido, o resultado do Connected Content para aquele posicionamento será tratado como nulo. Banners não fazem nova tentativa.

Para melhores resultados:

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

Etapa 4: Construa o restante da sua campanha ou Canvas

• campaign
• canvas

Defina a prioridade do Banner (opcional)

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

1. Selecione Set exact priority.
2. Arraste e solte as campanhas para ordená-las com a prioridade correta.
3. Selecione Apply Sort.

Dica

Se você tem múltiplas campanhas de Banner usando o mesmo ID de posicionamento, recomendamos usar o classificador de prioridade por arrastar e soltar para definir a prioridade exata.

Configure a reelegibilidade (opcional)

Por padrão, usuários que dispensam um Banner nunca são reelegíveis para essa campanha. Para permitir que usuários que dispensaram vejam o Banner novamente, acesse a etapa Delivery Controls e selecione Allow users to become re-eligible to receive campaign. Quando ativado, defina um período de espera em minutos, horas, dias ou semanas.

A contagem regressiva começa a partir do momento em que o usuário dispensa o Banner. Após o período expirar, o usuário se torna automaticamente reelegível, sem necessidade de reiniciar a campanha. A reelegibilidade é rastreada por usuário, por campanha.

Escolha seu público

1. Em Target Audiences, escolha segmentos ou filtros para refinar seu público. Você recebe automaticamente uma prévia da população aproximada do segmento. A associação exata ao segmento é 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 Assign Conversions, acompanhe a frequência com que os usuários realizam ações específicas após receber uma campanha, definindo eventos de conversão com uma janela de até 30 dias para contabilizar a ação como uma conversão.

Escolha eventos de conversão

A Braze permite que você rastreie eventos de conversão, ou seja, a frequência com que os usuários realizam ações específicas após receber uma campanha. Você tem a opção de permitir uma janela de até 30 dias durante a qual uma conversão é contabilizada se o usuário realizar a ação especificada.

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

Para controlar a reelegibilidade das etapas de Banner no 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 Pré-visualização para visualizar seu Banner ou enviar uma mensagem de teste.

Lembre-se de que a pré-visualização 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 Destinatários de Teste e selecione Enviar Teste. Você poderá visualizar sua mensagem de teste no dispositivo por até 5 minutos. Em seguida, selecione Copiar link de pré-visualização 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 implante

Depois de terminar de construir sua campanha ou Canvas, revise seus detalhes, teste-a e envie quando estiver pronto.