WebView へのBraze JavaScript インタフェースの追加
Braze JavaScript インターフェイスをiOS アプリに追加する方法について説明します。これにより、カスタムWebViews でBraze を活用できます。インターフェイスを追加すると、カスタムWebView でHTML in-app messages のAPI を使用できるようになります。
インターフェースについて
Braze ScriptMessageHandler
は以下の原因となります。
- HTML in-app messages に概説されているように、Braze Javascript ブリッジをWebView にインジェクトします。
- 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>
New Stuff!