Skip to content
Engage Studio
/
In-Product Experiences
/
/
Create an Inline Campaign
Last updated

Inlineキャンペーンの作成

Inlineキャンペーンは、メッセージをページに直接挿入し、既存のコンテンツを置き換えることでシームレスなネイティブ体験を提供します。セールバナー、カートクーポンリマインダー、商品別プロモーションなど、ページの自然なフローとして表示するコンテンツに活用してください。

Beta

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

始める前に

キャンペーンを作成する前にセットアップと前提条件を完了してください。ターゲットとするペアレントセグメント用のRT PersonalizationとセクションがAudience Studioに存在することを確認してください。また、ページのターゲットDOM要素を特定済み、またはWeb Message Previewer Chrome Extensionを使って視覚的に選択する予定であることを確認してください。

ステップ 1 — Target Audience

  1. Engage Studioで In-Browser Messaging に移動し、Create をクリックします。
  2. ターゲティングを設定します。
In-Browser Message Target Audienceステップ。Target Parent Segment、Personalization、Personalization sectionフィールドが表示されています。
フィールド 説明
Target Parent Segment対象ユーザーを定義するRT 2.0のペアレントセグメント。
Personalization既存のRT 2.0 Personalization。Preview をクリックして内容を確認するか、Create Personalization をクリックしてAudience Studioで設定できます。
Personalization Sectionこのキャンペーンのコンテンツを格納するPersonalization内のセクション。セクションが存在しない場合は Create Section をクリックして追加します。

ステップ 2 — Message Content

キャンペーン詳細

フィールド 必須 説明
Message ID—自動生成された一意の識別子。読み取り専用。
Name✅キャンペーン一覧に表示される名前。最大100文字。
Description—社内向けメモ。最大1,000文字。
Message Type✅Inline を選択します。キャンペーン保存後は変更できません。
InlineタイプのIn-Browser Message Contentステップ。Message ID・Name・Descriptionフィールドと、CSSセレクターおよびReplacement HTMLフィールドを含むMessage Contentセクションが表示されています。

CSSセレクター（Zone ID）

CSS selectorフィールドに、SDKがコンテンツを注入するターゲットDOM要素を識別するCSSセレクターを入力します。セレクターは実行時にdocument.querySelector()で照合されます。

ヒント

Web Message Previewer Chrome Extensionをインストールすると、Webページ上で要素を視覚的に選択し、CSSセレクターとReplacement HTMLフィールドを自動入力できます。

Zone IDの動作
  • InlineキャンペーンあたりZone IDは1つのみサポートされます。
  • 実行時にセレクターがページ上の要素と一致しない場合、メッセージはエラーなくスキップされます（エンドユーザーにはエラーは表示されません）。
  • デフォルトの注入動作は**innerHTMLの差し替え**です：一致した要素の既存コンテンツがキャンペーンのHTMLに置き換えられます。

サポートされるCSSセレクターのパターン

パターン 例 説明
IDセレクター#product-banner-area特定のid属性を持つ要素
クラスセレクター.promo-slot特定のクラスを持つ要素
データ属性（値）[data-id="product-123"]特定のdata-*属性値を持つ要素
データ属性（存在確認）[data-role="banner"]data-*属性を持つ要素
子結合子div > p > span直接の子要素パス
nth-childul > li:nth-child(3)インデックスによる特定の子要素
複合section[data-role="main"] > div.content上記の組み合わせ

推奨：最も安定したセレクターにはid属性または安定したdata-testidやdata-*属性を使用してください。ビルド時に変わるCSS-in-Jsライブラリ（styled-components、Emotion）が生成するクラス名は避けてください。

コンテンツエディター（HTML）

Replacement HTMLフィールドに、一致したZone要素のinnerHTMLを置き換えるHTMLコンテンツを入力します。直接HTMLを入力するか、Web Message Previewerで生成したコンテンツを貼り付けます。

セキュリティ制限

以下のHTMLタグと属性はLaunch時に拒否されます（バリデーションエラーが返されます）。

禁止タグ 理由
<script>、<noscript>、<iframe>、<object>、<embed>、<applet>JavaScript実行およびサンドボックス回避の経路
<form>、<input>、<textarea>、<select>およびその他のフォーム要素フォームキャプチャは非対応
<base>、<meta>、<link>、<title>、<head>、<html>、<body>注入されたフラグメント内では無効なページレベルのタグ
<svg>、<math><script>要素を埋め込める可能性がある
<style>グローバルCSS注入によるUIなりすましやフィッシングオーバーレイの可能性
禁止属性 理由
on*（onclick、onloadなどすべてのインラインイベントハンドラー）インラインイベントハンドラーによるJavaScript実行
href="javascript:..." （すべての要素）URIスキームを経由したJavaScript実行。on*フィルターを回避する可能性がある
srcdocインラインドキュメントの埋め込み
contenteditableUIのなりすまし

プロフィール変数とLiquid構文の使用

HTMLエディターでCDPプロフィール属性を参照し、Liquidテンプレート構文を使用してインラインコンテンツをパーソナライズできます。

<div class="sale-banner">
  {% if rt_profile.imported.loyalty_tier == "gold" %}
    <p>Gold member exclusive: 20% OFF</p>
  {% else %}
    <p>Limited-time offer — Shop now!</p>
  {% endif %}
  <p>Hi {{rt_profile.imported.first_name}}, this deal is just for you.</p>
</div>

変数とLiquid構文の全リファレンスはメッセージコンテンツのパーソナライズを参照してください。

保存の動作

変更は自動保存されません

編集内容はローカルセッションに保持されます。Save as Draft をクリックしてサーバーに保存してください。保存せずに画面を離れると確認ダイアログが表示されます。

ステップ 3 — Launch

  1. キャンペーンの詳細とZone IDを確認します。
  2. Launch をクリックしてキャンペーンを Draft から Live に移行します。

連携しているRT 2.0 Personalizationセクションにキャンペーンペイロードが反映されます。TD Web SDKは対象ユーザーのZone要素をキャンペーンHTMLに差し替えます。

Liveキャンペーンの管理

操作 使用タイミング 結果
Pause配信を一時停止して編集する場合。ステータスが Paused に変わります。自由に編集してから Resume してください。
Resume一時停止中のキャンペーンを再開する場合。ステータスが Live に戻ります。
Completeキャンペーンを恒久的に終了する場合。ステータスが Finished に変わります。ペイロードはRT 2.0から削除され、再アクティベートはできません。
Launch後は変更不可

キャンペーンが Live または Finished になると、メッセージタイプとZone IDは読み取り専用になります。コンテンツを編集するには、先にキャンペーンを一時停止してください。

Web Message Previewerの活用

Zone IDを視覚的に特定し、Launchする前に差し替えHTMLをプレビューするには、Engage Studio — Web Message Previewer Chrome Extensionを使用します。

  1. Chromeでウェブサイトを開きます。
  2. Extensionのサイドパネルを開きます。
  3. Selectタブの Select Element をクリックし、ページ上のターゲット要素をクリックします。
  4. 生成されたCSSセレクターをコピーし、Engage Studioの Zone ID フィールドに貼り付けます。
  5. Previewタブで差し替えHTMLが実際のページにどう表示されるか確認します。

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

Create a Popup Campaign

Personalize Message Content