Skip to content

HTML アプリ内メッセージs

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

前提条件

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

HTMLメッセージについて

BrazeのJavaScriptインターフェイスを使えば、アプリ内のカスタムWebView内でBrazeを活用できる。の責任InAppMessageJavascriptInterfaceは次の通りである：

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

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

アプリの WebView から Braze 機能を使用するには、WebView に Braze JavaScript インターフェイスを追加します。インターフェイスが追加された後、ユーザーガイドで利用可能な同じAPIが利用可能となる。HTML形式のアプリ内メッセージは、カスタム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アプリ内メッセージでディープリンクや外部リンクを使用する場合、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!