カスタムHTMLアプリ内メッセージ

標準のアプリ内メッセージは様々な方法でカスタマイズできるが、HTML、CSS、JavaScriptを使ってデザイン・構築されたメッセージを使えば、キャンペーンのルック＆フィールをさらに自由にコントロールできる。簡単な構成で、あらゆるニーズに合ったカスタム機能とブランディングを実現できる。

HTMLアプリ内メッセージでは、以下のようにメッセージのルック＆フィールをより自由にコントロールできる：

• カスタムフォントとカスタムスタイル
• ビデオ
• 複数の画像
• オン・クリック行動
• インタラクティブ・コンポーネント
• カスタム・アニメーション

カスタムHTMLメッセージは、JavaScript Bridgeのメソッドを使って、イベントのログを取ったり、カスタム属性を設定したり、メッセージを閉じたりすることができる！GitHubのリポジトリには、HTMLアプリ内メッセージの使い方やカスタマイズ方法、HTML5アプリ内メッセージのテンプレートなどが詳しく説明されている。

JavaScriptブリッジ

Web、Android、iOS、およびSwift SDK用のHTMLアプリ内メッセージは、Braze SDKとインターフェースするためのJavaScript「ブリッジ」をサポートしており、ユーザーがリンクのある要素をクリックしたり、コンテンツに関与したりしたときに、Brazeのカスタムアクションをトリガーすることができる。これらのメソッドは、グローバル変数brazeBridge またはappboyBridge 。

例えば、カスタム属性とカスタムイベントを記録し、メッセージを閉じるには、HTMLアプリ内メッセージ内で以下のJavaScriptを使うことができる：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<button id="button">Set Favorite Color</button>
<script>
// Wait for the `brazeBridge` ready event, "ab.BridgeReady"
window.addEventListener("ab.BridgeReady", function(){
  // Event handler when the button is clicked
  document.querySelector("#button").onclick = function(){
    // Track Button 1 clicks for analytics
    // Note: This requires Android SDK v8.0.0, Web SDK v2.5.0, Swift SDK v5.4.0, and iOS SDK v3.23.0
    brazeBridge.logClick("0");
    // Set the user's custom attribute
    brazeBridge.getUser().setCustomUserAttribute("favorite color", "blue");
    // Track a custom event
    brazeBridge.logCustomEvent("completed survey");
    // Send the enqueued data to Braze
    brazeBridge.requestImmediateDataFlush();
    // Close this in-app message
    brazeBridge.closeMessage();
  };
}, false);
</script>

JavaScriptブリッジ・メソッド

BrazeのHTMLアプリ内メッセージでは、以下のJavaScriptメソッドがサポートされている：

リンクベースのアクション

カスタムJavaScriptに加えて、Braze SDKは、これらの便利なURLショートカットで分析データを送信することもできる。これらのクエリーパラメーターとURLスキームは、すべて大文字と小文字を区別することに注意されたい。

ボタンのクリックトラッキング（非推奨）

アプリ内メッセージ分析のためにボタンのクリックを記録するには、ディープリンク、リダイレクトURL、アンカー要素<a> のクエリパラメータとしてabButtonId を追加する。ボタン1」のクリックを記録するには?abButtonId=0 、「ボタン2」のクリックを記録するには?abButtonId=1 。

他のURLパラメータと同様に、最初のパラメータはクエスチョンマーク? で始め、それ以降のパラメータはアンパサンド& で区切る。

URLの例

• https://example.com/?abButtonId=0 - ボタン1クリック
• https://example.com/?abButtonId=1 - ボタン2をクリックする
• https://example.com/?utm_source=braze&abButtonId=0 - 他の既存のURLパラメータでボタン1クリック
• myApp://deep-link?page=home&abButtonId=1 - ボタン2クリックでモバイル・ディープリンク
• <a href="https://example.com/?abButtonId=1"> - ボタン2クリックでアンカー要素<a>

新しいウィンドウでリンクを開く（モバイルのみ）

アプリ外のリンクを新しいウィンドウで開くには、?abExternalOpen=true を設定する。リンク先を開く前にメッセージが消える。

ディープリンクの場合、BrazeはabExternalOpen の値に関係なくURLを開く。

ディープリンクとして開く（モバイルのみ）

BrazeにHTTPまたはHTTPSリンクをディープリンクとして扱わせるには、?abDeepLink=true.

このクエリ文字列パラメータがないか、false に設定されている場合、Brazeはホストアプリ内の内部ウェブブラウザでウェブリンクを開こうとする。

アプリ内メッセージを閉じる

アプリ内メッセージを閉じるには、brazeBridge.closeMessage() javascriptメソッドを使うことができる。

例えば、<a onclick="brazeBridge.closeMessage()" href="#">Close</a> 、アプリ内メッセージを閉じる。

プレビュー付きHTMLアップロード

カスタムHTMLアプリ内メッセージを作成する際、Brazeで直接インタラクティブコンテンツをプレビューできる。

エディターのメッセージ・プレビュー・パネルには、メッセージに含まれるJavaScriptをレンダリングするリアルなプレビューが表示される。プレビューパネルから、ページネーションをクリックしたり、フォームやアンケートを送信したり、JavaScriptアニメーションを見たりして、カスタムメッセージをプレビューし、やりとりすることができる！

SDK 要件

アプリ内メッセージのHTMLプレビューを使用するには、以下のBraze SDK最小バージョンにアップグレードする必要がある：

キャンペーンを作成する

カスタムコードをアプリ内メッセージで作成する場合、カスタムタイプとしてプレビュー付きHTMLアップロードを選択する。アプリ内メッセージ（ライブまたは下書き）でカスタムコードを作成したことがない場合、このオプションは自動的に適用され、選択する必要はない。

モバイルアプリのユーザーがこのメッセージを受け取るには、サポートされているSDKのバージョンにアップグレードする必要があることを覚えておいてほしい。新しいBraze SDKバージョンに依存するキャンペーンを開始する前に、モバイルアプリをアップグレードするようユーザーに促すことを推奨する。

資産ファイル

HTMLアップロードでカスタムコードのアプリ内メッセージを作成する場合、キャンペーンアセットをメディアライブラリにアップロードし、メッセージ内で参照することができる。

アップロード可能なファイルタイプは以下の通りである：

Brazeは、2つの理由からメディアライブラリにアセットをアップロードすることを推奨している：

1. メディアライブラリ経由でキャンペーンに追加したアセットにより、ユーザーがオフラインの状態やインターネット接続が悪い状態でもメッセージを表示することができる。
2. Brazeにアップロードされたアセットは、キャンペーンをまたいで再利用できる。

アセットファイルを追加する

キャンペーンに新規または既存のアセットを追加できる。

キャンペーンに新しいアセットを追加するには、ドラッグ＆ドロップセクションを使ってファイルをアップロードする。このセクションで追加されたアセットも、メディアライブラリに自動的に追加される。すでにメディアライブラリにアップロードしたアセットを追加するには、メディアライブラリから追加を選択する。

アセットが追加されると、このキャンペーンのアセットセクションに表示される。

アセットのファイル名がローカルのHTMLアセットと一致する場合、自動的に置き換えられる（例えば、cat.png がアップロードされ、<img src="cat.png" /> が存在する場合）。

それ以外の場合は、リストからアセットにカーソルを合わせ、 コピーを選択して、ファイルのURLをクリップボードにコピーする。次に、コピーしたアセットのURLを、リモートアセットを参照するときに通常行うようにHTMLに貼り付ける。

HTMLエディタ

HTMLに加えた変更は、入力と同時にプレビュー・パネルに自動的にレンダリングされる。HTMLで使用しているbrazeBridge JavaScriptメソッドは、ダッシュボードでプレビューしている間はユーザー・プロフィールを更新しない。

エディター設定では、テキストの折り返しの切り替え、フォントサイズの変更、カラーテーマの選択ができる。コード・エディターには、シンタックス・ハイライトのためのさまざまなカラー・テーマが用意されており、メッセージ・コンポーザーで潜在的なコード・エラーを直接発見したり、コードをよりよく整理したりするのに役立つ（スペースとタブのどちらを使うか、あなたがどちらの立場であれ）。

ボタン・トラッキング

カスタム・コードのアプリ内メッセージでパフォーマンスを追跡するには brazeBridge.logClick(button_id)JavaScriptメソッドを使う。これにより、brazeBridge.logClick("0") 、brazeBridge.logClick("1") 、brazeBridge.logClick() を使って、「ボタン1」、「ボタン2」、「ボディクリック」をそれぞれプログラムで追跡することができる。

インプレッションごとに複数のボタン・クリック・イベントをトラッキングできる。例えば、メッセージを閉じてボタン2のクリックを記録するには、以下のようにする：

1
<a href="#" onclick="brazeBridge.logClick('1');brazeBridge.closeMessage()">✖</a>

また、新しいカスタムボタンの名前を追跡することもできる。brazeBridge.logClick("blue button")、brazeBridge.logClick("viewed carousel page 3") などがあります。

制限事項

• 1つのキャンペーンにつき、最大100個のユニークなボタンIDを持つことができる。
• ボタンIDはそれぞれ255文字まで持つことができる。
• ボタンIDは、文字、数字、スペース、ダッシュ、アンダースコアのみを含むことができる。

後方互換性のない変更

1. この新しいメッセージ・タイプで最も顕著な互換性のない変更は、SDKの要件である。アプリSDKが最小SDKバージョン要件を満たしていないユーザーには、このメッセージは表示されない。
   

2. これまでモバイルアプリでサポートされていたbraze://close のディープリンクは廃止され、JavaScriptbrazeBridge.closeMessage() がサポートされるようになった。ウェブはディープリンクをサポートしていないので、これによってクロスプラットフォームのHTMLメッセージが可能になる。

3. ボタンIDに?abButtonId=0 を使用していた自動クリックトラッキングと、閉じるボタンの「ボディクリック」トラッキングは削除された。以下のコード例は、新しいクリック・トラッキングJavaScriptメソッドを使用するためにHTMLを変更する方法を示している：

   前	その後
   <a href="">Close Button</a>	<a href="#" onclick="brazeBridge.logClick();brazeBridge.closeMessage()">Close Button</a>
   <a href="">Close Button</a>	<a href="#" onclick="brazeBridge.logClick('0');brazeBridge.closeMessage()">Close Button</a>
   <a href="">Track button 1</a>	<a href="" onclick="brazeBridge.logClick('0')">Track button 1</a>
   <script> location.href = "" </script>	<script> window.addEventListener("ab.BridgeReady", function(){   brazeBridge.logClick("1");   brazeBridge.closeMessage(); }); </script>