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 Custom Code para ter maior controle sobre a aparência, o comportamento e a experiência da sua página. Os blocos de Custom Code 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 funcionará em landing pages. 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 à 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 — não é necessário aguardar um evento de prontidão separado, como as mensagens no app fazem 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, entre outros). 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 de brazeBridge feitas dentro dos retornos de chamada registerFormInput de um bloco de formulário personalizado, já que elas são executadas como parte do envio do formulário.

Se um visitante abre a landing page diretamente, sem uma Liquid tag de landing page, e nunca envia o formulário, a página é 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 de ponte, mas ambos estão obsoletos. Use window.brazeBridge.

Exemplo

Como os métodos são assíncronos, use um manipulador async 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 em blocos Custom Code 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 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) identificado pelo ID de rastreamento que você passar:

1

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

Nota

O rastreamento de cliques em landing pages é diferente do rastreamento em In-App Messages, que usa 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 de 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 alerta no console de desenvolvedor do navegador.

Conteúdo relacionado

• Criar blocos de formulário personalizadosConecte uma interface totalmente personalizada a um formulário de landing page.
• Criar landing pages