Ponte JavaScript para landing pages

As landing pages suportam uma “ponte” JavaScript para conectar seu código personalizado (HTML, CSS e JavaScript) ao SDK da Braze.

Acesse a ponte usando brazeBridge em um bloco de código personalizado para registrar eventos, definir atributos personalizados, identificar usuários e muito mais quando um visitante interage com sua landing page.

Como funciona

As landing pages permitem que você adicione HTML, CSS e JavaScript personalizados a um bloco de código personalizado para ter maior controle sobre a aparência, o estilo e o comportamento da sua página. Os blocos de código personalizado podem usar a ponte JavaScript para registrar eventos, definir atributos personalizados, identificar usuários e muito mais:

• Registrar eventos personalizados e compras
• Definir atributos de usuário padrão e personalizados
• Rastrear cliques e envios de formulário
• Identificar usuários

Se você reutilizar código brazeBridge de mensagens no app ou Banners, ele ainda será executado nas landing pages. Os métodos que não se aplicam a landing pages são ignorados e registram um aviso no console do navegador em vez de causar um erro. Para mais detalhes, consulte Métodos não suportados em landing pages.

Importante

A ponte de landing page é assíncrona; cada método retorna uma Promise. Isso difere da ponte de mensagens no app em HTML personalizado, cujos métodos retornam imediatamente. Se a próxima etapa do seu script depende da conclusão de uma chamada da ponte — como redirecionar a página, enviar um formulário ou enviar dados para a Braze — use await ou .then() e não presuma que a chamada foi concluída de forma síncrona.

Disponibilidade da ponte

Quando um visitante abre sua landing page, brazeBridge já está disponível no JavaScript do seu código personalizado. Chame os métodos da ponte diretamente nas landing pages — você não precisa aguardar um evento de prontidão separado como as mensagens no app usam com ab.BridgeReady.

Ter o objeto da ponte disponível não significa que o SDK da Braze está inicializado para aquele visitante. O SDK é inicializado para uma visita à landing page em qualquer um destes casos:

• O visitante abre a página por meio de uma Liquid tag de landing page enviada por um canal da Braze (e-mail, SMS, push, etc.). O SDK é inicializado automaticamente quando a página carrega.
• O visitante envia o formulário da página — por exemplo, clicando em um botão Enviar que envia os dados do formulário. Isso inclui chamadas brazeBridge feitas dentro dos callbacks registerFormInput de um bloco de formulário personalizado, já que eles são executados como parte do envio do formulário.

Se um visitante abrir a landing page diretamente, sem uma Liquid tag de landing page, e nunca enviar o formulário, a página será anônima para a Braze, e as chamadas de métodos da ponte não terão efeito.

Nota

window.lpBridge e window.appboyBridge referenciam o mesmo objeto da ponte, mas ambos estão obsoletos. Use window.brazeBridge.

Exemplo

Como os métodos são assíncronos, use um handler assíncrono e await nas chamadas quando a ordem ou a conclusão forem importantes:

1
2
3
4
5
6
7
8
9
10
11
12
13
<button id="button">Set Favorite Color</button>
<script>
  document.querySelector("#button").onclick = async function () {
    // Track a click for analytics
    await brazeBridge.logClick("set-favorite-color");
    // Set the user's custom attribute
    await brazeBridge.getUser().setCustomUserAttribute("favorite color", "blue");
    // Track a custom event
    await brazeBridge.logCustomEvent("completed survey");
    // Send the enqueued data to Braze
    await brazeBridge.requestImmediateDataFlush();
  };
</script>

Métodos suportados

Os seguintes métodos brazeBridge retornam uma promise e são suportados nos blocos de código personalizado de landing pages. Use await ou .then() quando precisar sequenciar tarefas ou garantir a conclusão.

Métodos de nível superior

Métodos de getUser()

Nota

brazeBridge.getUser() retorna um objeto simples de forma síncrona, então você não precisa usar await em getUser(); os métodos no objeto retornado (como getUser().setEmail(email)) retornam Promises.

getUser() retorna um objeto que expõe os seguintes métodos de usuário. Cada método retorna uma Promise.

Rastreamento de cliques

Use brazeBridge.logClick(trackingId) para rastrear cliques na sua landing page. Cada chamada registra um evento de clique na landing page (lp_c) marcado com o ID de rastreamento que você fornecer:

1
<a href="#" onclick="brazeBridge.logClick('cta-hero')">Get started</a>

Nota

O rastreamento de cliques em landing pages difere das mensagens no app, que usam logClick('0') e logClick('1') como IDs convencionais para “Botão 1” e “Botão 2”. As landing pages não possuem IDs de botão especiais equivalentes. Cada chamada logClick(trackingId) registra um evento lp_c identificado pelo ID de rastreamento que você fornecer.

Métodos não suportados em landing pages

Os métodos a seguir funcionam em mensagens no app e Banners, mas não são suportados em landing pages. Se o seu código chamar um deles em uma landing page, a Braze ignora a chamada. Sua página continua funcionando, mas você pode ver um aviso no console de desenvolvedor do navegador.

Conteúdo relacionado

• Criar blocos de formulário personalizados aborda um uso mais avançado desta ponte: conectar uma interface totalmente personalizada a um formulário de landing page.
• Criar landing pages