カスタムの HTML アプリ内メッセージ{#custom-html-messages}

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

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

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

カスタムHTMLメッセージは、JavaScript Bridgeのメソッドを使って、イベントのログを取ったり、カスタム属性を設定したり、メッセージを閉じたりすることができる！HTML アプリ内メッセージの使用方法と、必要に応じてカスタマイズする方法の詳細手順、および開始に役立つ HTML5 アプリ内メッセージのテンプレートのセットについては、当社の GitHub リポジトリ を参照してください。

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を開く。

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

HTTP または HTTPS のリンクをディープリンクとして Braze で処理するには、?abDeepLink=true を設定します。

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

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

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

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

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

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

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

SDK 要件

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

キャンペーンの作成{#instructions}

カスタムコードをアプリ内メッセージで作成する場合、カスタムタイプとしてプレビュー付き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メソッドは、ダッシュボードでプレビューしている間はユーザー・プロフィールを更新しない。

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

ボタンの追跡{#button-tracking-improvements}

カスタム・コードのアプリ内メッセージでパフォーマンスを追跡するには 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>

また、新しいカスタムボタンの名前 (キャンペーンあたり一意の名前を最大 100 個) も追跡できます。brazeBridge.logClick("blue button")、brazeBridge.logClick("viewed carousel page 3") などがあります。

制限事項

• キャンペーンあたり最大 100 個の一意のボタン ID を設定できます。
• ボタン ID はそれぞれ最大 255文字です。
• ボタン ID には、英字、数字、スペース、ダッシュ、およびアンダースコアのみを使用できます。

後方互換性のない変更{#backward-incompatible-changes}

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>