> ## Documentation Index
> Fetch the complete documentation index at: https://docs.kameleoon.com/llms.txt
> Use this file to discover all available pages before exploring further.

# ウェブサイトで商品コレクションを有効化してデプロイする

> 商品コレクションを有効化し、ソースコードにスニペットを埋め込むか Kameleoon キャンペーンを作成して、ウェブサイトにデプロイします。

[商品コレクションを作成](./create-and-manage-a-product-collection)したら、サイトで表示する必要があります。これには、コレクションの有効化、スニペットのコピー、ソースコードへの埋め込み、または表示を管理するためのキャンペーンの作成が含まれます。

## 1. 商品コレクションを有効化する

デプロイ前に、コレクションがアクティブであることを確認します：

1. **Product collections** ダッシュボードに移動します。
2. デプロイしたいコレクションを開きます。
3. 右上隅の **Enable** をクリックします。

ステータスが **Active** に切り替わります。

## 2. スニペットをコピーする

各コレクションには、ウェブサイトのソースコードに追加する必要があるスニペットが付属しています：

コレクションビューで **Copy code** をクリックします。

ポップインに、サポートされている変数とともにスニペットが表示されます：

* **`data-collection-id`** *（必須）*：コレクションの一意の識別子です。
* **`data-collection-locations`** *（任意）*：商品フィードに複数のロケーションが含まれている場合に必要です。
* **`data-collection-callback`** *（任意）*：成功したリクエストを処理するための JS 関数です。
* **`data-collection-error`** *（任意）*：失敗したリクエストを処理するための JS 関数です。

## 3. ウェブサイトに商品コレクションをデプロイする

商品コレクションをソースコードに挿入するか、Kameleoon キャンペーンを作成できます。

### スニペットをソースコードに埋め込む

コピーしたスニペットをウェブサイトのソースコードの該当箇所に貼り付けます。スニペットは、商品コレクションが表示されるプレースホルダーとして機能します。

* スニペットをページの **HTML ボディ** 内、コレクションを表示したいコンテナ内に配置します。
* コレクションが動的にレンダリングされるよう、サイトが Kameleoon を正しくロードすることを確認してください。

### キャンペーンを作成する

コードエディターを開いて商品コレクションを追加します。

コードエディターの使い方については、[こちらの記事を参照してください](../../experimentation/web-experimentation/code-based-experiments/using-the-code-editor)。