Skip to content

HTML アプリ内メッセージs

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

前提条件

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

HTMLについて

Braze JavaScript インターフェイスを使用すると、Brazeをアプリ内のカスタムWebView 内で活用できます。InAppMessageJavascriptInterface は、以下の原因となります。

  1. ユーザガイドに記載されているように、Braze JavaScript ブリッジをWebView に挿入します。HTML アプリ内メッセージs.
  2. WebViewから受信したブリッジメソッドをBraze Android SDKに渡す。

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

アプリの WebView から Braze 機能を使用するには、WebView に Braze JavaScript インターフェイスを追加します。インターフェイスが追加された後、 ユーザガイドで使用できる同じAPI が使用可能になります。HTML アプリ内メッセージs は、ユーザ定義の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")

YouTubeコンテンツの埋め込み

YouTube やその他の HTML5コンテンツは、HTML アプリ内メッセージで再生できます。これには、アプリ内メッセージが表示されるアクティビティでハードウェアアクセラレーションが有効になっている必要があります。詳細については、Android 開発者ガイドを参照してください。ハードウェアアクセラレーションは、Android API バージョン11以降でのみ利用できます。

以下は、HTML スニペットに YouTube 動画を埋め込んだ例です。

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>

ディープリンクの使用

Android HTML アプリ内メッセージs でディープリンクまたは外部リンクを使用する場合、do not はJavaScript でbrazeBridge.closeMessage() を呼び出します。SDKの内部ロジックは、リンクにリダイレクトすると、自動的にアプリ内メッセージを閉じます。brazeBridge.closeMessage() を呼び出すと、この処理が妨げられ、ユーザーがアプリに戻ったときにメッセージがレスポンシブでなくなることがあります。

以下は、コード スニペットのディープリンクの例です。

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>

前提条件

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

HTMLについて

Braze JavaScript インターフェイスを使用すると、Brazeをアプリ内のカスタムWebView 内で活用できます。インターフェイスのScriptMessageHandler は、次のことを行います。

  1. ユーザガイドに記載されているように、Braze JavaScript ブリッジをWebView に挿入します。HTML アプリ内メッセージs.
  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 は、既存のウェブコンテンツから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!