Skip to content

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:

  1. Einspeisen der Braze JavaScript-Bridge in Ihre WebView, wie beschrieben in Nutzerhandbuch: In-App-Nachrichten im HTML-Format.
  2. Übergabe der von Ihrer WebView empfangenen Bridge-Methoden an das Braze Android SDK.

Hinzufügen der Schnittstelle zu einer WebView

Sie können die Braze-Funktionen von einer WebView in Ihrer App nutzen, indem Sie die Braze JavaScript-Schnittstelle zu Ihrer WebView hinzufügen. Nachdem die Schnittstelle hinzugefügt wurde, steht dieselbe API, die auch für Nutzerhandbuch: In-App-Nachrichten im HTML-Format verfügbar ist, in Ihrer angepassten WebView zur Verfügung.

1
2
3
4
5

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");

1
2
3
4
5

val javascriptString = context.assets.getAssetFileStringContents("braze-html-bridge.js")
myWebView.loadUrl("javascript:" + javascriptString!!)

val javascriptInterface = InAppMessageJavascriptInterface(context, inAppMessage)
myWebView.addJavascriptInterface(javascriptInterface, "brazeInternalBridge")

YouTube-Inhalte einbetten

YouTube und andere HTML5-Inhalte können in HTML-In-App-Nachrichten abgespielt werden. Dazu muss die Hardware-Beschleunigung in der Activity aktiviert sein, in der die In-App-Nachricht angezeigt wird. Weitere Informationen finden Sie im Android-Entwicklerhandbuch. Die Hardware-Beschleunigung ist nur für Android-API-Versionen ab Version 11 verfügbar.

Im Folgenden sehen Sie ein Beispiel für ein eingebettetes YouTube-Video in einem HTML-Snippet:

1
2
3
4
5
6
7
8
9

<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>

Bei der Verwendung von Deeplinks oder externen Links in Android-HTML-In-App-Nachrichten sollten Sie brazeBridge.closeMessage() in Ihrem JavaScript nicht aufrufen. Die interne Logik des SDK schließt die In-App-Nachricht automatisch, wenn sie zu einem Link weiterleitet. Der Aufruf von brazeBridge.closeMessage() beeinträchtigt diesen Prozess und kann dazu führen, dass die Nachricht nicht mehr reagiert, wenn Nutzer:innen zu Ihrer App zurückkehren.

Im Folgenden sehen Sie ein Beispiel für einen Deeplink in einem Code-Snippet:

1
2
3
4
5

<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 Swift Braze SDK integrieren.

Über HTML Nachrichten

Mit der Braze JavaScript-Schnittstelle können Sie Braze innerhalb der angepassten WebViews Ihrer App nutzen. Die Schnittstelle ScriptMessageHandler ist verantwortlich für:

  1. Einspeisen der Braze JavaScript-Bridge in Ihre WebView, wie beschrieben in Nutzerhandbuch: In-App-Nachrichten im HTML-Format.
  2. Ü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 die ScriptMessageHandler von WebViewBridge zu Ihrer App hinzu.

1

let scriptMessageHandler = Braze.WebViewBridge.ScriptMessageHandler(braze: braze)

Fügen Sie den initialisierten scriptMessageHandler zum userContentController eines WkWebViews hinzu.

1
2
3
4

configuration.userContentController.add(
  scriptMessageHandler,
  name: Braze.WebViewBridge.ScriptMessageHandler.name
)

Erstellen Sie dann die WebView mit Ihrer Konfiguration.

1

let webView = WKWebView(frame: .zero, configuration: configuration)

Wenn Sie fertig sind, sollte Ihr Code etwa so aussehen wie der folgende:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

// Create the script message handler using your initialized Braze instance.
let scriptMessageHandler = Braze.WebViewBridge.ScriptMessageHandler(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 bestehenden Webinhalten im Braze Swift SDK.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<!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>
New Stuff!