# ページとコンテンツスポット

ページとコンテンツスポットは、ウェブサイト上でパーソナライズドコンテンツが表示される場所を定義します。**ページ**は登録されたウェブサイトURLであり、**コンテンツスポット**はそのページ上の特定のDOM要素で、パーソナライズドコンテンツを表示できる場所です。ページとコンテンツスポットは、Personalization Studioの**Assets**エリアで管理されます。

ページとコンテンツスポットは一度登録すれば、すべてのキャンペーンで再利用できます。

## 前提条件

ページを登録する前に、以下を確認してください：

- ウェブサイトに[Web SDKがインストール](/ja/products/marketing-cloud/personalization-studio/web-sdk-integration)されていること。
- [ブラウザセキュリティの回避策](/ja/products/marketing-cloud/personalization-studio/web-sdk-integration#browser-security--embedding-workarounds)が設定されていること（Visual Selectorに必要）。
- ターゲットDOM要素に安定したHTML `id` 属性があること。


## ページの追加

チームコラボレーション
ページを登録する前に、Web DeveloperとDigital Marketerは、どのページとコンテンツエリアをパーソナライズするか確認してください。Digital Marketerはキャンペーン目標とどのページエリアがコンバージョンを促進するかを理解しており、Web DeveloperはDOM構造と要素の安定性を理解しています。

1. Personalization Studioの**Assets > Pages**に移動します。
2. **Add Page**をクリックします。
3. **ページ名**を入力します — Personalization Studio全体で一意である必要があります。
4. **正確なページURL**を入力します — 単一のURLのみ、ワイルドカードは使用できません（例：`example.com/products/shoes`、`example.com/products/*`は不可）。
5. **Open Visual Selector**をクリックします — ウェブサイトが埋め込みビューで読み込まれます。
6. Visual Selectorで、パーソナライズしたい**DOM要素をクリック**します。セレクターは`id`属性で要素をターゲットにします。
7. 各コンテンツスポットに説明的な**名前を付けます**（例：「Hero Banner」、「Sidebar CTA」、「Welcome Text」）。
8. **Save**をクリックします — ページとそのコンテンツスポットがキャンペーンウィザードで使用可能になります。


Personalization Studioのページ登録。ウェブサイト上にコンテンツスポットが定義されたVisual Selectorが表示されている
## Visual Selectorの使用

Visual Selectorは、コンテンツスポットを特定するための主要なツールです。Visual Selectorを開くと：

- ウェブサイトがPersonalization Studio内の埋め込みビューで読み込まれます。
- 任意のDOM要素をクリックしてコンテンツスポットとして選択します。
- 選択された各要素はHTML `id` 属性で識別されます。
- 各コンテンツスポットに目的を説明する人間が読める名前を付けます。


### コンテンツスポットのベストプラクティス

| **推奨**  | **非推奨** |
|  --- | --- |
| 安定した`id`または`class`属性を持つ要素を使用する。 | IDのない要素に依存する（位置ベースのセレクターは壊れる可能性があります）。 |
| 本番環境の前にステージング環境でコンテンツスポットをテストする。 | 検証なしでスポットが動作すると仮定する。 |
| 選択後にDigital Marketerとコンテンツスポットを確認する。 | ステークホルダーの合意なしにスポットを登録する。 |


## 削除ルール

Personalization Studioはページとコンテンツスポットの参照整合性を強制します：

- **アクティブなキャンペーン**で参照されているページとコンテンツスポットは削除できません。システムは削除をブロックし、参照しているキャンペーンを一覧表示します。
- ページを削除すると、そのすべてのコンテンツスポットが**削除**されます。
- クリエイティブアセット（画像）はカスケード削除**されません** — 独立したオブジェクトです。


## 制限事項

注意
Single Page Application（SPA）は現在サポートされていません。Visual Selectorは、各URLが単一のページ状態にマッピングされる従来のサーバーレンダリングページで動作します。