Mensagens no app com HTML personalizado

Embora nossas mensagens no app padrão possam ser personalizadas de diversas formas, você pode obter ainda mais controle sobre a aparência das suas campanhas usando mensagens projetadas e criadas com HTML, CSS e JavaScript. Com uma composição simples, você pode desbloquear funcionalidades e identidade visual personalizadas para atender a qualquer necessidade.

Esse tipo de mensagem está disponível no editor tradicional.

Como funciona

As mensagens no app em HTML permitem maior controle sobre a aparência de uma mensagem, incluindo o seguinte:

• Fontes e estilos personalizados
• Vídeos
• Múltiplas imagens
• Comportamentos ao clicar
• Componentes interativos
• Animações personalizadas

As mensagens HTML personalizadas podem usar os métodos do JavaScript Bridge para registrar eventos, definir atributos personalizados, fechar a mensagem e muito mais! Confira nosso repositório no GitHub, que contém instruções detalhadas sobre como usar e personalizar mensagens no app em HTML para suas necessidades, além de um conjunto de modelos de mensagens no app em HTML5 para ajudar você a começar.

Nota

Para ativar mensagens no app em HTML por meio do SDK para Web, você deve fornecer a opção de inicialização allowUserSuppliedJavascript para a Braze: por exemplo, braze.initialize('YOUR-API_KEY', {allowUserSuppliedJavascript: true}). Isso é por motivos de segurança, já que mensagens no app em HTML podem executar JavaScript, então exigimos que um mantenedor do site as ative.

JavaScript bridge

Custom HTML in-app messages and Banners support a JavaScript “bridge” to interface with the Braze SDK, allowing you to trigger custom Braze actions when users click on elements with links or otherwise engage with your content. These methods exist with the global brazeBridge or appboyBridge variable.

Importante

Braze recommends that you use the global brazeBridge variable. The global appboyBridge variable is deprecated but will continue to function for existing users. If you are using appboyBridge, we suggest you migrate to brazeBridge.

appboyBridge was deprecated in the following SDK versions:

• Web: 3.3.0+
• Android: 14.0.0+
• iOS: 4.2.0+

For example, to log a custom attribute and custom event, then close the message, you could use the following JavaScript within your custom HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<button id="button">Set Favorite Color</button>
<script>
// Wait for the `brazeBridge` ready event, "ab.BridgeReady"
window.addEventListener("ab.BridgeReady", function(){
  // Event handler when the button is clicked
  document.querySelector("#button").onclick = function(){
    // Track Button 1 clicks for analytics
    // Note: This requires Android SDK v8.0.0, Web SDK v2.5.0, Swift SDK v5.4.0, and iOS SDK v3.23.0
    brazeBridge.logClick("0");
    // Set the user's custom attribute
    brazeBridge.getUser().setCustomUserAttribute("favorite color", "blue");
    // Track a custom event
    brazeBridge.logCustomEvent("completed survey");
    // Send the enqueued data to Braze
    brazeBridge.requestImmediateDataFlush();
    // Close the message
    brazeBridge.closeMessage();
  };
}, false);
</script>

JavaScript Bridge methods

The following JavaScript methods are supported within custom HTML for in-app messages and Banners:

Nota

You cannot reference Liquid to insert customAttributes into JavaScript Bridge methods.

Button click tracking

Use the brazeBridge.logClick(button_id) method to track clicks in your custom HTML.

Nota

Banners: Only brazeBridge.logClick() (without arguments) is supported. Button IDs and custom button tracking are supported for in-app messages only.

For in-app messages, you can programmatically track “Button 1”, “Button 2”, and “Body Clicks” using brazeBridge.logClick('0'), brazeBridge.logClick('1'), or brazeBridge.logClick(), respectively.

For in-app messages, you can track multiple button click events per impression. For example, to close a message and log a Button 2 click:

1
<a href="#" onclick="brazeBridge.logClick('1');brazeBridge.closeMessage()">✖</a>

You can also track new custom button names—up to 100 unique names per campaign. For example, brazeBridge.logClick('blue button') or brazeBridge.logClick('viewed carousel page 3').

Dica

When using JavaScript methods inside an onclick attribute, wrap string values in single quotes to avoid conflicts with the double-quoted HTML attribute.

Limitations (in-app messages only)

• You can have up to 100 unique button IDs per campaign.
• Button IDs can have up to 255 characters each.
• Button IDs can only include letters, numbers, spaces, dashes, and underscores.

Ações baseadas em links

Além do JavaScript personalizado, os SDKs da Braze também podem enviar dados de análise de dados com esses atalhos de URL convenientes. Observe que esses parâmetros de consulta e esquemas de URL diferenciam maiúsculas de minúsculas.

Rastreamento de clique em botão (descontinuado)

Aviso

O uso de abButtonID não é compatível com os tipos de mensagem HTML com pré-visualização. Para saber mais, consulte nosso guia de upgrade.

Para registrar cliques em botões para análise de dados de mensagens no app, você pode adicionar abButtonId como parâmetro de consulta a qualquer deep link, URL de redirecionamento ou elemento âncora <a>. Use ?abButtonId=0 para registrar um clique no “Botão 1” e ?abButtonId=1 para registrar um clique no “Botão 2”.

Assim como outros parâmetros de URL, o primeiro parâmetro deve começar com um ponto de interrogação ?, enquanto os parâmetros subsequentes devem ser separados por um “e” comercial &.

Exemplos de URLs

• https://example.com/?abButtonId=0 - Clique no Botão 1
• https://example.com/?abButtonId=1 - Clique no Botão 2
• https://example.com/?utm_source=braze&abButtonId=0 - Clique no Botão 1 com outros parâmetros de URL existentes
• myApp://deep-link?page=home&abButtonId=1 - Deep link mobile com clique no Botão 2
• <a href="https://example.com/?abButtonId=1"> - Elemento âncora <a> com clique no Botão 2

Nota

As mensagens no app suportam apenas cliques no Botão 1 e no Botão 2. URLs que não especificam um desses dois IDs de botão serão registradas como “cliques no corpo” genéricos.

Abrir link em nova janela (somente mobile)

Para abrir links fora do seu app em uma nova janela, defina ?abExternalOpen=true. A mensagem será dispensada antes de abrir o link.

Para deep linking, a Braze abrirá sua URL independentemente do valor de abExternalOpen.

Abrir como deep link (somente mobile)

Para que a Braze trate seu link HTTP ou HTTPS como um deep link, defina ?abDeepLink=true.

Quando esse parâmetro de string de consulta está ausente ou definido como false, a Braze tentará abrir o link da web em um navegador interno dentro do app host.

Fechar mensagem no app

Para fechar uma mensagem no app, você pode usar o método JavaScript brazeBridge.closeMessage().

Por exemplo, <a onclick="brazeBridge.closeMessage()" href="#">Fechar</a> fechará a mensagem no app.

Upload de HTML com pré-visualização

Ao criar mensagens no app com HTML personalizado, você pode pré-visualizar seu conteúdo interativo diretamente na Braze.

O painel de pré-visualização da mensagem no editor mostra uma pré-visualização realista que renderiza o JavaScript incluído na sua mensagem. Você pode pré-visualizar e interagir com suas mensagens personalizadas no painel de pré-visualização clicando na paginação, enviando formulários ou pesquisas, assistindo animações JavaScript e muito mais!

Dica

Quaisquer métodos JavaScript brazeBridge que você usar no seu HTML não atualizarão perfis de usuário durante a pré-visualização no dashboard.

Requisitos do SDK

Para usar a pré-visualização HTML para mensagens no app, você deve fazer upgrade para as seguintes versões mínimas do SDK da Braze:

Aviso

Como esse tipo de mensagem só pode ser recebido por determinadas versões mais recentes do SDK, usuários em versões não compatíveis do SDK não receberão a mensagem. Considere adotar esse tipo de mensagem depois que uma parcela significativa da sua base de usuários estiver acessível, ou direcione apenas os usuários cuja versão do app seja posterior aos requisitos. Saiba mais sobre filtrar pela versão mais recente do app.

Criando uma campanha

Os usuários do seu app mobile precisam fazer upgrade para as versões compatíveis do SDK para receber uma mensagem no app de Código personalizado. Recomendamos que você incentive os usuários a fazer upgrade dos seus apps mobile antes de lançar campanhas que dependam de versões mais recentes do SDK da Braze.

Arquivos de ativos

Ao criar mensagens no app com código personalizado e upload de HTML, você pode fazer upload de ativos da campanha para a Biblioteca de mídia para referenciá-los na sua mensagem.

Os seguintes tipos de arquivo são compatíveis para upload:

A Braze recomenda fazer upload de ativos para a Biblioteca de mídia por dois motivos:

1. Ativos adicionados a uma campanha pela Biblioteca de mídia permitem que suas mensagens sejam exibidas mesmo quando o usuário está offline ou com uma conexão de internet ruim.
2. Ativos enviados para a Braze podem ser reutilizados em diferentes campanhas.

Adicionando arquivos de ativos

Você pode adicionar ativos novos ou existentes à sua campanha.

Para adicionar novos ativos à sua campanha, use a seção de arrastar e soltar para fazer upload de um arquivo. Ativos adicionados nesta seção também serão automaticamente adicionados à Biblioteca de mídia. Para adicionar ativos que você já enviou para a Biblioteca de mídia, selecione Add from Media Library.

Depois que seus ativos forem adicionados, eles aparecerão na seção Assets for this campaign.

Se o nome de um arquivo de ativo corresponder ao de um ativo HTML local, ele será substituído automaticamente (por exemplo, cat.png é enviado e <img src="cat.png" /> existe).

Caso contrário, passe o mouse sobre um ativo da lista e selecione Copy para copiar a URL do arquivo para a área de transferência. Em seguida, cole a URL do ativo copiado no seu HTML como faria normalmente ao referenciar um ativo remoto.

Editor de HTML

As alterações que você fizer no HTML são renderizadas automaticamente no painel de pré-visualização conforme você digita. Quaisquer métodos JavaScript brazeBridge que você usar no seu HTML não atualizarão perfis de usuário durante a pré-visualização no dashboard.

Dica

Você pode selecionar Search dentro do editor de HTML para pesquisar no seu código!

Rastreamento de botões

Você pode rastrear o desempenho dentro da sua mensagem no app com código personalizado usando o método JavaScript brazeBridge.logClick(button_id). Isso permite que você rastreie programaticamente “Botão 1”, “Botão 2” e “Cliques no corpo” usando brazeBridge.logClick('0'), brazeBridge.logClick('1') ou brazeBridge.logClick(), respectivamente.

Nota

Esse método de rastreamento de botões substitui os métodos anteriores de rastreamento automático de cliques (como ?abButtonId=0), que foram removidos.

Alterações incompatíveis com versões anteriores

1. A alteração incompatível mais notável com esse novo tipo de mensagem são os requisitos do SDK. Usuários cujo SDK do app não atenda aos requisitos mínimos de versão do SDK não verão a mensagem.
2. O deep link braze://close, que era anteriormente compatível em apps mobile, foi removido em favor do JavaScript brazeBridge.closeMessage(). Isso permite mensagens HTML multiplataforma, já que a web não suporta deep links.

3. O rastreamento automático de cliques, que usava ?abButtonId=0 para IDs de botão, e o rastreamento de “clique no corpo” em botões de fechar foram removidos. Os exemplos de código a seguir mostram como alterar seu HTML para usar nossos novos métodos JavaScript de rastreamento de cliques:

   Antes	Depois
   <a href="braze://close">Close Button</a>	<a href="#" onclick="brazeBridge.logClick();brazeBridge.closeMessage()">Close Button</a>
   <a href="braze://close?abButtonId=0">Close Button</a>	<a href="#" onclick="brazeBridge.logClick('0');brazeBridge.closeMessage()">Close Button</a>
   <a href="app://deeplink?abButtonId=0">Track button 1</a>	<a href="app://deeplink" onclick="brazeBridge.logClick('0')">Track button 1</a>
   <script> location.href = "braze://close?abButtonId=1" </script>	<script> window.addEventListener("ab.BridgeReady", function(){   brazeBridge.logClick("1");   brazeBridge.closeMessage(); }); </script>