Skip to content

HTML アプリ内メッセージs

アプリにBraze JavaScriptインターフェイスを追加する方法を学習し、Braze APIを使用してカスタムWebViewでHTMLアプリ内メッセージを作成できるようにする。

前提条件

この機能を使用する前に、Android Braze SDKを統合する必要があります。

About HTML messages

With the Braze JavaScript interface, you can leverage Braze inside the custom WebViews within your app. The interface’s ScriptMessageHandler is responsible for:

  1. Injecting the Braze JavaScript bridge into your WebView, as outlined in User Guide: HTML in-app messages.
  2. Passing the bridge methods received from your WebView to the Braze Android SDK.

Adding the interface to a WebView

Using Braze functionality from a WebView in your app can be done by adding the Braze JavaScript interface to your WebView. After the interface has been added, the same API available for User Guide: HTML in-app messages will be available within your custom WebView.

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

Embedding YouTube content

YouTube and other HTML5 content can play in HTML in-app messages. This requires hardware acceleration to be enabled in the activity where the in-app message is being displayed; see the Android developer guide for more details. Hardware acceleration is only available on Android API versions 11 and later.

The following is an example of an embedded YouTube video in an 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">
        </iframe>
    </div>
</body>

前提条件

この機能を使用する前に、Swift Braze SDKを統合する必要があります。

About HTML messages

With the Braze JavaScript interface, you can leverage Braze inside the custom WebViews within your app. The interface’s ScriptMessageHandler is responsible for:

  1. Injecting the Braze JavaScript bridge into your WebView, as outlined in User Guide: HTML in-app messages.
  2. Passing the bridge methods received from your WebView to the Braze Swift SDK.

Adding the interface to a WebView

First, add the ScriptMessageHandler from WebViewBridge to your app.

1

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

Add the initialized scriptMessageHandler to a WkWebView’s userContentController.

1
2
3
4

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

Then create the WebView using your configuration.

1

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

When you’re finished, your code should be similar to the following:

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)

Example: Logging a custom event

In the following example, BrazeBridge logs a custom event from existing web content to the 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>
Github   GitHub でこのページを編集
「このページはどの程度役に立ちましたか?」
New Stuff!