HTML In-App-Nachrichten
Erfahren Sie, wie Sie die Braze JavaScript-Schnittstelle zu Ihrer App hinzufügen, damit Sie die Braze API nutzen können, um HTML In-App-Nachrichten in Ihren angepassten WebViews zu erstellen.
Voraussetzungen
Bevor Sie dieses Feature nutzen können, müssen Sie das Android Braze SDK integrieren.
Über HTML-Nachrichten
Mit der Braze JavaScript-Schnittstelle können Sie Braze innerhalb der angepassten WebViews Ihrer App nutzen. Die InAppMessageJavascriptInterface ist verantwortlich für:
- Einspeisen der Braze JavaScript-Bridge in Ihre WebView, wie beschrieben in Nutzerhandbuch: HTML In-App-Nachrichten.
- Übergabe der von Ihrer WebView empfangenen Bridge-Methoden an das Braze Android SDK.
Hinzufügen der Schnittstelle zu einer WebView
Die Nutzung von Braze-Funktionen aus einer WebView in Ihrer App kann durch das Hinzufügen der Braze JavaScript-Schnittstelle zu Ihrer WebView erfolgen. Nachdem die Schnittstelle hinzugefügt wurde, steht dieselbe API, die für Nutzerhandbuch: HTML In-App-Nachrichten verfügbar ist, auch in Ihrer angepassten WebView zur Verfügung.
String javascriptString = BrazeFileUtils.getAssetFileStringContents(context.getAssets(), "braze-html-bridge.js");
myWebView.loadUrl("javascript:" + javascriptString);
final InAppMessageJavascriptInterface javascriptInterface = new InAppMessageJavascriptInterface(context, inAppMessage);
myWebView.addJavascriptInterface(javascriptInterface, "brazeInternalBridge");
val javascriptString = context.assets.getAssetFileStringContents("braze-html-bridge.js")
myWebView.loadUrl("javascript:" + javascriptString!!)
val javascriptInterface = InAppMessageJavascriptInterface(context, inAppMessage)
myWebView.addJavascriptInterface(javascriptInterface, "brazeInternalBridge")
Einbetten von YouTube-Inhalten
YouTube- und andere HTML5-Inhalte können in HTML-In-App-Nachrichten abgespielt werden. Dies erfordert, dass die Hardwarebeschleunigung in der Activity aktiviert ist, in der die In-App-Nachricht angezeigt wird. Weitere Informationen finden Sie im Android-Entwicklerhandbuch. Die Hardwarebeschleunigung ist nur ab Android-API-Version 11 verfügbar.
Das Folgende ist ein Beispiel für ein eingebettetes YouTube-Video in einem HTML-Snippet:
<body>
<div class="box">
<div class="relativeTopRight">
<a href="appboy://close">X</a>
</div>
<iframe width="60%" height="50%" src="https://www.youtube.com/embed/_x45EB3BWqI" title="YouTube video player">
</iframe>
</div>
</body>
Deeplinks verwenden
Wenn Sie Deeplinks oder externe Links in HTML In-App-Nachrichten unter Android verwenden, rufen Sie brazeBridge.closeMessage() nicht in Ihrem JavaScript auf. Die interne Logik des SDK schließt die In-App-Nachricht automatisch, wenn sie zu einem Link weiterleitet. Der Aufruf von brazeBridge.closeMessage() stört diesen Prozess und kann dazu führen, dass die Nachricht nicht mehr reagiert, wenn Nutzer:innen zu Ihrer App zurückkehren.
Das folgende Beispiel zeigt einen Deeplink in einem Code-Snippet:
<script>
document.querySelectorAll('[data-button-id]').forEach(function (node)
Unknown macro: { node.addEventListener('click', function () { brazeBridge.logClick(node.dataset.buttonId); brazeBridge.closeMessage(); }); }
);
</script>
Voraussetzungen
Bevor Sie dieses Feature nutzen können, müssen Sie das Braze Swift SDK integrieren.
Über HTML-Nachrichten
Mit der Braze JavaScript-Schnittstelle können Sie Braze innerhalb der angepassten WebViews Ihrer App nutzen. Der ScriptMessageHandler der Schnittstelle ist verantwortlich für:
- Einspeisen der Braze JavaScript-Bridge in Ihre WebView, wie beschrieben in Nutzerhandbuch: HTML In-App-Nachrichten.
- Übergabe der von Ihrer WebView empfangenen Bridge-Methoden an das Braze Swift SDK.
Hinzufügen der Schnittstelle zu einer WebView
Fügen Sie zunächst den ScriptMessageHandler aus WebViewBridge zu Ihrer App hinzu.
let scriptMessageHandler = Braze.WebViewBridge.ScriptMessageHandler(
channel: .inAppMessage,
braze: braze
)
Fügen Sie den initialisierten scriptMessageHandler zum userContentController einer WkWebView hinzu.
configuration.userContentController.add(
scriptMessageHandler,
name: Braze.WebViewBridge.ScriptMessageHandler.name
)
Erstellen Sie dann die WebView mit Ihrer Konfiguration.
let webView = WKWebView(frame: .zero, configuration: configuration)
Wenn Sie fertig sind, sollte Ihr Code in etwa wie folgt aussehen:
// Create the script message handler using your initialized Braze instance.
let scriptMessageHandler = Braze.WebViewBridge.ScriptMessageHandler(
channel: .inAppMessage,
braze: braze
)
// Create a web view configuration and setup the script message handler.
let configuration = WKWebViewConfiguration()
configuration.userContentController.addUserScript(
Braze.WebViewBridge.ScriptMessageHandler.script
)
configuration.userContentController.add(
scriptMessageHandler,
name: Braze.WebViewBridge.ScriptMessageHandler.name
)
// Create the webview using the configuration
let webView = WKWebView(frame: .zero, configuration: configuration)
Beispiel: Protokollieren eines angepassten Events
Im folgenden Beispiel protokolliert BrazeBridge ein angepasstes Event aus vorhandenem Web-Content an das Braze Swift SDK.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Logging data via BrazeBridge Example</title>
<script>
function logData(data) {
window.brazeBridge.logCustomEvent(data);
}
</script>
</head>
<body>
<input
type="button"
value="Click to log a custom Event 'completed_level'"
onclick="logData('completed_level')"
/>
</body>
</html>