Mensagens no app em HTML personalizado

Embora nossas mensagens no app padrão possam ser personalizadas de várias maneiras, você pode ter um controle ainda maior sobre a aparência de suas campanhas usando mensagens projetadas e criadas com HTML, CSS e JavaScript. Com algumas composições simples, você pode desbloquear a funcionalidade e a marca personalizadas para atender a qualquer uma de suas necessidades.

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
• Várias 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, e um conjunto de modelos de mensagens no app em HTML5 para ajudá-lo a começar.

Ponte JavaScript

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.

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:

Button click tracking

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

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').

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álises com esses convenientes atalhos de URL. Observe que esses parâmetros de consulta e esquemas de URL diferenciam maiúsculas de minúsculas.

Rastreamento de cliques em botões (obsoleto)

Para registrar cliques em botões para análise de mensagens no app, é possível adicionar abButtonId como parâmetro de consulta a qualquer deep linking, 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”.

Como ocorre com 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” &.

Exemplo de URLs

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

Abrir link em uma nova janela (somente para celular)

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

Para deep links, a Braze abrirá seu URL independentemente do valor de abExternalOpen.

Abrir como link detalhado (somente para celular)

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

Quando esse parâmetro de string de consulta estiver 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="#">Close</a> fechará a mensagem no app.

Upload de HTML com prévia

Ao criar mensagens no app em HTML personalizado, você pode fazer uma prévia do seu conteúdo interativo diretamente no Braze.

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

Requisitos do SDK

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

Criação de uma campanha

Seus usuários do app móvel precisam fazer upgrade para as versões de SDK suportadas para receber uma mensagem no app Custom Code. Recomendamos que você incentive os usuários a fazer upgrade de seus apps móveis 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 com upload de HTML, você pode fazer upload de ativos de campanha para a biblioteca de mídia para fazer referência na sua mensagem.

Os seguintes tipos de arquivos são suportados para fazer upload:

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

1. Ativos adicionados a uma campanha via a biblioteca de mídia permitem que suas mensagens sejam exibidas mesmo enquanto o usuário está offline ou tem uma conexão de internet ruim.
2. Os ativos feitos upload na Braze podem ser reutilizados em todas as campanhas.

Adição de 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. Os ativos adicionados nesta seção também serão adicionados automaticamente à biblioteca de mídia. Para adicionar ativos que já foram feitos upload na biblioteca de mídia, selecione Adicionar da biblioteca de mídia.

Depois que seus ativos forem adicionados, eles aparecerão na seção Assets for this campaign (Ativos para esta campanha ).

Se o nome do arquivo de um ativo corresponder ao de um ativo HTML local, ele é 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 o URL do arquivo para a área de transferência. Em seguida, cole o URL do ativo copiado em seu HTML como faria normalmente ao fazer referência a um ativo remoto.

editor de HTML

As alterações feitas no HTML são renderizadas automaticamente no painel de prévia à medida que você digita. Todos os métodos JavaScript dobrazeBridge que você usar no HTML não atualizarão os perfis de usuário durante a prévia no dashboard.

Rastreamento de botões

Você pode rastrear a performance em sua mensagem no app com código personalizado usando o método brazeBridge.logClick(button_id) JavaScript. Para a referência completa, veja Métodos da Ponte JavaScript acima.

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

1. A mudança incompatível mais notável com esse novo tipo de mensagem são os requisitos do SDK. Os usuários cujo app SDK não atende aos requisitos mínimos de versão do SDK não receberão a mensagem.
2. O deeplink braze://close, que era suportado anteriormente em apps móveis, foi removido em favor do JavaScript brazeBridge.closeMessage(). Isso permite o envio de mensagens HTML para várias plataformas, já que a Web não oferece suporte a links profundos.

3. O rastreamento automático de cliques, que usava ?abButtonId=0 para IDs de botões, e o rastreamento de “cliques no corpo” em botões de fechamento 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	Após
   <a href="">Close Button</a>	<a href="#" onclick="brazeBridge.logClick();brazeBridge.closeMessage()">Close Button</a>
   <a href="">Close Button</a>	<a href="#" onclick="brazeBridge.logClick('0');brazeBridge.closeMessage()">Close Button</a>
   <a href="">Track button 1</a>	<a href="" onclick="brazeBridge.logClick('0')">Track button 1</a>
   <script> location.href = "" </script>	<script> window.addEventListener("ab.BridgeReady", function(){   brazeBridge.logClick("1");   brazeBridge.closeMessage(); }); </script>