商品コレクションの取得 - Kameleoon Documentation

このガイドでは、Kameleoon HTML要素を埋め込むことなく、Product Recommendation APIを使用して 商品コレクション を取得する方法について説明します。以下のエンドポイントを使用します。

Retrieve collection

なぜAPIを使用するのか？

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

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

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

目的

推奨エンジンから商品コレクションを取得し、フロントエンドにレンダリングします。たとえば、以下の画像はホームページにレンダリングされたコレクションを示しています。

要件

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

ダッシュボードのProduct Collectionsセクションからの collection_id。このセクションには、構成されたコレクションとそのIDが一覧表示されています。

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のみ）

バックエンド実装やKameleoon Web Experimentationを使用しない環境では、これらの値を手動で生成してください。詳細については Initエンドポイント を参照してください。

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. クエリリクエスト

エンドポイント:

GET https://api.products.kameleoon.com/collection/{%collection-id%}

{collection-id} を要件の値に置き換えてください。

パラメータ	型	必須	説明
`shop_id`	String	True	Store Key
`did`	String	False	Device ID
`location`	String	False	ユーザーのロケーション
`sid`	String	False	一時的なユーザーセッションID
`external_id`	String	False	ローカルシステムまたはCRM内のユーザーの一意の識別子。（Kameleoon VisitorCodeとの正確なマッチングを確保するために、まずIDをKameleoon Custom Dataとして保存してください。Custom Dataの設定時に、Use this custom data as a unique identifier for cross-device matching を有効にして、両システム間のユーザーアクティビティを連携させてください）。

プラットフォームをまたいでユーザーごとにコレクションをパーソナライズするには、did の代わりにKameleoon Custom Dataとして設定された external_id を使用してください。

例:

curl -X GET -L 'https://api.products.kameleoon.com/collection/7' \
             -H 'Content-Type: application/json' \
             -d '{
  "did": "abc123-kam-device-id",
  "shop_id": "shop_4567_example",
  "sid": "session_7890_example",
}'

3. レスポンス

名前	型	説明
`products`	オブジェクトの配列	商品情報。各オブジェクトにはこれらのプロパティが含まれます。
`html`	String	コレクションを作成したときのHTMLテンプレート。

モバイルアプリは html を無視できます。

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

例:

{
    "products": [
        {
            "name": "NIKE | TODDLER ROSHE ONE",
            "url": "https:\/\/kameleoon-store.myshopify.com\/products\/nike-toddler-roshe-one?variant=40023417520292&recommended_by=collection&recommended_code=5",
            "category_ids": [
                "1",
                "295508017316"
            ],
            "barcode": "NK-02-black-4",
            "vendor_code": "NI",
            "brand": "Nike",
            "leftovers": "lot",
            "rating": 4,
            "fashion_feature": "child",
            "fashion_wear_type": "shoe",
            "fashion_original_sizes": [
                "4"
            ],
            "picture": "https:\/\/images.products.kameleoon.com\/resize-images\/180\/9fa630bf863db7a87fc6d5fd2a188f\/3919225.jpg",
            "categories": [
                {
                    "id": "1",
                    "url": "https:\/\/kameleoon-store.myshopify.com\/collections\/all?recommended_by=collection&recommended_code=5",
                    "name": "Men",
                    "level": "1",
                    "url_handle": "\/collections\/all?recommended_by=collection&recommended_code=5"
                },
                {
                    "id": "295508017316",
                    "parent_id": "1",
                    "url": "https:\/\/kameleoon-store.myshopify.com\/collections\/all?recommended_by=collection&recommended_code=5",
                    "name": "Men - Sneakers",
                    "level": "2",
                    "url_handle": "\/collections\/all?recommended_by=collection&recommended_code=5"
                }
            ],
            "price_formatted": "$ 70",
            "price_full_formatted": "$ 70.00",
            "price": 70,
            "price_full": 70,
            "image_url": "https:\/\/cdn.shopify.com\/s\/files\/1\/0564\/9180\/2788\/products\/0ea90fb43c087d165cbf985098cc951e_grande.jpg?v=1622707552",
            "image_url_handle": "\/s\/files\/1\/0564\/9180\/2788\/products\/0ea90fb43c087d165cbf985098cc951e_grande.jpg?v=1622707552",
            "image_url_resized": {
                "120": "https:\/\/images.products.kameleoon.com\/resize-images\/120\/9fa630bf863db7a87fc6d5fd2a188f\/3919225.jpg",
                "140": "https:\/\/images.products.kameleoon.com\/resize-images\/140\/9fa630bf863db7a87fc6d5fd2a188f\/3919225.jpg",
                "160": "https:\/\/images.products.kameleoon.com\/resize-images\/160\/9fa630bf863db7a87fc6d5fd2a188f\/3919225.jpg",
                "180": "https:\/\/images.products.kameleoon.com\/resize-images\/180\/9fa630bf863db7a87fc6d5fd2a188f\/3919225.jpg",
                "200": "https:\/\/images.products.kameleoon.com\/resize-images\/200\/9fa630bf863db7a87fc6d5fd2a188f\/3919225.jpg",
                "220": "https:\/\/images.products.kameleoon.com\/resize-images\/220\/9fa630bf863db7a87fc6d5fd2a188f\/3919225.jpg",
                "310": "https:\/\/images.products.kameleoon.com\/resize-images\/310\/9fa630bf863db7a87fc6d5fd2a188f\/3919225.jpg",
                "520": "https:\/\/images.products.kameleoon.com\/resize-images\/520\/9fa630bf863db7a87fc6d5fd2a188f\/3919225.jpg",
                "original": "https:\/\/cdn.shopify.com\/s\/files\/1\/0564\/9180\/2788\/products\/0ea90fb43c087d165cbf985098cc951e_grande.jpg?v=1622707552"
            },
            "url_handle": "\/products\/nike-toddler-roshe-one?variant=40023417520292&recommended_by=collection&recommended_code=5",
            "currency": "$",
            "_id": "3919225",
            "id": "NK-02-black-4",
            "stock_quantity": 19,
            "fashion_colors": [
                "black"
            ],
            "params": [
                {
                    "key": "Size",
                    "values": [
                        "4"
                    ]
                },
                {
                    "key": "Color",
                    "values": [
                        "black"
                    ]
                }
            ],
            "group_id": "02"
        },
        {
            "name": "CONVERSE | TODDLER CHUCK TAYLOR ALL STAR AXEL MID",
            "url": "https:\/\/kameleoon-store.myshopify.com\/products\/converse-chuck-taylor-all-star-ii-hi?variant=40023416471716&recommended_by=collection&recommended_code=5",
            "category_ids": [
                "1",
                "295508017316"
            ],
            "barcode": "C-02-black-13",
            "vendor_code": "CO",
            "brand": "Converse",
            "leftovers": "few",
            "rating": 2,
            "fashion_sizes": [
                "13"
            ],
            "fashion_feature": "adult",
            "fashion_gender": "m",
            "fashion_wear_type": "shoe",
            "fashion_original_sizes": [
                "13"
            ],
            "picture": "https:\/\/images.products.kameleoon.com\/resize-images\/180\/9fa630bf863db7a87fc6d5fd2a188f\/3927216.jpg",
            "categories": [
                {
                    "id": "1",
                    "url": "https:\/\/kameleoon-store.myshopify.com\/collections\/all?recommended_by=collection&recommended_code=5",
                    "name": "Men",
                    "level": "1",
                    "url_handle": "\/collections\/all?recommended_by=collection&recommended_code=5"
                },
                {
                    "id": "295508017316",
                    "parent_id": "1",
                    "url": "https:\/\/kameleoon-store.myshopify.com\/collections\/all?recommended_by=collection&recommended_code=5",
                    "name": "Men - Sneakers",
                    "level": "2",
                    "url_handle": "\/collections\/all?recommended_by=collection&recommended_code=5"
                }
            ],
            "price_formatted": "$ 140",
            "price_full_formatted": "$ 140.00",
            "price": 140,
            "price_full": 140,
            "image_url": "https:\/\/cdn.shopify.com\/s\/files\/1\/0564\/9180\/2788\/products\/23550440c4ccab05e4fc1ebd85e742cc_grande.jpg?v=1622707545",
            "image_url_handle": "\/s\/files\/1\/0564\/9180\/2788\/products\/23550440c4ccab05e4fc1ebd85e742cc_grande.jpg?v=1622707545",
            "image_url_resized": {
                "120": "https:\/\/images.products.kameleoon.com\/resize-images\/120\/9fa630bf863db7a87fc6d5fd2a188f\/3927216.jpg",
                "140": "https:\/\/images.products.kameleoon.com\/resize-images\/140\/9fa630bf863db7a87fc6d5fd2a188f\/3927216.jpg",
                "160": "https:\/\/images.products.kameleoon.com\/resize-images\/160\/9fa630bf863db7a87fc6d5fd2a188f\/3927216.jpg",
                "180": "https:\/\/images.products.kameleoon.com\/resize-images\/180\/9fa630bf863db7a87fc6d5fd2a188f\/3927216.jpg",
                "200": "https:\/\/images.products.kameleoon.com\/resize-images\/200\/9fa630bf863db7a87fc6d5fd2a188f\/3927216.jpg",
                "220": "https:\/\/images.products.kameleoon.com\/resize-images\/220\/9fa630bf863db7a87fc6d5fd2a188f\/3927216.jpg",
                "310": "https:\/\/images.products.kameleoon.com\/resize-images\/310\/9fa630bf863db7a87fc6d5fd2a188f\/3927216.jpg",
                "520": "https:\/\/images.products.kameleoon.com\/resize-images\/520\/9fa630bf863db7a87fc6d5fd2a188f\/3927216.jpg",
                "original": "https:\/\/cdn.shopify.com\/s\/files\/1\/0564\/9180\/2788\/products\/23550440c4ccab05e4fc1ebd85e742cc_grande.jpg?v=1622707545"
            },
            "url_handle": "\/products\/converse-chuck-taylor-all-star-ii-hi?variant=40023416471716&recommended_by=collection&recommended_code=5",
            "currency": "$",
            "_id": "3927216",
            "id": "C-02-black-13",
            "stock_quantity": 5,
            "fashion_colors": [
                "black"
            ],
            "params": [
                {
                    "key": "Size",
                    "values": [
                        "13"
                    ]
                },
                {
                    "key": "Color",
                    "values": [
                        "black"
                    ]
                }
            ],
            "group_id": "04"
        }
    ],
    "html": "<ul class=\"grid grid--uniform grid--view-items\"> <li class=\"grid__item grid__item--collection small--one-half medium-up--one-quarter\"> <div class=\"grid-view-item product-card\"> <a class=\"grid-view-item__link grid-view-item__image-container full-width-link\" href=\"https:\/\/kameleoon-store.myshopify.com\/products\/nike-toddler-roshe-one?variant=40023417520292&recommended_by=collection&recommended_code=5\"><\/a> <div class=\"product-card__image-with-placeholder-wrapper\"> <div class=\"grid-view-item__image-wrapper product-card__image-wrapper js\"> <div style=\"padding-top:100.0%;\"> <img class=\"item_img grid-view-item__image lazyautosizes lazyloaded\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0564\/9180\/2788\/products\/0ea90fb43c087d165cbf985098cc951e_grande.jpg?v=1622707552\" data-aspectratio=\"1.0\"data-widths=\"[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]\" data-sizes=\"auto\"\/> <\/div> <\/div> <\/div> <\/div> <div class=\"h4 grid-view-item__title product-card__title\">NIKE | TODDLER ROSHE ONE <\/div> <div class=\"price price--listing\"> $ 70.00 <\/div> <li class=\"grid__item grid__item--collection small--one-half medium-up--one-quarter\"> <div class=\"grid-view-item product-card\"> <a class=\"grid-view-item__link grid-view-item__image-container full-width-link\" href=\"https:\/\/kameleoon-store.myshopify.com\/products\/converse-chuck-taylor-all-star-ii-hi?variant=40023416471716&recommended_by=collection&recommended_code=5\"><\/a> ... <\/li><\/ul>"
}

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

​目的

​要件

​ステップ

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

​2. クエリリクエスト

​3. レスポンス

なぜAPIを使用するのか？

目的

要件

ステップ

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

2. クエリリクエスト

3. レスポンス