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

As mensagens HTML no app para SDKs da Web, Android, iOS e Swift suportam uma “ponte” JavaScript para fazer a interface com o SDK da Braze, permitindo que você dispare ações personalizadas da Braze quando os usuários clicarem em elementos com links ou se engajarem 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, é possível usar o seguinte JavaScript na mensagem no app em 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 this in-app message
    brazeBridge.closeMessage();
  };
}, false);
</script>

Métodos do JavaScript Bridge

Os seguintes métodos JavaScript são suportados nas mensagens no app Braze HTML:

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

Ao criar uma mensagem no app com código personalizado, escolha HTML Upload with Preview como o tipo personalizado. Se você não tiver criado anteriormente mensagens no app com código personalizado (ao vivo ou rascunhos), essa opção será aplicada automaticamente e você não precisará fazer uma seleção.

Lembre-se de que os usuários do aplicativo móvel precisam fazer upgrade para as versões do SDK compatíveis para receber essa mensagem. 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. 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 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 de arquivo de um ativo corresponder ao de um ativo HTML local, ele será substituído automaticamente (por exemplo, cat.png é feito upload 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.

Você pode configurar as Configurações do Editor para ativar a quebra de texto, alterar o tamanho da fonte ou escolher um tema de cores. O editor de código inclui diferentes temas de cores para realce de sintaxe, o que ajuda a identificar possíveis erros de código diretamente no criador de mensagens e a organizar melhor o código (usando espaços ou guias - seja qual for o seu lado da discussão).

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. Isso permite rastrear 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.

É possível rastrear vários eventos de cliques em botões por impressão. Por exemplo, para fechar uma mensagem e registrar um clique no Botão 2, use 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 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>