Skip to content

WebView へのBraze JavaScript インタフェースの追加

Braze JavaScript インターフェイスをiOS アプリに追加する方法について説明します。これにより、カスタムWebViews でBraze を活用できます。インターフェイスを追加すると、カスタムWebView でHTML in-app messages のAPI を使用できるようになります。

インターフェースについて

Braze ScriptMessageHandler は以下の原因となります。

  1. HTML in-app messages に概説されているように、Braze Javascript ブリッジをWebView にインジェクトします。
  2. WebView から受け取ったブリッジメソッドをBraze Swift SDK に渡します。

WebView へのインターフェースの追加

まず、WebViewBridgeからScriptMessageHandlerをアプリに追加します。

1

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

初期化されたscriptMessageHandler をWkWebView のuserContentController に追加します。

1
2
3
4

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

次に、設定を使用してWebView を作成します。

1

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

完了したら、コードは次のようになります。

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)

例: カスタムイベントをログに記録する

次の例では、BrazeBridge を使用して、既存のWeb コンテンツから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!