JavaScript-Bridge für Landing-Pages

Landing-Pages unterstützen eine JavaScript-„Bridge“ zur Verbindung Ihres angepassten Codes (HTML, CSS und JavaScript) mit dem Braze SDK.

Greifen Sie auf die Bridge zu, indem Sie brazeBridge in einem Custom-Code-Block verwenden, um Events zu protokollieren, angepasste Attribute zu setzen, Nutzer:innen zu identifizieren und mehr, wenn Besucher:innen mit Ihrer Landing-Page interagieren.

Funktionsweise

Landing-Pages ermöglichen es Ihnen, angepasstes HTML, CSS und JavaScript in einem Custom-Code-Block hinzuzufügen, um mehr Kontrolle über das Aussehen, das Erscheinungsbild und das Verhalten Ihrer Seite zu erhalten. Custom-Code-Blöcke können die JavaScript-Bridge nutzen, um Events zu protokollieren, angepasste Attribute zu setzen, Nutzer:innen zu identifizieren und mehr:

• Angepasste Events und Käufe protokollieren
• Standard- und angepasste Nutzer:innenattribute setzen
• Klicks und Formularübermittlungen tracken
• Nutzer:innen identifizieren

Wenn Sie brazeBridge-Code aus In-App-Nachrichten oder Bannern wiederverwenden, sollte er auch auf Landing-Pages funktionieren. Methoden, die nicht auf Landing-Pages anwendbar sind, werden ignoriert und protokollieren stattdessen eine Warnung in der Browser-Konsole, anstatt einen Fehler zu verursachen. Weitere Details finden Sie unter Auf Landing-Pages nicht unterstützte Methoden.

Wichtig

Die Landing-Page-Bridge ist asynchron; jede Methode gibt ein Promise zurück. Das unterscheidet sich von der angepassten HTML-In-App-Nachrichten-Bridge, deren Methoden sofort zurückkehren. Wenn der nächste Schritt in Ihrem Skript davon abhängt, dass ein Bridge-Aufruf abgeschlossen ist – etwa eine Seitenweiterleitung, eine Formularübermittlung oder das Senden von Daten an Braze – verwenden Sie await oder .then() und gehen Sie nicht davon aus, dass der Aufruf synchron abgeschlossen wurde.

Verfügbarkeit der Bridge

Wenn Besucher:innen Ihre Landing-Page öffnen, ist brazeBridge bereits in Ihrem Custom-Code-JavaScript verfügbar. Rufen Sie Bridge-Methoden direkt auf Landing-Pages auf – Sie müssen nicht auf ein separates Ready-Event warten, wie es In-App-Nachrichten mit ab.BridgeReady verwenden.

Dass das Bridge-Objekt verfügbar ist, bedeutet nicht, dass das Braze SDK für diese:n Besucher:in initialisiert ist. Das SDK wird bei einem Landing-Page-Besuch in einem der folgenden Fälle initialisiert:

• Die:der Besucher:in öffnet die Seite über einen Landing-Page-Liquid-Tag, der über einen Braze-Kanal (E-Mail, SMS, Push usw.) gesendet wurde. Das SDK wird automatisch beim Laden der Seite initialisiert.
• Die:der Besucher:in übermittelt das Formular der Seite – zum Beispiel durch Klicken auf einen Absenden-Button, der Formulardaten sendet. Dies umfasst auch brazeBridge-Aufrufe, die innerhalb der registerFormInput-Callbacks eines angepassten Formularblocks ausgeführt werden, da diese als Teil der Formularübermittlung laufen.

Wenn Besucher:innen die Landing-Page direkt öffnen, ohne einen Landing-Page-Liquid-Tag, und das Formular nie übermitteln, ist die Seite für Braze anonym, und Bridge-Methodenaufrufe haben keine Wirkung.

Hinweis

window.lpBridge und window.appboyBridge verweisen auf dasselbe Bridge-Objekt, sind aber beide veraltet. Verwenden Sie window.brazeBridge.

Beispiel

Da die Methoden asynchron sind, verwenden Sie einen async-Handler und await für die Aufrufe, wenn die Reihenfolge oder der Abschluss wichtig ist:

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>

Unterstützte Methoden

Die folgenden brazeBridge-Methoden geben ein Promise zurück und werden in Custom-Code-Blöcken von Landing-Pages unterstützt. Verwenden Sie await oder .then(), wenn Sie Arbeitsschritte sequenzieren oder den Abschluss garantieren müssen.

Methoden der obersten Ebene

getUser()-Methoden

Hinweis

brazeBridge.getUser() gibt synchron ein einfaches Objekt zurück, sodass Sie getUser() nicht mit await aufrufen müssen; die Methoden des zurückgegebenen Objekts (wie getUser().setEmail(email)) geben Promises zurück.

getUser() gibt ein Objekt zurück, das die folgenden Nutzer:innenmethoden bereitstellt. Jede Methode gibt ein Promise zurück.

Klick-Tracking

Verwenden Sie brazeBridge.logClick(trackingId), um Klicks auf Ihrer Landing-Page zu tracken. Jeder Aufruf protokolliert ein Landing-Page-Klick-Event (lp_c), das mit der von Ihnen übergebenen Tracking-ID versehen ist:

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

Hinweis

Das Klick-Tracking auf Landing-Pages unterscheidet sich von In-App-Nachrichten, die logClick('0') und logClick('1') als konventionelle IDs für „Button 1“ und „Button 2“ verwenden. Landing-Pages haben keine entsprechenden speziellen Button-IDs. Jeder logClick(trackingId)-Aufruf protokolliert ein lp_c-Event, das durch die von Ihnen angegebene Tracking-ID identifiziert wird.

Auf Landing-Pages nicht unterstützte Methoden

Die folgenden Methoden funktionieren in In-App-Nachrichten und Bannern, werden aber auf Landing-Pages nicht unterstützt. Wenn Ihr Code eine davon auf einer Landing-Page aufruft, ignoriert Braze den Aufruf. Ihre Seite funktioniert weiterhin, aber Sie sehen möglicherweise eine Warnung in der Entwicklerkonsole des Browsers.

Verwandte Inhalte

• Angepasste Formularblöcke erstellen behandelt eine fortgeschrittenere Nutzung dieser Bridge: die Verbindung einer vollständig angepassten UI mit einem Landing-Page-Formular.
• Landing-Pages erstellen