# Popupキャンペーンの作成

**Popup**キャンペーンは、既存のコンテンツを変更せず、ページの上にオーバーレイとしてメッセージを表示し、注目を集めます。ウェルカムオファー、プロモーション告知、お知らせなど、視認性の高いメッセージに活用してください。

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

## 始める前に

キャンペーンを作成する前に[セットアップと前提条件](/ja/products/marketing-cloud/engage-studio/experiences/setup-and-prerequisites)を完了してください。ターゲットとするペアレントセグメント用のRT PersonalizationとセクションがAudience Studioに存在することを確認してください。

## ステップ 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** | Personalization Sectionに定義されたエントリー基準に基づいてリアルタイム配信を制御する、既存のRT 2.0 Personalization。**Preview** をクリックするとAudience StudioでPersonalizationを確認でき、**Create Personalization** をクリックすると新規作成に移動します。 |
| **Personalization Section** | このキャンペーンのコンテンツペイロードを格納するPersonalization内の特定のセクション。セクションが存在しない場合は **Create Section** をクリックして追加します。 |


Personalizationを先に作成してください
Target Audienceの設定は既存のRT 2.0 Personalizationを参照します。このステップを開始する前に、Audience StudioでPersonalizationとセクションを作成しておいてください。

## ステップ 2 — Message Content

### キャンペーン詳細

| **フィールド**  | **必須**  | **説明**  |
|  --- | --- | --- |
| **Message ID** | — | 自動生成された一意の識別子。読み取り専用。 |
| **Name** | ✅ | キャンペーン一覧に表示される名前。最大100文字、ワークスペース内で一意である必要があります。 |
| **Description** | — | キャンペーンに関する社内向けメモ。最大1,000文字。 |
| **Message Type** | ✅ | **Popup** を選択します。この設定はキャンペーン保存後に変更できません。 |


### レイアウト位置

ページ上でポップアップを表示する位置を選択します。

| **Placement**  | **説明**  |
|  --- | --- |
| `center` | ビューポートの中央（デフォルト） |
| `top-left` | 左上コーナー |
| `top-center` | 上部中央 |
| `top-right` | 右上コーナー |
| `bottom-left` | 左下コーナー |
| `bottom-center` | 下部中央 |
| `bottom-right` | 右下コーナー |


**Fixed on Scroll** を有効にすると、ユーザーがスクロールしてもポップアップが固定位置に表示されます。

### アピアランス設定

ポップアップのビジュアルスタイルを設定します。

| **設定項目**  | **説明**  |
|  --- | --- |
| **Desktop max width** | デスクトップ画面でのポップアップ最大幅（デフォルト：600 px）。Beefreeはビューポート幅620 px以上でこの値を`max-width`として使用します。 |
| **Mobile max width** | モバイル画面でのポップアップ最大幅（デフォルト：300 px）。ビューポート幅620 px以下で適用されます。 |
| **Background color** | ポップアップフレームの背景色（16進数カラーコード、6桁または8桁）。 |
| **Background padding** | ポップアップコンテンツとフレーム端の間隔（デフォルト：0 px）。 |
| **Border radius** | ポップアップフレームの角の丸み（デフォルト：8 px）。 |
| **Close button** | 閉じるボタンのオン/オフを切り替えます。有効にした場合、ボタンの色を設定できます。閉じるボタンはSDKによってレンダリングされ、ドラッグアンドドロップエディターのコンテンツには含まれません。 |
| **Overlay** | ポップアップの背後に背景オーバーレイを表示するかどうかを切り替えます。有効にした場合、**Close on click outside** も有効にすると、オーバーレイクリックでポップアップを閉じることができます。 |


閉じる手段なし
閉じるボタンが無効**かつ**オーバーレイクリックでの閉じる機能も無効の場合、ユーザーはポップアップを閉じることができません。この設定の場合、UIに警告が表示されます。

### コンテンツエディター（ドラッグアンドドロップ）

キャンペーンの詳細を設定すると **Popup Message Editor** が開きます。ドラッグアンドドロップキャンバス（Beefree搭載）が左右2分割のレイアウトで表示されます。

Popup Message Editor。左パネルにMessage Appearance Settings（Location & PositioningとWidth設定）、中央にポップアップキャンバス、右パネルにCONTENT/ROWS/SETTINGSタブが表示されています。
**左パネル — Message Appearance Settings**

ポップアップの表示スタイルを設定します。

#### レイアウト位置

ページ上でポップアップを表示する位置を選択します。

| **Placement**  | **説明**  |
|  --- | --- |
| `center` | ビューポートの中央（デフォルト） |
| `top-left` | 左上コーナー |
| `top-center` | 上部中央 |
| `top-right` | 右上コーナー |
| `bottom-left` | 左下コーナー |
| `bottom-center` | 下部中央 |
| `bottom-right` | 右下コーナー |


**Position fixed on scroll** を有効にすると、ユーザーがスクロールしてもポップアップが固定位置に表示されます。

#### アピアランス設定

| **設定項目**  | **説明**  |
|  --- | --- |
| **Desktop max width** | デスクトップ画面でのポップアップ最大幅（デフォルト：600 px）。Beefreeはビューポート幅620 px以上でこの値を`max-width`として使用します。 |
| **Mobile max width** | モバイル画面でのポップアップ最大幅（デフォルト：300 px）。ビューポート幅620 px以下で適用されます。 |
| **Background color** | ポップアップフレームの背景色（16進数カラーコード、6桁または8桁）。 |
| **Background padding** | ポップアップコンテンツとフレーム端の間隔（デフォルト：0 px）。 |
| **Border radius** | ポップアップフレームの角の丸み（デフォルト：8 px）。 |
| **Close button** | 閉じるボタンのオン/オフを切り替えます。有効にした場合、ボタンの色を設定できます。閉じるボタンはSDKによってレンダリングされ、ドラッグアンドドロップエディターのコンテンツには含まれません。 |
| **Overlay** | ポップアップの背後に背景オーバーレイを表示するかどうかを切り替えます。有効にした場合、**Close on click outside** も有効にすると、オーバーレイクリックでポップアップを閉じることができます。 |


閉じる手段なし
閉じるボタンが無効**かつ**オーバーレイクリックでの閉じる機能も無効の場合、ユーザーはポップアップを閉じることができません。この設定の場合、UIに警告が表示されます。

**右パネル — コンテンツエディタータブ**

- **CONTENT** — テキスト、画像、ボタン、区切り線、HTMLブロックなどのコンテンツブロックを追加・配置します。
- **ROWS** — レイアウト行（1カラム、複数カラムなど）を選択・設定します。
- **SETTINGS** — フォント、背景色、リンク色のグローバルスタイルを設定します。


保存前にツールバーの **Preview Mode** でデスクトップビューとモバイルビューを切り替えて確認できます。

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

コンテンツ内のCDPプロフィール属性を参照してメッセージをパーソナライズできます。任意のテキストブロックに`{{`と入力すると変数ピッカーが開きます。または直接変数を入力することもできます。

```
{{rt_profile.imported.first_name}}
{{rt_profile.imported.loyalty_tier}}
```

変数の全リファレンスは[メッセージコンテンツのパーソナライズ](/ja/products/marketing-cloud/engage-studio/experiences/personalize-message-content)を参照してください。

### 保存の動作

変更は自動保存されません
編集内容はローカルセッションに保持されます。**Save as Draft** をクリックしたときのみサーバーに保存されます。保存せずに画面を離れようとすると、未保存の変更が失われることを警告するダイアログが表示されます。

## ステップ 3 — Launch

コンテンツが完成し下書きとして保存されたら：

1. キャンペーンの概要を確認します。
2. **Launch** をクリックしてステータスを **Draft** から **Live** に変更します。


Engage Studioは連携しているRT 2.0 Personalizationセクションにキャンペーンペイロードを自動的に反映します。TD Web SDKはすぐに対象ユーザーへのポップアップ配信を開始します。

## Liveキャンペーンの管理

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


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

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

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

**Draft** または **Finished** ステータスのキャンペーンは削除できます。**Live** および **Paused** のキャンペーンは削除できません。