Pont JavaScript pour les pages de destination

Les pages de destination prennent en charge un « pont » JavaScript pour connecter votre code personnalisé (HTML, CSS et JavaScript) au SDK Braze.

Accédez au pont en utilisant brazeBridge dans un bloc de code personnalisé pour enregistrer des événements, définir des attributs personnalisés, identifier des utilisateurs et plus encore lorsqu’un visiteur interagit avec votre page de destination.

Fonctionnement

Les pages de destination vous permettent d’ajouter du HTML, du CSS et du JavaScript personnalisés dans un bloc Custom Code pour un contrôle accru sur l’apparence, le comportement et le rendu de votre page. Les blocs Custom Code peuvent utiliser le pont JavaScript pour enregistrer des événements, définir des attributs personnalisés, identifier des utilisateurs, et bien plus :

• Enregistrer des événements personnalisés et des achats
• Définir des attributs utilisateur standard et personnalisés
• Suivre les clics et les soumissions de formulaires
• Identifier les utilisateurs

Si vous réutilisez du code brazeBridge provenant de messages in-app ou de bannières, il devrait continuer à fonctionner sur les pages de destination. Les méthodes qui ne s’appliquent pas aux pages de destination sont ignorées et génèrent un avertissement dans la console du navigateur au lieu de provoquer une erreur. Pour plus de détails, consultez Méthodes non prises en charge sur les pages de destination.

Important

Le pont de la page de destination est asynchrone ; chaque méthode renvoie une Promise. Cela diffère du pont JavaScript pour les messages in-app en HTML personnalisé, dont les méthodes renvoient un résultat immédiatement. Si l’étape suivante de votre script dépend de l’achèvement d’un appel au pont — comme rediriger la page, soumettre un formulaire ou envoyer des données à Braze — utilisez await ou .then() et ne supposez pas que l’appel s’est terminé de manière synchrone.

Disponibilité du pont

Lorsqu’un visiteur ouvre votre page de destination, brazeBridge est déjà disponible dans votre JavaScript de Code personnalisé. Appelez les méthodes du pont directement dans les pages de destination : vous n’avez pas besoin d’attendre un événement d’initialisation distinct comme celui que les messages in-app utilisent avec ab.BridgeReady.

Le fait que l’objet pont soit disponible ne signifie pas que le SDK Braze est initialisé pour ce visiteur. Le SDK s’initialise lors d’une visite de page de destination dans l’un de ces cas :

• Le visiteur ouvre la page via une étiquette Liquid de page de destination envoyée par un canal Braze (e-mail, SMS, notification push, etc.). Le SDK s’initialise automatiquement au chargement de la page.
• Le visiteur soumet le formulaire de la page, par exemple en cliquant sur un bouton Soumettre qui envoie les données du formulaire. Cela inclut les appels à brazeBridge effectués dans les rappels registerFormInput d’un bloc de formulaire personnalisé, puisque ceux-ci s’exécutent dans le cadre de la soumission du formulaire.

Si un visiteur ouvre la page de destination directement, sans étiquette Liquid de page de destination, et ne soumet jamais le formulaire, la page est anonyme pour Braze et les appels aux méthodes du pont n’ont aucun effet.

Remarque

window.lpBridge et window.appboyBridge font référence au même objet pont, mais les deux sont obsolètes. Utilisez window.brazeBridge.

Exemple

Étant donné que les méthodes sont asynchrones, utilisez un gestionnaire async et await pour les appels lorsque l’ordre ou l’achèvement est important :

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éthodes prises en charge

Les méthodes brazeBridge suivantes renvoient une promesse et sont prises en charge dans les blocs Custom Code des pages de destination. Utilisez await ou .then() lorsque vous devez séquencer des opérations ou garantir leur achèvement.

Méthodes de niveau supérieur

Méthodes getUser()

Remarque

brazeBridge.getUser() renvoie un objet simple de manière synchrone, il n’est donc pas nécessaire d’utiliser await getUser() ; les méthodes de l’objet renvoyé (telles que getUser().setEmail(email)) renvoient des Promises.

getUser() renvoie un objet exposant les méthodes utilisateur suivantes. Chaque méthode renvoie une Promise.

Suivi des clics

Utilisez brazeBridge.logClick(trackingId) pour suivre les clics sur votre page de destination. Chaque appel enregistre un événement de clic sur la page de destination (lp_c) associé à l’identifiant de suivi que vous transmettez :

1

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

Remarque

Le suivi des clics sur les pages de destination diffère de celui des messages in-app, qui utilisent logClick('0') et logClick('1') comme identifiants conventionnels pour « Bouton 1 » et « Bouton 2 ». Les pages de destination n’ont pas d’identifiants de boutons spéciaux équivalents. Chaque appel à logClick(trackingId) enregistre un événement lp_c indexé par l’identifiant de suivi que vous fournissez.

Méthodes non prises en charge sur les pages de destination

Les méthodes suivantes fonctionnent dans les messages in-app et les bannières, mais ne sont pas prises en charge sur les pages de destination. Si votre code appelle l’une d’entre elles sur une page de destination, Braze ignore l’appel. Votre page continue de fonctionner, mais vous pouvez voir un avertissement dans la console de développement du navigateur.

Contenu associé

• Créer des blocs de formulaire personnalisésConnecter une interface utilisateur entièrement personnalisée à un formulaire de page de destination.
• Créer des pages de destination