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

標準のアプリ内メッセージはさまざまな方法でカスタマイズできますが、HTML、CSS、JavaScriptを使用してデザイン・構築されたメッセージを使用することで、キャンペーンの外観と操作感をさらに細かくコントロールできます。シンプルな構成で、あらゆるニーズに合わせたカスタム機能やブランディングを実現できます。

このメッセージタイプは従来のエディターで利用できます。

仕組み

HTMLアプリ内メッセージでは、以下を含むメッセージの外観と操作感をより細かくコントロールできます。

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

カスタムHTMLメッセージでは、JavaScript Bridgeメソッドを使用して、イベントの記録、カスタム属性の設定、メッセージを閉じるなどの操作が可能です。HTMLアプリ内メッセージの使用方法やカスタマイズ方法の詳細な手順、およびHTML5アプリ内メッセージテンプレートのセットについては、GitHubリポジトリをご覧ください。

注

Web SDKでHTMLアプリ内メッセージを有効にするには、BrazeにallowUserSuppliedJavascript初期化オプションを指定する必要があります。例：braze.initialize('YOUR-API_KEY', {allowUserSuppliedJavascript: true})。これはセキュリティ上の理由によるもので、HTMLアプリ内メッセージはJavaScriptを実行できるため、サイト管理者が有効化する必要があります。

JavaScript bridge

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.

重要

Braze recommends that you use the global brazeBridge variable. The global appboyBridge variable is deprecated but will continue to function for existing users. If you are using appboyBridge, we suggest you migrate to brazeBridge.

appboyBridge was deprecated in the following SDK versions:

• Web: 3.3.0+
• Android: 14.0.0+
• iOS: 4.2.0+

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:

注

You cannot reference Liquid to insert customAttributes into JavaScript Bridge methods.

Button click tracking

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

注

Banners: Only brazeBridge.logClick() (without arguments) is supported. Button IDs and custom button tracking are supported for in-app messages only.

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').

ヒント

When using JavaScript methods inside an onclick attribute, wrap string values in single quotes to avoid conflicts with the double-quoted HTML attribute.

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スキームはすべて大文字と小文字が区別されることに注意してください。

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

警告

abButtonIDの使用は、プレビュー付きHTMLメッセージタイプではサポートされていません。詳細については、アップグレードガイドをご覧ください。

アプリ内メッセージ分析のボタンクリックを記録するには、任意のディープリンク、リダイレクト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>

注

アプリ内メッセージはボタン1とボタン2のクリックのみをサポートしています。これら2つのボタンIDのいずれも指定しないURLは、一般的な「ボディクリック」として記録されます。

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

アプリ外のリンクを新しいウィンドウで開くには、?abExternalOpen=trueを設定します。リンクを開く前にメッセージは閉じられます。

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

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

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

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

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

アプリ内メッセージを閉じるには、brazeBridge.closeMessage() JavaScriptメソッドを使用できます。

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

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

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

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

ヒント

ダッシュボードでプレビュー中は、HTMLで使用するbrazeBridge JavaScriptメソッドはユーザープロファイルを更新しません。

SDKの要件

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

警告

このメッセージタイプは特定の新しいSDKバージョンでのみ受信できるため、サポートされていないSDKバージョンのユーザーにはメッセージが表示されません。ユーザー群の大部分がリーチ可能になった後にこのメッセージタイプを採用するか、アプリバージョンが要件を満たすユーザーのみをターゲットにすることを検討してください。最新のアプリバージョンによるフィルタリングの詳細をご覧ください。

キャンペーンの作成

モバイルアプリのユーザーがカスタムコードのアプリ内メッセージを受信するには、サポートされているSDKバージョンにアップグレードする必要があります。新しいBraze SDKバージョンに依存するキャンペーンを開始する前に、ユーザーにモバイルアプリのアップグレードを促すことをお勧めします。

アセットファイル

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

以下のファイルタイプがアップロードに対応しています。

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

1. メディアライブラリ経由でキャンペーンに追加されたアセットにより、ユーザーがオフラインの場合やインターネット接続が不安定な場合でもメッセージを表示できます。
2. Brazeにアップロードされたアセットは、複数のキャンペーンで再利用できます。

アセットファイルの追加

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

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

アセットが追加されると、Assets for this campaignセクションに表示されます。

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

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

HTMLエディター

HTMLで行った変更は、入力に応じてプレビューパネルに自動的にレンダリングされます。HTMLで使用するbrazeBridge JavaScriptメソッドは、ダッシュボードでのプレビュー中はユーザープロファイルを更新しません。

ヒント

HTMLエディター内で Searchを選択すると、コード内を検索できます。

ボタントラッキング

brazeBridge.logClick(button_id) JavaScriptメソッドを使用して、カスタムコードのアプリ内メッセージ内のパフォーマンスをトラッキングできます。これにより、brazeBridge.logClick('0')、brazeBridge.logClick('1')、またはbrazeBridge.logClick()を使用して、それぞれ「ボタン1」、「ボタン2」、「ボディクリック」をプログラムでトラッキングできます。

注

このボタントラッキング方法は、以前の自動クリックトラッキング方法（?abButtonId=0など）に代わるもので、それらは削除されました。

後方互換性のない変更

1. この新しいメッセージタイプで最も注目すべき互換性のない変更は、SDKの要件です。アプリのSDKが最小SDKバージョン要件を満たしていないユーザーにはメッセージが表示されません。
2. 以前モバイルアプリでサポートされていたbraze://closeディープリンクは、JavaScript brazeBridge.closeMessage()に置き換えられ削除されました。これにより、Webがディープリンクをサポートしていないため、クロスプラットフォームのHTMLメッセージが可能になります。

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

   導入前	導入後
   <a href="braze://close">Close Button</a>	<a href="#" onclick="brazeBridge.logClick();brazeBridge.closeMessage()">Close Button</a>
   <a href="braze://close?abButtonId=0">Close Button</a>	<a href="#" onclick="brazeBridge.logClick('0');brazeBridge.closeMessage()">Close Button</a>
   <a href="app://deeplink?abButtonId=0">Track button 1</a>	<a href="app://deeplink" onclick="brazeBridge.logClick('0')">Track button 1</a>
   <script> location.href = "braze://close?abButtonId=1" </script>	<script> window.addEventListener("ab.BridgeReady", function(){   brazeBridge.logClick("1");   brazeBridge.closeMessage(); }); </script>