Skip to content

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

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

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

仕組み

HTMLアプリ内メッセージを使用すると、メッセージの外観をより細かくコントロールできます。以下のようなカスタマイズが可能です。

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

カスタムHTMLメッセージでは、JavaScript Bridgeメソッドを使用して、イベントの記録、カスタム属性の設定、メッセージの終了などを行うことができます。HTMLアプリ内メッセージの使用方法やカスタマイズ方法の詳細な手順、およびすぐに使い始められるHTML5アプリ内メッセージテンプレートのセットについては、GitHubリポジトリをご覧ください。

レンダリング環境

カスタムHTMLアプリ内メッセージは、Webではブラウザ内で直接レンダリングされますが、iOSおよびAndroidではプラットフォームのWebView内でレンダリングされます。各環境は異なるレンダリングエンジンを使用するため、同じHTMLとCSSでも、特にカラムレイアウト、フォント、スペーシングにおいて、プラットフォーム間でわずかな表示の違いが生じる場合があります。

クロスプラットフォームの差異を最小限に抑えるには、以下を行ってください。

  • ブラウザのデフォルトに依存するのではなく、明示的なCSS値を使用する
  • ビューポートメタタグを含める（例：<meta name="viewport" content="width=device-width, initial-scale=1">）
  • テスト送信を使用して実際のデバイスでテストする

文字エンコーディング

カスタムHTMLアプリ内メッセージにキリル文字、アクセント付き文字、その他の非ASCIIテキストなどの特殊文字を含める場合は、正しく表示されるようにHTMLにUTF-8エンコーディングを指定してください。UTF-8エンコーディングを指定しないと、Webビューでレンダリングされる際にこれらの文字が正しく表示されなかったり、欠落したりすることがあります。

UTF-8エンコーディングを有効にするには、HTMLの<head>セクション内に以下のmetaタグを追加します。

1

<meta charset="UTF-8">

これにより、アプリ内メッセージを表示するWebビューで想定される文字セットであるUTF-8エンコーディングが強制されます。

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.

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:

メソッド名 説明
brazeBridge.closeMessage() 現在のメッセージを閉じます。動作はチャネルによって異なります。

アプリ内メッセージ: UIのみを閉じます。却下は記録されず、サーバー側の抑制も行われません。

バナー: logBannerDismissal の呼び出しと同等です。バナーの却下を記録し、UIからバナーを削除し、そのユーザーに対してバナーを抑制します。また、アクティブな subscribeToBannersUpdates サブスクライバーを再トリガーします。メッセージがすでに終了処理中であるか、ディープリンクの処理によって自動的に終了する場合は、このメソッドを呼び出さないでください。
window.addEventListener("ab.BridgeReady", function(){...}, false) brazeBridgeの読み込みが完了したときのコールバックメソッドです。すべてのJavaScriptコードは、このコールバック関数内で実行する必要があります。
brazeBridge.requestImmediateDataFlush() キューに入っているデータをBrazeサーバーにフラッシュします。JSドキュメント
brazeBridge.logClick(button_id_string) 指定されたボタンIDのボタンクリックを記録します。button_id_stringが空白の場合、代わりにボディクリックが記録されます。button_id_stringは、Currentsを介してアプリ内メッセージのクリックイベントで button_id として渡すことができます。

このメソッドはAndroid SDK v8.0.0、Web SDK v2.5.0、iOS SDK v3.23.0で導入されました。

button_id_stringには、英数字、スペース、ダッシュ、アンダースコアのみを使用できます。アクセント付きの文字（例: ö、â、ê）を追加すると、ボタンのクリックトラッキングが機能しなくなり、ボタン文字列がキャンペーンの分析セクションに表示されず、クリック数がカウントされなくなります。
brazeBridge.logCustomEvent(eventName,eventProperties) カスタムイベントを記録します。JSドキュメント
brazeBridge.logPurchase(productId, price, currencyCode, quantity, purchaseProperties) 購入を記録します。JSドキュメント
brazeBridge.getUser().addAlias(alias, label) ユーザーにエイリアスを追加します。Web SDK v2.7.0、Android v8.1.0、iOS SDK v3.26.0で導入されました。JSドキュメント
brazeBridge.getUser().addToCustomAttributeArray(key, value) カスタム属性配列に追加します。JSドキュメント
brazeBridge.getUser().addToSubscriptionGroup(subscriptionGroupId) ユーザーをメールまたはSMS購読グループに追加します。JSドキュメント。

このメソッドはAndroid SDK v15.0.0、Web SDK v3.4.0、iOS SDK v4.3.3で導入されました。
brazeBridge.getUser().removeFromSubscriptionGroup(subscriptionGroupId) ユーザーをメールまたはSMS購読グループから削除します。JSドキュメント。

このメソッドはAndroid SDK v15.0.0、Web SDK v3.4.0、iOS SDK v4.3.3で導入されました。
brazeBridge.getUser().setFirstName(firstName) ユーザーの名を設定します。JSドキュメント
brazeBridge.getUser().setLastName(lastName) ユーザーの姓を設定します。JSドキュメント
brazeBridge.getUser().setEmail(email) ユーザーのメールアドレスを設定します。JSドキュメント
brazeBridge.getUser().setGender(gender) ユーザーの性別を設定します。JSドキュメント
brazeBridge.getUser().setDateOfBirth(year, month, day) ユーザーの生年月日を設定します。JSドキュメント
brazeBridge.getUser().setCountry(country) ユーザーの国を設定します。JSドキュメント
brazeBridge.getUser().setHomeCity(city) ユーザーの市区町村を設定します。JSドキュメント
brazeBridge.getUser().setEmailNotificationSubscriptionType(notificationSubscriptionType) メール通知の購読ステータスを設定します。JSドキュメント
brazeBridge.getUser().setPushNotificationSubscriptionType(notificationSubscriptionType) プッシュ通知の購読ステータスを設定します。JSドキュメント
brazeBridge.getUser().setPhoneNumber(phoneNumber) ユーザーの電話番号を設定します。JSドキュメント
brazeBridge.getUser().setCustomUserAttribute(key, value, merge) カスタムユーザー属性を設定します。JSドキュメント
brazeBridge.getUser().removeFromCustomAttributeArray(key, value) カスタムユーザー属性を削除します。JSドキュメント
brazeBridge.getUser().incrementCustomUserAttribute(key, incrementValue) カスタムユーザー属性をインクリメントします。JSドキュメント
brazeBridge.getUser().setLanguage(language) ユーザーの言語を設定します。Android SDK v5.0.0およびWeb SDK v2.6.0で導入されました。JSドキュメント
brazeBridge.getUser().setCustomLocationAttribute(key, latitude, longitude) カスタムロケーション属性を設定します。Android SDK v5.0.0で導入されました。JSドキュメント
brazeBridge.web.registerAppboyPushMessages(successCallback, deniedCallback) Webプッシュに登録します（Webのみ）。このメソッドは、Web以外の環境で呼び出された場合は何も実行しません。JSドキュメント
brazeBridge.requestPushPermission(successCallback, deniedCallback) Web、iOS、Androidにまたがるプッシュに登録します。注: このメソッドのコールバックはWebでのみサポートされています。このメソッドはWeb SDK v4.0.0、Android SDK v21.0.0、Swift SDK v5.4.0で導入されました。JSドキュメント
brazeBridge.changeUser(id, sdkAuthSignature?) 一意のIDでユーザーを識別します。JSドキュメント

このメソッドはWeb SDK v4.3.0で導入されました。

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.

Clicks Method Supported
Body click brazeBridge.logClick() In-app messages and Banners
Button 1 brazeBridge.logClick('0') In-app messages only
Button 2 brazeBridge.logClick('1') In-app messages only
Custom button tracking brazeBridge.logClick('your custom name here') In-app messages and Banners

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 を追加します。「Button 1」のクリックを記録するには ?abButtonId=0 を使用し、「Button 2」のクリックを記録するには ?abButtonId=1 を使用します。

他の URL パラメーターと同様に、最初のパラメーターは疑問符 ? で始め、後続のパラメーターはアンパサンド & で区切ります。

URL の例

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

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

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

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

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

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

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

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

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

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

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

ページをスワイプしてHTMLプレビューを操作する様子。

キャンペーンの作成

アセットファイル

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

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

ファイルタイプ ファイル拡張子
フォントファイル .ttf, .woff, .otf, .woff2
SVG画像 .svg
JavaScriptファイル .js
CSSファイル .css

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」、「ボディクリック」をプログラムでトラッキングできます。

クリック メソッド
ボタン1 brazeBridge.logClick('0')
ボタン2 brazeBridge.logClick('1')
ボディクリック brazeBridge.logClick()
カスタムボタントラッキング brazeBridge.logClick('your custom name here')

プレビュー付きHTMLメッセージで3つ以上のトラッキングボタンが必要な場合は、brazeBridge.logClick(button_id)を使用します。ボタン1とボタン2は'0'と'1'にマッピングされ、追加のボタンにはカスタムID（キャンペーンごとに最大100個のユニークID）を使用します。ボタンIDの文字制限については、ボタントラッキングを参照してください。

カスタムHTMLアプリ内メッセージのボタンがクリックしても読み込まれない場合は、リンクが有効なURLまたはサポートされているディープリンクスキームを使用しているか確認してください。不正なURLやサポートされていないカスタムスキームは、クリックアクションの完了を妨げる可能性があります。

メッセージを閉じる際のボディクリック

brazeBridge.closeMessage()を呼び出すとメッセージは閉じられますが、それ自体では分析を記録しません。ユーザーがメッセージを閉じる際にボディクリックを記録するには、brazeBridge.closeMessage()の前にbrazeBridge.logClick()を呼び出して、プラットフォーム間でクリックログの一貫性を保ちます。

Androidでカスタムが表示されない（Windowsのzipファイル）

カスタムHTMLアプリ内メッセージがプレビューではレンダリングされるのにAndroidデバイスで表示されない場合は、HTMLとアセットファイルのパッケージ方法を確認してください。一部のWindows zipユーティリティは、ファイルをルートレベルに配置する代わりに、アーカイブ内にディレクトリエントリ（フォルダパス）を追加します。

zipにネストされたディレクトリエントリが含まれている場合、Androidは相対パスで参照されたアセットの読み込みに失敗する可能性があります。これを修正するには：

  1. HTML、CSS、JavaScript、画像ファイルを1つのフォルダに展開します。
  2. zipアーカイブを作成する際に、親フォルダではなくすべてのファイルを選択します。
  3. HTML内のパスがzipのルートにあるファイルを参照していることを確認するか（例：assets/style.cssではなくstyle.css）、フラット化された構造に合わせてパスを調整します。
  4. zipを再アップロードし、Androidデバイスにテストメッセージを送信します。

または、zipファイルにバンドルする代わりに、メディアライブラリからアセットをアップロードします。

後方互換性のない変更

  1. 以前モバイルアプリでサポートされていたbraze://closeディープリンクは、JavaScript brazeBridge.closeMessage()に置き換えられ削除されました。これにより、Webがディープリンクをサポートしていないため、クロスプラットフォームのHTMLメッセージが可能になります。

  2. ボタン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>
New Stuff!