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

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

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

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

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

JavaScriptブリッジ

Custom HTML in-app messages and Banners support a JavaScript “bridge” to interface with the Braze SDK, allowing you to trigger custom Braze actions when users click on elements with links or otherwise engage with your content. These methods exist with the global brazeBridge or appboyBridge variable.

For example, to log a custom attribute and custom event, then close the message, you could use the following JavaScript within your custom HTML:

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 the message
    brazeBridge.closeMessage();
  };
}, false);
</script>

JavaScript Bridge methods

The following JavaScript methods are supported within custom HTML for in-app messages and Banners:

Button click tracking

Use the brazeBridge.logClick(button_id) method to track clicks in your custom HTML.

For in-app messages, you can programmatically track “Button 1”, “Button 2”, and “Body Clicks” using brazeBridge.logClick('0'), brazeBridge.logClick('1'), or brazeBridge.logClick(), respectively.

For in-app messages, you can track multiple button click events per impression. For example, to close a message and log a Button 2 click:

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

You can also track new custom button names—up to 100 unique names per campaign. For example, brazeBridge.logClick('blue button') or brazeBridge.logClick('viewed carousel page 3').

Limitations (in-app messages only)

• You can have up to 100 unique button IDs per campaign.
• Button IDs can have up to 255 characters each.
• Button IDs can only include letters, numbers, spaces, dashes, and underscores.

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

カスタム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}

モバイルアプリのユーザーは、カスタムコードのアプリ内メッセージを受信するために、サポートされている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メソッドを使う。完全な参照については、上記のJavaScript Bridgeメソッドを参照せよ。

後方互換性のない変更{#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>