Skip to content

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

標準のアプリ内メッセージはさまざまな方法でカスタマイズできますが、HTML、CSS、JavaScriptを使用して設計および構築されたメッセージを使用すると、キャンペーンのルックアンドフィールをさらに細かく制御できます。シンプルな構成だけで、ニーズに合わせてカスタマイズした機能やブランディングが可能になります。

HTML アプリ内メッセージを使用すると、次のようなメッセージの外観をより細かく制御できます。

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

カスタム HTML メッセージでは、JavaScript Bridge メソッドを使用してイベントを記録したり、カスタム属性を設定したり、メッセージを閉じたりすることができます。GitHub リポジトリには、HTML アプリ内メッセージの使用方法やニーズに合わせてカスタマイズする方法の詳細が記載されています。また、使い始める際に役立つ一連の HTML5 アプリ内メッセージテンプレートも用意されています。

JavaScript ブリッジ

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

たとえば、カスタム属性とカスタムイベントをログに記録してメッセージを閉じるには、HTML アプリ内メッセージ内で次の JavaScript を使用できます。

```html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
### JavaScript ブリッジメソッド {#bridge}

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

<style>
/* Makes first column wider */
#article-main > table:first-of-type > tbody > tr td:first-child {
    min-width: 470px !important;
}
/* Makes code column smaller font */
#article-main > table:first-of-type > tbody > tr td:first-child code {
    font-size:12px !important;
}
#article-main > table:first-of-type td {
  word-break: break-word;
}
</style>

<div class='alert alert-note' role='alert'><div class='alert-msg'> <b>note: </b><br />
<p>Liquid を参照して JavaScript Bridge <code>メソッドにカスタムアトリビュートを挿入することはできません</code>。</p>
</div></div>

| Method Name    | Description      |
| :------- | :------------------ |
| `brazeBridge.closeMessage()`                                                               | Close the current in-app message.                           |
| `window.addEventListener("ab.BridgeReady", function(){...}, false)`                         | Callback method for when the `brazeBridge` has finished loading. All JavaScript code should be run within this callback function.                                                                                                                                                              |
| `brazeBridge.requestImmediateDataFlush()`                                                  | Flush queued data to the Braze servers. [JS Docs](https://js.appboycdn.com/web-sdk/latest/doc/modules/braze.html#requestimmediatedataflush "JavaScript documentation for requestImmediateDataFlush method")   |
| `brazeBridge.logClick(button_id_string)`                                                   | Log a button click for a given button ID. When `button_id_string` is left blank, a body-click will be logged instead. The `button_id_string` can be passed out as the `button_id` in [in-app message click events](/docs/ja/user_guide/data_and_analytics/braze_currents/event_glossary/message_engagement_events/#in-app-message-click-events) via Currents. <br><br>This method was introduced in Android SDK v8.0.0, Web SDK v2.5.0, and iOS SDK v3.23.0<br><br>The `button_id_string` only accepts alphanumeric characters, spaces, dashes, and underscores. Adding a character with an accent (for example, ö,â,ê) breaks the button click tracking, resulting in the button string not appearing in the campaign analytics section and clicks not being accounted for. |
| `brazeBridge.logCustomEvent(eventName,eventProperties)`                                    | Log a custom event. [JS Docs](https://js.appboycdn.com/web-sdk/latest/doc/modules/braze.html#logcustomevent "JavaScript documentation for logCustomEvent method")                                                                                                                                                                                   |
| `brazeBridge.logPurchase(productId, price, currencyCode, quantity, purchaseProperties)`    | Log a purchase. [JS Docs](https://js.appboycdn.com/web-sdk/latest/doc/modules/braze.html#logpurchase "JavaScript documentation for purchaseProperties method")                                                                                                                                                                                          |
| `brazeBridge.display.showFeed()`                                                           | Show the News Feed. [JS Docs](https://js.appboycdn.com/web-sdk/latest/doc/module-display.html#.showFeed "JavaScript documentation for showFeed method")                                                                                                                                                                                        |
| `brazeBridge.getUser().addAlias(alias, label)`                                             | Adds an alias to a user. Introduced in Web SDK v2.7.0, Android v8.1.0, and iOS SDK v3.26.0 [JS Docs](https://js.appboycdn.com/web-sdk/latest/doc/ab.User.html#addAlias "JavaScript documentation for addAlias method")                                                                                                                                                                                       |
| `brazeBridge.getUser().addToCustomAttributeArray(key, value)`                              | Adds to a custom attribute array. [JS Docs](https://js.appboycdn.com/web-sdk/latest/doc/ab.User.html#addToCustomAttributeArray "JavaScript documentation for addToCustomAttributeArray method")                                                                                                                                                                 |
| `brazeBridge.getUser().addToSubscriptionGroup(subscriptionGroupId)` | Adds a user to an email or SMS subscription group. [JS Docs](https://js.appboycdn.com/web-sdk/latest/doc/classes/appboy.user.html#addtosubscriptiongroup "JavaScript documentation for addToSubscriptionGroup method").<br><br>This method was introduced in Android SDK v15.0.0, Web SDK v3.4.0, and iOS SDK v4.3.3. |
| `brazeBridge.getUser().removeFromSubscriptionGroup(subscriptionGroupId)` | Removes a user from an email or SMS subscription group. [JS Docs](https://js.appboycdn.com/web-sdk/latest/doc/classes/appboy.user.html#removefromsubscriptiongroup "JavaScript documentation for removeFromSubscriptionGroup method").<br><br>This method was introduced in Android SDK v15.0.0, Web SDK v3.4.0, and iOS SDK v4.3.3. |
| `brazeBridge.getUser().setFirstName(firstName)`                                            | Set a user's first name. [JS Docs](https://js.appboycdn.com/web-sdk/latest/doc/ab.User.html#setFirstName "JavaScript documentation for setFirstName method")                                                                                                                                                                                       |
| `brazeBridge.getUser().setLastName(lastName)`                                              | Set a user's last name. [JS Docs](https://js.appboycdn.com/web-sdk/latest/doc/ab.User.html#setLastName "JavaScript documentation for setLastName method")                                                                                                                                                                                         |
| `brazeBridge.getUser().setEmail(email)`                                                    | Set a user's email address. [JS Docs](https://js.appboycdn.com/web-sdk/latest/doc/ab.User.html#setEmail "JavaScript documentation for setEmail method")                                                                                                                                                                                        |
| `brazeBridge.getUser().setGender(gender)`                                                  | Set a user's gender. [JS Docs](https://js.appboycdn.com/web-sdk/latest/doc/ab.User.html#setGender "JavaScript documentation for setGender method")                                                                                                                                                                                              |
| `brazeBridge.getUser().setDateOfBirth(year, month, day)`                                   | Set a user's date of birth. [JS Docs](https://js.appboycdn.com/web-sdk/latest/doc/ab.User.html#setDateOfBirth "JavaScript documentation for setDateOfBirth method")                                                                                                                                                                                  |
| `brazeBridge.getUser().setCountry(country)`                                                | Set a user's country. [JS Docs](https://js.appboycdn.com/web-sdk/latest/doc/ab.User.html#setCountry "JavaScript documentation for setCountry method")                                                                                                                                                                                            |
| `brazeBridge.getUser().setHomeCity(city)`                                                  | Set a user's city. [JS Docs](https://js.appboycdn.com/web-sdk/latest/doc/ab.User.html#setHomeCity "JavaScript documentation for setHomeCity method")                                                                                                                                                                                              |
| `brazeBridge.getUser().setEmailNotificationSubscriptionType(notificationSubscriptionType)` | Set email notification subscription status. [JS Docs](https://js.appboycdn.com/web-sdk/latest/doc/ab.User.html#setEmailNotificationSubscriptionType "JavaScript documentation for setEmailNotificationSubscriptionType method")                                                                                                                                            |
| `brazeBridge.getUser().setPushNotificationSubscriptionType(notificationSubscriptionType)`  | Set push notification subscription status. [JS Docs](https://js.appboycdn.com/web-sdk/latest/doc/ab.User.html#setPushNotificationSubscriptionType "JavaScript documentation for setPushNotificationSubscriptionType method")                                                                                                                                              |
| `brazeBridge.getUser().setPhoneNumber(phoneNumber)`                                        | Set a user's phone number. [JS Docs](https://js.appboycdn.com/web-sdk/latest/doc/ab.User.html#setPhoneNumber "JavaScript documentation for setCustomUserAttribute method")                                                                                                                                                                                   |
| `brazeBridge.getUser().setCustomUserAttribute(key, value, merge)`                                 | Set a custom user attribute. [JS Docs](https://js.appboycdn.com/web-sdk/latest/doc/ab.User.html#setCustomUserAttribute "JavaScript documentation for setCustomUserAttribute method")                                                                                                                                                                         |
| `brazeBridge.getUser().removeFromCustomAttributeArray(key, value)`                         | Remove a custom user attribute. [JS Docs](https://js.appboycdn.com/web-sdk/latest/doc/ab.User.html#removeFromCustomAttributeArray "JavaScript documentation for removeFromCustomAttributeArray method")                                                                                                                                                              |
| `brazeBridge.getUser().incrementCustomUserAttribute(key, incrementValue)`                  | Increment a custom user attribute. [JS Docs](https://js.appboycdn.com/web-sdk/latest/doc/ab.User.html#incrementCustomUserAttribute "JavaScript documentation for incrementCustomUserAttribute method")                                                                                                                                                             |
| `brazeBridge.getUser().setLanguage(language)`                                              | Set a user's language. Introduced in Android SDK v5.0.0 and Web SDK v2.6.0. [JS Docs](https://js.appboycdn.com/web-sdk/latest/doc/ab.User.html#setLanguage "JavaScript documentation for setLanguage")                                                                                                    |
| `brazeBridge.getUser().setCustomLocationAttribute(key, latitude, longitude)`               | Set a custom location attribute. Introduced in Android SDK v5.0.0. [JS Docs](https://js.appboycdn.com/web-sdk/latest/doc/ab.User.html#setCustomLocationAttribute "JavaScript documentation for setCustomLocationAttribute method")                                                                                                            |
| `brazeBridge.web.registerAppboyPushMessages(successCallback, deniedCallback)`              | Register for web push (web only). This method is a no-op when called in a non-web environment. [JS Docs](https://js.appboycdn.com/web-sdk/latest/doc/modules/braze.html#requestpushpermission "JavaScript documentation for registerAppboyPushMessages method")                                        |
| `brazeBridge.requestPushPermission(successCallback, deniedCallback)` | Register for push across Web, iOS, and Android. Note: the method's callbacks are only supported on web. This method was introduced as of Web SDK v4.0.0, Android SDK v21.0.0, and Swift SDK v5.4.0. [JS Docs](https://js.appboycdn.com/web-sdk/latest/doc/modules/braze.html#requestpushpermission "JavaScript documentation for requestPushPermission method") |
| `brazeBridge.changeUser(id, sdkAuthSignature?)`                                            | Identify user with a unique ID. [JS Docs](https://js.appboycdn.com/web-sdk/latest/doc/modules/braze.html#changeuser "JavaScript documentation for changeUser method")<br><br>This method was introduced in Web SDK v4.3.0. |
{: .reset-td-br-1 .reset-td-br-2}


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

カスタム JavaScript に加えて、Braze SDK はこれらの便利な URL ショートカットを使用してアナリティクスデータを送信することもできます。これらのクエリパラメータと URL スキームはすべて大文字と小文字が区別されることに注意してください。

### ボタンクリックトラッキング

<div class='alert alert-warning' role='alert'><div class='alert-msg'> <b>warning: </b><br />
<p><a href="/docs/ja/user_guide/message_building_by_channel/in-app_messages/traditional/customize/html_in-app_messages/#html-upload-with-preview/">プレビューメッセージタイプの HTML では、<code class="language-plaintext highlighter-rouge">abButtonID</code></a>の使用はサポートされていません。詳細については、<a href="/docs/ja/user_guide/message_building_by_channel/in-app_messages/preview/#backward-incompatible-changes">アップグレードガイドをご覧ください</a>。</p>
</div></div>

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

他の 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">` -`<a>` ボタンを2回クリックしたときのアンカーエレメント

<div class='alert alert-note' role='alert'><div class='alert-msg'> <b>note: </b><br />
<p>アプリ内メッセージは、ボタン 1 とボタン 2 のクリックのみをサポートします。これら 2 つのボタン ID のいずれかを指定しない URL は、一般的な「ボディクリック」として記録されます。</p>
</div></div>

### リンクを新しいウィンドウで開く (モバイルのみ)

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

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

### ディープリンクとして開く (モバイルのみ)

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

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

### ニュースフィード (モバイルのみ)

<div class='alert alert-note' role='alert'><div class='alert-msg'> <b>note: </b><br />
<p>ニュースフィードは非推奨になります。Brazeは、ニュースフィードツールを使用するお客様に、コンテンツカードメッセージングチャネルに移行することを推奨しています。コンテンツカードメッセージングチャネルは、より柔軟でカスタマイズ可能で信頼性が高くなります。詳細については、<a href="/docs/ja/user_guide/message_building_by_channel/content_cards/migrating_from_news_feed/">移行ガイドをご覧ください</a>。</p>
</div></div>

モバイルアプリの場合、リンクの URL をに設定してニュースフィードを開くことができます`braze://feed`。

たとえば、`<a href="braze://feed">View Feed</a>`。

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

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

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

## HTML アップロードとプレビュー

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

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

![Interacting with the HTML preview by swiping through pages.](/docs/ja/assets/img/iam-beta-javascript-preview.gif?94138855d0ff5b807dd53f23a5e9a2f9)

<div class='alert alert-tip' role='alert'><div class='alert-msg'> <b>tip: </b><br />
<p>HTML で使用している <code class="language-plaintext highlighter-rouge">brazeBridge</code> JavaScript メソッドは、ダッシュボードでプレビューしている間はユーザープロファイルを更新しません。</p>
</div></div>

### SDK の要件 {#supported-sdk-versions}

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

<div id='sdk-versions'><a href='/docs/developer_guide/platform_integration_guides/web/changelog/#250' class='sdk-versions--chip web-sdk' target='_blank'><i class='fa-solid fa-desktop'></i> &nbsp; Web: 2.5.0+ &nbsp;<i class='fa-solid fa-arrow-up-right-from-square'></i></a><a href='/docs/developer_guide/platform_integration_guides/ios/changelog/swift_changelog/#500' class='sdk-versions--chip ios-sdk' target='_blank'><i class='fa-brands fa-apple'></i> &nbsp; iOS Swift: 5.0.0+ &nbsp;<i class='fa-solid fa-arrow-up-right-from-square'></i></a><a href='/docs/developer_guide/platform_integration_guides/android/changelog/#800' class='sdk-versions--chip android-sdk' target='_blank'><i class='fa-brands fa-android'></i> &nbsp; Android: 8.0.0+ &nbsp;<i class='fa-solid fa-arrow-up-right-from-square'></i></a></div>

<div class='alert alert-warning' role='alert'><div class='alert-msg'> <b>warning: </b><br />
<p>このメッセージタイプは特定の新しいバージョンの SDK でのみ受信できるため、サポートされていない SDK バージョンを使用しているユーザーはメッセージを受信できません。このメッセージタイプは、ユーザーベースのかなりの部分にアクセスできるようになった後に採用するか、アプリのバージョンが要件よりも新しいユーザーのみを対象とすることを検討してください。<a href="/docs/ja/user_guide/engagement_tools/campaigns/ideas_and_strategies/new_features/#filtering-by-most-recent-app-versions">最新のアプリバージョンによるフィルタリングの詳細をご覧ください</a>。</p>
</div></div>

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

**カスタムコードのアプリ内メッセージを作成する場合**、カスタムタイプとして「**プレビュー付きの HTML アップロード**」を選択します。以前にカスタムコードのアプリ内メッセージ(ライブまたはドラフト)を作成したことがない場合は、このオプションが自動的に適用されるため、選択する必要はありません。

![Creating an in-app message that sends to both Mobile and Web browsers where "Message Type" is Custom Code and "Custom Type" is HTML Upload with Preview.](/docs/ja/assets/img/iam-beta-html-cross-channel.png?977b69affbd5f5679533fbc69a08c1c7)

モバイルアプリのユーザーがこのメッセージを受け取るには、サポートされている SDK バージョンにアップグレードする必要があることに注意してください。新しいBraze [SDKバージョンに依存するキャンペーンを開始する前に、モバイルアプリをアップグレードするようユーザーに促すことをお勧めします](/docs/ja/user_guide/engagement_tools/campaigns/ideas_and_strategies/new_features/)。

#### アセットファイル

HTMLアップロードを使用してカスタムコードのアプリ内メッセージを作成する場合、[キャンペーンアセットをメディアライブラリにアップロードしてメッセージで参照できます](/docs/ja/user_guide/engagement_tools/templates_and_media/media_library/)。

アップロードには以下のファイルタイプがサポートされています。

| ファイルの種類 | ファイル拡張子 |
| :--------------- | :-------------------------------- |
| フォントファイル | `.ttf`、`.woff`、`.otf`、`.woff2` |
| SVG イメージ `.svg` |
| ジャバスクリプトファイル | `.js` |
| CSS ファイル `.css` |
{: .reset-td-br-1 .reset-td-br-2}

Braze がメディアライブラリにアセットをアップロードすることを推奨する理由は 2 つあります。

1. メディアライブラリを介してキャンペーンにアセットを追加すると、ユーザーがオフラインのときやインターネット接続が不十分なときでもメッセージを表示できます。
2. Braze にアップロードされたアセットは、キャンペーン全体で再利用できます。

##### アセットファイルの追加

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

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

アセットを追加すると、「**このキャンペーンのアセット**」セクションに表示されます。 

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

それ以外の場合は、リストのアセットにカーソルを合わせ、[<i class="fas fa-copy"></i>**コピー**] を選択してファイルの URL をクリップボードにコピーします。次に、リモートアセットを参照するときと同じように、コピーしたアセット URL を HTML に貼り付けます。


### HTML エディター

HTML に加えた変更は、入力時にプレビューパネルに自動的にレンダリングされます。HTML で使用している [`brazeBridge`JavaScript](#bridge) メソッドは、ダッシュボードでプレビューしている間はユーザープロファイルを更新しません。

**エディター設定を構成して**、折り返しテキストの切り替え、フォントサイズの変更、カラーテーマの選択を行うことができます。コードエディターにはシンタックスハイライト用のさまざまなカラーテーマが用意されているため、メッセージコンポーザーで潜在的なコードエラーを直接特定し、コードをより適切に整理できます (引数のどちら側を選択しても、スペースまたはタブを使用)。

![Syntax highlighting options in the "Editor Settings" dropdown when composing an HTML in-app message.](/docs/ja/assets/img/iam-beta-html-syntax-highlighting.png?5c52c157e2b3218d345de0ec6fd87b03)

<div class='alert alert-tip' role='alert'><div class='alert-msg'> <b>tip: </b><br />
<p>HTML エディターで <kbd><kbd>Ctrl+F</kbd></kbd> (Windows) または <kbd>Command</kbd> + <kbd>F</kbd> (Mac) を押すと、コード内を検索できます。</p>
</div></div>

### ボタントラッキング {#button-tracking-improvements}

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

| クリック数 | メソッド |
| ---------- | ---------------------------- |
| Button 1   | `brazeBridge.logClick("0")` |
| ボタン 2 | `brazeBridge.logClick("1")` |
| ボディクリック | `brazeBridge.logClick()` |
| カスタムボタントラッキング | `brazeBridge.logClick("your custom name here")` |
{: .reset-td-br-1 .reset-td-br-2}

<div class='alert alert-note' role='alert'><div class='alert-msg'> <b>note: </b><br />
<p>このボタントラッキング方法は、廃止された以前の自動クリックトラッキング方法(など<code class="language-plaintext highlighter-rouge">?abButtonId=0</code>)に代わるものです。</p>
</div></div>

インプレッションごとに複数のボタンクリックイベントを追跡できます。たとえば、メッセージを閉じてボタン 2 のクリックを記録するには、以下を使用できます。

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

また、新しいカスタムボタン名をトラッキングすることもできます。キャンペーンごとに最大 100 個のユニークな名前を指定できます。たとえば、brazeBridge.logClick("blue button")またはbrazeBridge.logClick("viewed carousel page 3")

制限事項

  • 1 つのキャンペーンにつき、最大 100 個のユニークなボタン ID を設定できます。
  • ボタン ID には、それぞれ最大 255 文字を使用できます。
  • ボタン ID には、文字、数字、スペース、ダッシュ、およびアンダースコアのみを使用できます。

下位互換性のない変更

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

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

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

    変更前 処理後  
    | <a href= "ブレイズ: 閉じるボタン //close”>Close Button</a></a></code>
    | <a href= "ブレイズ: 閉じるボタン //close?abButtonId=0”>Close Button</a></a></code>
    | <a href= "アプリ:| Track button 1 //deeplink” onclick=”brazeBridge.logClick(‘0’)”>Track button 1</a></code>  
     
「このページはどの程度役に立ちましたか?」
New Stuff!