Puente JavaScript para páginas de destino

Las páginas de destino admiten un «puente» JavaScript para conectar tu código personalizado (HTML, CSS y JavaScript) con el SDK de Braze.

Accede al puente utilizando brazeBridge en un bloque de código personalizado para registrar eventos, establecer atributos personalizados, identificar usuarios y más cuando un visitante interactúa con tu página de destino.

Cómo funciona

Las páginas de destino te permiten añadir HTML, CSS y JavaScript personalizados a un bloque de código personalizado para tener un mayor control sobre el aspecto, la apariencia y el comportamiento de tu página. Los bloques de código personalizado pueden utilizar el puente JavaScript para registrar eventos, establecer atributos personalizados, identificar usuarios y mucho más:

• Registrar eventos personalizados y compras
• Establecer atributos de usuario estándar y personalizados
• Hacer seguimiento de clics y envíos de formularios
• Identificar usuarios

Si reutilizas código brazeBridge de mensajes dentro de la aplicación o banners, debería seguir funcionando en las páginas de destino. Los métodos que no se aplican a las páginas de destino se ignoran y registran una advertencia en la consola del navegador en lugar de provocar un error. Para más detalles, consulta Métodos no compatibles con las páginas de destino.

Importante

El puente de la página de destino es asíncrono; cada método devuelve una promesa (Promise). Esto difiere del puente de mensajes HTML personalizados dentro de la aplicación, cuyos métodos devuelven un resultado de forma inmediata. Si el siguiente paso de tu script depende de que una llamada al puente haya finalizado —como redirigir la página, enviar un formulario o enviar datos a Braze—, utiliza await o .then() y no asumas que la llamada se completó de forma síncrona.

Disponibilidad del puente

Cuando un visitante abre tu página de destino, brazeBridge ya está disponible en el JavaScript de tu Código personalizado. Llama a los métodos del puente directamente en las páginas de destino: no necesitas esperar un evento de preparación independiente como el que utilizan los mensajes dentro de la aplicación con ab.BridgeReady.

Que el objeto del puente esté disponible no significa que el SDK de Braze esté inicializado para ese visitante. El SDK se inicializa para una visita a la página de destino en cualquiera de estos casos:

• El visitante abre la página a través de una etiqueta de Liquid de página de destino enviada mediante un canal de Braze (correo electrónico, SMS, push, etc.). El SDK se inicializa automáticamente cuando se carga la página.
• El visitante envía el formulario de la página, por ejemplo, haciendo clic en un botón Enviar que transmite los datos del formulario. Esto incluye las llamadas a brazeBridge realizadas dentro de las devoluciones de llamada registerFormInput de un bloque de formulario personalizado, ya que estas se ejecutan como parte del envío del formulario.

Si un visitante abre la página de destino directamente, sin una etiqueta de Liquid de página de destino, y nunca envía el formulario, la página es anónima para Braze y las llamadas a los métodos del puente no tienen efecto.

Nota

window.lpBridge y window.appboyBridge hacen referencia al mismo objeto del puente, pero ambos están obsoletos. Utiliza window.brazeBridge.

Ejemplo

Dado que los métodos son asíncronos, utiliza un controlador async y await en las llamadas cuando el orden o la finalización sean 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 compatibles

Los siguientes métodos de brazeBridge devuelven una promesa y son compatibles en los bloques de Custom Code de las páginas de destino. Usa await o .then() cuando necesites secuenciar tareas o garantizar su finalización.

Métodos de nivel superior

Métodos de getUser()

Nota

brazeBridge.getUser() devuelve un objeto plano de forma síncrona, por lo que no necesitas usar await getUser(); los métodos del objeto devuelto (como getUser().setEmail(email)) sí devuelven Promises.

getUser() devuelve un objeto que expone los siguientes métodos de usuario. Cada método devuelve una Promise.

Seguimiento de clics

Utiliza brazeBridge.logClick(trackingId) para realizar el seguimiento de clics en tu página de destino. Cada llamada registra un evento de clic en la página de destino (lp_c) etiquetado con el ID de seguimiento que proporcionas:

1

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

Nota

El seguimiento de clics en páginas de destino difiere de los mensajes dentro de la aplicación, que utilizan logClick('0') y logClick('1') como ID convencionales para “Botón 1” y “Botón 2”. Las páginas de destino no tienen ID de botón especiales equivalentes. Cada llamada a logClick(trackingId) registra un evento lp_c identificado por el ID de seguimiento que proporcionas.

Métodos no compatibles en páginas de destino

Los siguientes métodos funcionan en mensajes dentro de la aplicación y Banners, pero no son compatibles en páginas de destino. Si tu código llama a uno en una página de destino, Braze ignora la llamada. Tu página sigue funcionando, pero puede que veas una advertencia en la consola para desarrolladores del navegador.

Contenido relacionado

• Crear bloques de formulario personalizadosConecta una interfaz de usuario totalmente personalizada a un formulario de página de destino.
• Crear páginas de destino