# 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** | 既存のコンテンツを変更せず、ページの上にオーバーレイとしてメッセージを表示し、注目を集めます。 | ウェルカムオファー、プロモーション告知 |
| **Inline** | メッセージをページに直接挿入し、既存のコンテンツを置き換えることでシームレスなネイティブ体験を提供します。 | セールバナー、カートクーポンリマインダー、商品別プロモーション |


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

## 仕組み

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

```mermaid
sequenceDiagram
    actor User as ユーザー
    participant SDK as TD Web SDK
    participant RT as RT 2.0 Personalization API

    User->>SDK: ページ訪問またはイベントトリガー<br/>(page_view, cart_add など)
    SDK->>RT: パーソナライズトークン付きでイベント送信
    RT->>RT: エントリー基準と<br/>セグメントメンバーシップを評価
    alt 配信条件を満たす場合
        RT-->>SDK: キャンペーンペイロードを返す
        alt Popupキャンペーン
            SDK->>User: ページ上にポップアップをオーバーレイ
        else Inlineキャンペーン
            SDK->>User: Zone要素のinnerHTMLを差し替え
        end
    else 条件を満たさない場合
        RT-->>SDK: 空のレスポンスを返す
    end
    User->>User: メッセージを閲覧・操作・閉じる
```

### 前提条件

キャンペーンを作成する前に必要な要件の詳細は[セットアップと前提条件](/ja/products/marketing-cloud/engage-studio/experiences/setup-and-prerequisites)を参照してください。

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

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

```mermaid
stateDiagram-v2
    direction LR
    [*] --> Draft
    Draft --> Live : Launch
    Live --> Paused : Pause
    Paused --> Live : Resume
    Live --> Finished : Complete
    Paused --> Finished : Complete
    Finished --> [*]
```

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


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

## キャンペーンの作成

キャンペーンは **Target Audience** と **Message Content** の2つのステップで作成し、最後に **Launch** します。メッセージタイプにかかわらず手順は同じで、PopupとInlineではコンテンツ設定の部分のみ異なります。

メッセージタイプに応じたガイドを参照してください。

- [Popupキャンペーンの作成](/ja/products/marketing-cloud/engage-studio/experiences/create-a-popup-campaign) — ドラッグアンドドロップエディターを使ったモーダルオーバーレイ
- [Inlineキャンペーンの作成](/ja/products/marketing-cloud/engage-studio/experiences/create-an-inline-campaign) — HTML/CSSコードエディターを使ったDOM差し替え


## 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がユーザーのクーポンリストと追加した商品を照合し、有効かつ適用可能なクーポンが見つかればリマインダーコンテンツを返します。

## このセクションの内容

セットアップと前提条件
TD Web SDKのインストールとRT 2.0の前提条件の設定。

Popupキャンペーンの作成
ドラッグアンドドロップエディターでモーダルオーバーレイキャンペーンを作成。

Inlineキャンペーンの作成
DOM要素をパーソナライズされたHTMLコンテンツで差し替える。

メッセージコンテンツのパーソナライズ
プロフィール変数とLiquid構文でメッセージをパーソナライズ。

Web Message Previewer
DOM要素を視覚的に選択してLaunch前にキャンペーンをプレビュー。

トラブルシューティング
In-Browser Messagingのよくある問題を診断・解決。