# In-Browser Messaging

Beta
In-Browser MessagingはBeta版です。一般提供前に機能やSDKの仕様が変更される場合があります。
アクセス方法については、カスタマーサクセス担当までご相談ください。

**In-Browser Messaging**を使用すると、マーケターはWebサイト上でパーソナライズされたエクスペリエンス——プロモーションバナー、モーダルオーバーレイ、インラインコンテンツの差し替えなど——をページのコードを変更せずに配信できます。メールやプッシュ通知とは異なり、In-Browserメッセージはユーザーがブラウジング中にブラウザ内でレンダリングされるため、コンテキストに応じたプロモーション、カートリマインダー、期間限定のお知らせなどに最適です。

ターゲティングとパーソナライズに関するすべての判定は**Real-Time Personalization 2.0（RT 2.0）**がサーバーサイドで処理するため、クライアントサイドの実装は最小限に抑えられます。

## メッセージタイプ

In-Browser Messagingは2種類の配信モードをサポートしています。

| **タイプ**  | **説明**  | **主な用途**  |
|  --- | --- | --- |
| **Popup** | 既存のページコンテンツの上にオーバーレイとして表示されます。DOMは変更されません。表示位置はプリセットのレイアウト（中央、各コーナー）から選択できます。 | ウェルカムオファー、プロモーション告知 |
| **Inline** | CSS セレクターで特定したDOM要素（Zone）の内側のHTMLを差し替えます。注入されたコンテンツはページレイアウトの一部として表示されます。 | セールバナー、カートクーポンリマインダー、商品別プロモーション |


メッセージタイプはキャンペーン作成時に選択し、**保存後は変更できません**。

## 仕組み

In-Browser Messagingは**RT Personalization 2.0**を基盤としています。配信フローは以下のとおりです。

```
1. ユーザーがページを訪問するか、イベントをトリガーする（例：ページビュー、カートへの追加）
        ↓
2. TD Web SDKがRT 2.0 Personalization APIにイベントを送信する
        ↓
3. RT 2.0が設定されたエントリー基準とセグメントメンバーシップを評価する
        ↓
4. 配信条件を満たしている場合 → APIがキャンペーンペイロードを返す
        ↓
5. SDKがコンテンツを注入する:
   • Popup → ページ上にポップアップをオーバーレイ表示する
   • Inline → 対象のZone要素の内側のHTMLを差し替える
        ↓
6. ユーザーがメッセージを閲覧、操作、または閉じる
```

### 前提条件

In-Browser Messageキャンペーンを作成する前に、以下の設定を完了してください。

1. **RT Personalization 2.0が有効化**されていること（Treasure AIアカウント）
2. **RTイベント**がWebサイトに実装され、Treasure AIにデータが流入していること
3. **IDスティッチング**が設定され、イベント間でユーザーIDが名寄せされていること
4. **Realtime Personalization**エントリーおよびセクションが、関連するペアレントセグメントを使用してAudience Studioで作成済みであること
5. **TD Web SDK**がターゲットWebサイトにインストールされ、Personalization APIを呼び出すよう設定されていること


## キャンペーンのライフサイクル

In-Browser Messageキャンペーンは以下のステータスを移行します。

```
DRAFT ──Launch──▶ LIVE ──Pause──▶ PAUSED ──Resume──▶ LIVE
                    │                  │
                    └──Complete──▶ FINISHED ◀──Complete──┘
```

| **ステータス**  | **説明**  | **編集可否**  |
|  --- | --- | --- |
| **Draft** | 作成済みだがまだ配信されていません。 | ✅ すべての設定 |
| **Live** | 対象ユーザーへの配信中です。 | ❌ 一時停止してから編集 |
| **Paused** | 配信が停止されています。再開できます。 | ✅ すべての設定 |
| **Finished** | 手動で完了済み。再アクティベートはできません。 | ❌ |


**Draft** または **Finished** ステータスのキャンペーンは削除できます。**メッセージタイプとコンテンツはキャンペーンがLiveまたはFinishedになると変更できなくなります。**

## In-Browser Messageキャンペーンの作成

キャンペーンの作成はEngage Studioで3つのステップで行います。

### ステップ 1 — Target Audience

パーソナライズのターゲティングを設定します。

- **Target Parent Segment** — 対象ユーザーを定義するRT 2.0のペアレントセグメント。
- **Personalization** — エントリー基準に基づいて配信を制御する、既存のRT 2.0 Personalization。
- **Personalization Section** — Personalization内の、このキャンペーンのコンテンツを格納するセクション。


これらはEngage StudioでIn-Browser Messageを作成する前に、Audience Studioで設定しておく必要があります。Personalizationが存在しない場合は **Create Personalization** をクリックしてRT 2.0の設定画面に移動してください。

### ステップ 2 — Message Content

キャンペーンの詳細とコンテンツを設定します。

- **Campaign ID** — 自動生成された一意の識別子（読み取り専用）。
- **Name**（必須） — キャンペーン一覧に表示される名前。
- **Description**（任意） — キャンペーンに関する社内向けメモ。
- **Message Type** — **Popup** または **Inline** を選択（作成後は変更不可）。


#### Popupキャンペーン

Popupキャンペーンの場合、表示位置を選択します。

| 位置 | 説明 |
|  --- | --- |
| `top-left` | 左上コーナー |
| `top-center` | 上部中央 |
| `top-right` | 右上コーナー |
| `center` | 画面中央のオーバーレイ |
| `bottom-left` | 左下コーナー |
| `bottom-center` | 下部中央 |
| `bottom-right` | 右下コーナー |


**ドラッグアンドドロップエディター**でコンテンツブロック（テキスト、画像、ボタン）を追加・配置します。

オーバーレイの背景色と不透明度、閉じるボタンの外観、コンテンツ幅はそれぞれ設定でき、Webサイトのビジュアルスタイルに合わせた調整が可能です。

#### Inlineキャンペーン

Inlineキャンペーンの場合、**Zone ID** を指定します。Zone IDはページ上のターゲットDOM要素を識別するCSSセレクター（例：`#product-banner-area`、`.promo-slot`）です。[Engage Studio — Web Message Previewer](/ja/products/marketing-cloud/engage-studio/experiences/chrome-extension) Chrome Extensionを使用すると、実際のページ上で要素を視覚的に選択してセレクターを自動生成できます。

コンテンツは**HTML**、**CSS**のタブが分かれたコードエディターで編集します。

Zone IDの動作
Zone IDのセレクターが実行時にページ上の要素と一致しない場合、メッセージはエラーなく静かにスキップされます（エンドユーザーにはエラーは表示されません）。Inlineキャンペーンあたり1つのZone IDのみサポートしています。

#### プロフィール変数の使用

メッセージコンテンツにCDPプロフィール属性を参照する変数を記述することで、エクスペリエンスをパーソナライズできます。

```
{{profile.loyalty_member}}
{{profile.first_name}}
```

利用可能な変数は、ペアレントセグメントのバッチ属性、RT属性、RTイベントから提供されます。

### ステップ 3 — Launch

コンテンツが完成したら **Launch** をクリックしてキャンペーンをLiveにします。Engage Studioは連携しているRT 2.0 Personalizationセクションにキャンペーンペイロードを自動的に反映します。

配信を停止するには **Pause** をクリックします。**Resume** で再開、**Complete** でキャンペーンを永続的に終了します。

保存の動作
コンテンツの変更は編集セッション中は下書き状態で保持されます。**Save as Draft** をクリックしたときのみサーバーに保存されます。保存せずに画面を離れようとすると、未保存の変更が失われることを警告するダイアログが表示されます。

## Web Message Previewerを使ったオーサリング

Engage Studioが提供する **Engage Studio — Web Message Previewer** Chrome Extensionを使用すると、マーケターは実際のWebサイト上でターゲットDOM要素を特定し、CSSセレクターを手書きすることなくキャンペーンコンテンツのプレビューを確認できます。

ExtensionはあくまでもZone IDの特定とプレビューを支援する**オーサリング補助ツール**であり、配信アーキテクチャはExtensionに依存しません。Extensionをインストールできない環境でも、ブラウザのDevToolsを使って手動でCSSセレクターを入力することでキャンペーンを作成・配信できます。

➡️ [Web Message Previewerのインストールと使い方](/ja/products/marketing-cloud/engage-studio/experiences/chrome-extension)

## ユースケース

### 期間限定セールバナー

商品詳細ページにセール期間中のみインラインでセールバナーを表示します。RT 2.0のエントリー基準で現在時刻と商品のセール期間を照合するよう設定し、バナーエリア（例：`#product-banner-area`）をターゲットにしたZone IDを指定します。

### カートクーポンリマインダー

ユーザーが商品をカートに追加したとき、適用可能なクーポンが存在する場合にクーポンリマインダーアイコンを表示します。RT 2.0がユーザーのクーポンリストと追加した商品を照合し、有効かつ適用可能なクーポンが見つかればリマインダーコンテンツを返します。

## スコープ外（将来のマイルストーン）

以下の機能は現在のリリースには含まれておらず、将来のマイルストーンで提供予定です。

- カタログデータバインディング（バナーコンテンツを商品カタログ属性に自動連携）
- インプレッション・クリック・閉じる・コンバージョンのトラッキング
- フリークエンシーキャップ（ユーザーへのメッセージ表示回数の制御）
- A/Bテストおよび多変量テスト
- In-Browserキャンペーン内のマルチステップジャーニーやオーケストレーションロジック