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.

So funktioniert es

Landing-Pages ermöglichen es Ihnen, angepasstes HTML, CSS und JavaScript zu einem Custom Code-Block hinzuzufügen, um mehr Kontrolle über 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 festzulegen, Nutzer:innen zu identifizieren und mehr:

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

Wenn Sie brazeBridge-Code aus In-App-Nachrichten oder Bannern wiederverwenden, sollte dieser 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 auszulösen. Weitere Informationen 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-Nachricht-Bridge, deren Methoden sofort zurückgeben. Wenn der nächste Schritt in Ihrem Skript davon abhängt, dass ein Bridge-Aufruf abgeschlossen ist – etwa eine Seitenweiterleitung, ein Formularversand 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 ein Besucher Ihre Landing-Page öffnet, ist brazeBridge in Ihrem Custom Code-JavaScript bereits 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 diesen Besucher initialisiert ist. Das SDK wird bei einem Landing-Page-Besuch in einem der folgenden Fälle initialisiert:

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

Wenn ein Besucher die Landing-Page direkt öffnet, ohne ein Landing-Page-Liquid-Tag, und das Formular nie absendet, 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 jedoch 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öchten.

Top-Level-Methoden

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 jedoch Promises zurück.

getUser() gibt ein Objekt zurück, das die folgenden Nutzer:innen-Methoden 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 getaggt wird:

1

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

Hinweis

Das Klick-Tracking für 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.

Methoden, die auf Landing-Pages nicht unterstützt werden

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

Verwandte Inhalte

• Angepasste Formularblöcke erstellenVerbinden Sie eine vollständig angepasste UI mit einem Landing-Page-Formular.
• Landing-Pages erstellen