In-Browser Messaging

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

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

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

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

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 または Finished ステータスのキャンペーンは削除できます。メッセージタイプとコンテンツはキャンペーンがLiveまたはFinishedになると変更できなくなります。

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

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

• 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の設定画面に移動してください。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

➡️ Web Message Previewerのインストールと使い方

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

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

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

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