Mensagens HTML personalizadas no aplicativo

Embora nossas mensagens padrão no aplicativo 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 in-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 no clique
• 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 do GitHub que contém instruções detalhadas sobre como usar e personalizar mensagens HTML in-app para suas necessidades e um conjunto de modelos de mensagens HTML5 in-app para ajudá-lo a começar.

Ponte JavaScript

As mensagens HTML no aplicativo para SDKs da Web, Android, iOS e Swift suportam uma “ponte” JavaScript para fazer a interface com o SDK do Braze, permitindo que você acione ações personalizadas do Braze quando os usuários clicarem em elementos com links ou se envolverem com o seu conteúdo. Esses métodos existem com a variável global brazeBridge ou appboyBridge.

Por exemplo, para registrar um atributo personalizado e um evento personalizado e, em seguida, fechar a mensagem, você pode usar o seguinte JavaScript na sua mensagem HTML in-app:

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 this in-app message
    brazeBridge.closeMessage();
  };
}, false);
</script>

Métodos do JavaScript Bridge

Os seguintes métodos JavaScript são compatíveis com as mensagens in-app em HTML do Braze:

Ações baseadas em links

Além do JavaScript personalizado, os SDKs do Braze também podem enviar dados analíticos 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 in-app, é possível 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”.

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 - Deeplink 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 do seu aplicativo em uma nova janela, defina ?abExternalOpen=true. A mensagem será ignorada antes de abrir o link.

Para deep linking, o Braze abrirá seu URL independentemente do valor de abExternalOpen.

Abrir como link detalhado (somente para celular)

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

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

Fechar mensagem no aplicativo

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

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

Upload de HTML com visualização

Ao criar mensagens HTML personalizadas no aplicativo, você pode visualizar seu conteúdo interativo diretamente no Braze.

O painel de visualização da mensagem do editor mostra uma visualização realista que renderiza o JavaScript incluído em sua mensagem. Você pode visualizar 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!

Interagir com a visualização de HTML passando o dedo pelas páginas.](/docs/pt-br/assets/img/iam-beta-javascript-preview.gif?d5722d71befd68713d0297d7224dad88)

Requisitos do SDK

Para usar a visualização em HTML para mensagens no aplicativo, você deve atualizar para as seguintes versões mínimas do Braze SDK:

Criação de uma campanha

Os usuários do seu aplicativo móvel precisam atualizar para as versões do SDK compatíveis para receber uma mensagem in-app do Custom Code. Recomendamos que você incentive os usuários a atualizar seus aplicativos móveis antes de lançar campanhas que dependam de versões mais recentes do Braze SDK.

Arquivos de ativos

Ao criar mensagens in-app de 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 upload:

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

1. Os ativos adicionados a uma campanha por meio da biblioteca de mídia permitem que suas mensagens sejam exibidas mesmo quando o usuário estiver off-line ou com uma conexão de Internet ruim.
2. Os ativos carregados no 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 carregar um arquivo. Os ativos adicionados nessa seção também serão adicionados automaticamente à biblioteca de mídia. Para adicionar ativos que você já carregou na biblioteca de mídia, selecione Add from Media Library (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 de arquivo de um ativo corresponder ao de um ativo HTML local, ele será substituído automaticamente (por exemplo, cat.png é carregado 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 HTML

As alterações que você faz no HTML são renderizadas automaticamente no painel de visualização à medida que você digita. Qualquer método JavaScriptbrazeBridge que você usar no seu HTML não atualizará os perfis de usuário durante a visualização no painel.

Rastreamento de botões

Você pode acompanhar o desempenho em seu código personalizado na mensagem in-app usando o método brazeBridge.logClick(button_id) método JavaScript. Isso permite que você rastreie programaticamente o “Botão 1”, o “Botão 2” e os “Cliques no corpo” usando brazeBridge.logClick('0'), brazeBridge.logClick('1') ou brazeBridge.logClick(), respectivamente.

Você pode rastrear vários eventos de clique de botão por impressão. Por exemplo, para fechar uma mensagem e registrar um clique no Botão 2, você pode usar o seguinte:

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

Você também pode rastrear novos nomes de botões personalizados - até 100 nomes exclusivos por campanha. Por exemplo, brazeBridge.logClick('blue button') ou brazeBridge.logClick('viewed carousel page 3').

Limitações

• Você pode ter até 100 IDs de botão exclusivos por campanha.
• Os IDs de botão podem ter até 255 caracteres cada.
• Os IDs de botão só podem incluir letras, números, espaços, traços e sublinhados.

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 aplicativo 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 aplicativos móveis, foi removido em favor do JavaScript brazeBridge.closeMessage(). Isso permite mensagens HTML entre 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 de	Depois de
   Botão Fechar	Botão Fechar
   Botão Fechar	Botão Fechar
   Botão de trilha 1	Botão de trilha 1