> ## 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.

# 商品レコメンデーションの取得

> Web またはモバイルアプリケーションで、Kameleoon Product Recommendation APIを使用して商品レコメンデーションを取得・表示する方法を学びます。

このガイドでは、Kameleoon HTML要素を埋め込むことなく、Product Recommendation APIを使用して **商品レコメンデーション** を取得する方法について説明します。ビジュアル方式については、[ビジュアル統合ガイド](/user-manual/recommendations-and-merchandising/recommendations/use-a-product-recommendation-block-in-a-campaign)を参照してください。

以下のエンドポイントを使用します。

* **[Retrieve recommendations](../all-endpoints/Recommend/get-recommend)**

## なぜAPIを使用するのか？

<Warning>
  モバイルアプリケーションではAPIを使用してください。
</Warning>

ニーズに応じて、このアプローチには複数の利点があります。

* **完全な制御**: デザインとUX基準に合わせてバリエーション表示をカスタマイズできます。
* **より優れたパフォーマンス**: スクリプトベースのソリューションと比較して、最適化されたAPI呼び出しによりページ読み込み遅延を低減します。
* **デバッグの容易さ**: 標準ツールを使用して、クライアントのコードベース内で統合をログ記録、監視、デバッグできます。
* **サードパーティスクリプトへの非依存**: 直接呼び出しを使用することで、外部スクリプトを回避し、潜在的な競合を減らし、セキュリティポリシーに準拠できます。
* **SPA対応**: シングルページアプリケーションに直接統合することで、タイミングの問題を回避し、クライアント側ルーティングに適合します。
* **広告ブロッカーに強い**: サードパーティスクリプトや特定のHTMLマーカーなしで、実験を一貫して配信します。広告ブロッカーがKameleoonに与える影響の詳細については、**[FAQ](../../../feature-experimentation/technical-reference/faq-global#how-do-ad-blockers-affect-kameleoon)** を参照してください。

## 目的

Product Recommendation APIを使用して、商品カタログからレコメンデーションを取得します。以下の画像は、商品ページに追加されたレコメンデーションセクションを示しています。

<Frame>
  ![Product Page without Recommendations](https://storage.googleapis.com/kameleoon-storage-documentation/developers/images/api-tutorial/product-page-without-recommendations.jpg)
</Frame>

## 要件

* **Store ID (`shop_id`)** を持つ有効なKameleoonアカウント。
  * Kameleoonアプリの **Recommendations** > **Settings** > **Store settings** から `shop_id` を取得してください。必要に応じてキーについてカスタマーサクセスマネージャーにお問い合わせください。

<Frame>
  ![Store Key](https://storage.googleapis.com/kameleoon-storage-documentation/developers/images/api-tutorial/store-key.jpg)
</Frame>

* **Device ID (`did`)** および **Session ID (`sid`)**。（履歴的なデバイス／ユーザーデータに依存するフィルターまたはアルゴリズムを使用する場合のみ必要）。
  * **Kameleoon Web Experimentation** の場合、以下のクッキーから取得します。
    * `KameleoonProducts_device_id` → **Device ID (`did`)**
    * `KameleoonProducts_session_code` → **Session ID (`sid`)**
  * それ以外の場合は、これらの値を手動で生成してください。

## ステップ

### 1. クッキーを取得する（Kameleoon Web Experimentationのみ）

<Warning>
  バックエンド実装やKameleoon Web Experimentationを使用しない環境では、これらの値を手動で生成してください。詳細については **[Initエンドポイント](../all-endpoints/Initialize/init)** を参照してください。
</Warning>

```javascript theme={null}
function getCookie(name) {
  const match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
  if (match) return match[2];
}
const did = getCookie('KameleoonProducts_device_id');
const sid = getCookie('KameleoonProducts_session_code');
```

### 2. 商品レコメンデーションを構成する

Kameleoonアプリの **Recommendations** > **Product Recommendations** > **Recommendation Blocks** に移動します。

未構成のブロックについては、[このガイド](/user-manual/recommendations-and-merchandising/recommendations/configure-and-add-a-recommendation-block)に従ってください。

`recommender_code` を特定します。

<Frame>
  ![Recommender Code](https://storage.googleapis.com/kameleoon-storage-documentation/developers/images/api-tutorial/recommender-code.jpg)
</Frame>

<Warning>
  APIはKameleoonアプリで設定されたCSSスタイルを返しません。
</Warning>

### 3. クエリリクエスト

**エンドポイント:**

```sqlite3 theme={null}
GET https://api.products.kameleoon.com/recommend/{%recommender_code%}
```

<Note>
  `{recommender_code}` を [ステップ 2](#2-configure-your-product-recommendations) で取得した値に置き換えてください。
</Note>

| パラメータ            | 型             | 必須       | 説明                                                                                                                                                      |
| :--------------- | :------------ | :------- | :------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `did`            | String        | True     | Device ID                                                                                                                                               |
| `shop_id`        | String        | True     | Store Key                                                                                                                                               |
| `sid`            | String        | True     | 一時的なユーザーセッションID                                                                                                                                         |
| `resize_image`   | Integer       | False    | リサイズ用の画像サイズ（px）。サポートされる値: `120`、`140`、`160`、`180`、`200`、`220`。                                                                                          |
| `extended`       | Integer/Empty | Optional | 推奨商品の拡張情報を追加します。`1` の場合、APIはすべての商品情報を返します。空の場合、APIは商品IDのみを返します。                                                                                         |
| `with_locations` | Boolean       | False    | `true` で `extended` も true の場合、レスポンスには商品の在庫状況の `location_ids` が含まれます。`extended` が指定されていないか `false` の場合、APIは `with_locations` を無視し、デフォルトの `false` になります。 |

**例:**

```bash theme={null}
curl -X GET -L 'https://api.products.kameleoon.com/recommend/trending_products_01' \
             -H 'Content-Type: application/json' \
             -d '{
  "did": "abc123-kam-device-id",
  "shop_id": "shop_4567_example",
  "sid": "session_7890_example",
}'
```

### 4. レスポンス

| 名前           | 型      | 説明                                                     |
| :----------- | :----- | :----------------------------------------------------- |
| `html`       | string | 商品ブロック用のHTMLコード。Kameleoonの個人アカウントでテンプレートをカスタマイズしてください。 |
| `title`      | string | ブロックタイトル。ブロックルールの「Action」要素の値と一致します。                   |
| `recommends` | array  | 商品のリスト。                                                |
| `id`         | number | 一意のブロック識別子。Kameleoonの個人アカウントのブロックIDと一致します。             |

<Note>
  `extended = 1` の場合、商品にはすべての **[商品の詳細](../all-endpoints/Recommend/get-product-list#商品フィールド)** が含まれます。そうでない場合、APIは商品IDのみを文字列として返します。
</Note>

<Note>
  モバイルアプリは `html` を無視できます。
</Note>

<Warning>
  APIはCSSを返さないため、出力のスタイルは手動で設定する必要があります。
</Warning>

以下の画像は、統合されたHTMLレスポンスを含む商品ページを示しています。

<Frame>
  ![Product Page with Recommendations](https://storage.googleapis.com/kameleoon-storage-documentation/developers/images/api-tutorial/product-page-with-recommendations.jpg)
</Frame>

#### a. extended = 0 の場合

```json theme={null}
{
    "id": 2476,
    "recommends": [
        "AsTi-01-black-4",
        "C-02-black-7",
        "C-01-white-8",
        "VN-09-beige-4",
        "DM-03-red-6",
        "DM-02-black-5"
    ],
    "title": "Popular products",
    "link": "",
    "html": "<div class=\"kn-reco-block_2476\"> ... <\/div>"
}
```

#### b. extended = 1 の場合

```json theme={null}
{
    "id": 870,
    "recommends": [
        {
            "name": "CONVERSE | TODDLER CHUCK TAYLOR ALL STAR AXEL MID",
            "url": "https://kameleoon-store.myshopify.com/products/converse-toddler-chuck-taylor-all-star-axel-mid?variant=40023417028772&recommended_by=dynamic&recommended_code=bdf46866294e4b8733eb2c2084423967",
            "category_ids": [
                "1",
                "295508017316"
            ],
            "barcode": "C-03-black-5",
            "vendor_code": "CO",
            "brand": "Converse",
            "leftovers": "few",
            "rating": 5,
            "picture": "https://images.products.kameleoon.com/resize-images/180/9fa630bf863db7a87fc6d5fd2a188f/3919221.jpg",
            "price_formatted": "$ 70",
            "price": 70,
            "currency": "$",
            "id": "C-03-black-5"
        }
    ],
    "title": "Popular Products",
    "link": "",
    "html": "<section class=\"KameleoonProducts-recommend\"> ... <\/section>"
}
```