# Inlineキャンペーンの作成 **Inline**キャンペーンは、メッセージをページに直接挿入し、既存のコンテンツを置き換えることでシームレスなネイティブ体験を提供します。セールバナー、カートクーポンリマインダー、商品別プロモーションなど、ページの自然なフローとして表示するコンテンツに活用してください。 Beta In-Browser MessagingはBeta版です。一般提供前に機能やSDKの仕様が変更される場合があります。アクセス方法については、カスタマーサクセス担当までご相談ください。 ## 始める前に キャンペーンを作成する前に[セットアップと前提条件](/ja/products/marketing-cloud/engage-studio/experiences/setup-and-prerequisites)を完了してください。ターゲットとするペアレントセグメント用のRT PersonalizationとセクションがAudience Studioに存在することを確認してください。また、ページのターゲットDOM要素を特定済み、または[Web Message Previewer](/ja/products/marketing-cloud/engage-studio/experiences/chrome-extension) 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](/ja/products/marketing-cloud/engage-studio/experiences/chrome-extension) 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-child | `ul > 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](/ja/products/marketing-cloud/engage-studio/experiences/chrome-extension)で生成したコンテンツを貼り付けます。 #### セキュリティ制限 以下のHTMLタグと属性はLaunch時に拒否されます（バリデーションエラーが返されます）。 | **禁止タグ** | **理由** | | --- | --- | | `