メインコンテンツへスキップ
このガイドでは、Kameleoon HTML要素を埋め込むことなく、Product Recommendation APIを使用して 商品レコメンデーション を取得する方法について説明します。ビジュアル方式については、ビジュアル統合ガイドを参照してください。 以下のエンドポイントを使用します。

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

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

​
目的

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

​
要件

  • Store ID (shop_id) を持つ有効なKameleoonアカウント。
    • Kameleoonアプリの Recommendations > Settings > Store settings から shop_id を取得してください。必要に応じてキーについてカスタマーサクセスマネージャーにお問い合わせください。
Store Key
  • 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. 商品レコメンデーションを構成する

Kameleoonアプリの Recommendations > Product Recommendations > Recommendation Blocks に移動します。 未構成のブロックについては、このガイドに従ってください。 recommender_code を特定します。
Recommender Code
APIはKameleoonアプリで設定されたCSSスタイルを返しません。

​
3. クエリリクエスト

エンドポイント: 
GET https://api.products.kameleoon.com/recommend/{%recommender_code%}
{recommender_code} を ステップ 2 で取得した値に置き換えてください。
パラメータ型必須説明
didStringTrueDevice ID
shop_idStringTrueStore Key
sidStringTrue一時的なユーザーセッションID
resize_imageIntegerFalseリサイズ用の画像サイズ（px）。サポートされる値: 120、140、160、180、200、220。
extendedInteger/EmptyOptional推奨商品の拡張情報を追加します。1 の場合、APIはすべての商品情報を返します。空の場合、APIは商品IDのみを返します。
with_locationsBooleanFalsetrue で extended も true の場合、レスポンスには商品の在庫状況の location_ids が含まれます。extended が指定されていないか false の場合、APIは with_locations を無視し、デフォルトの false になります。
例: 
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. レスポンス

名前型説明
htmlstring商品ブロック用のHTMLコード。Kameleoonの個人アカウントでテンプレートをカスタマイズしてください。
titlestringブロックタイトル。ブロックルールの「Action」要素の値と一致します。
recommendsarray商品のリスト。
idnumber一意のブロック識別子。Kameleoonの個人アカウントのブロックIDと一致します。
extended = 1 の場合、商品にはすべての 商品の詳細 が含まれます。そうでない場合、APIは商品IDのみを文字列として返します。
モバイルアプリは html を無視できます。
APIはCSSを返さないため、出力のスタイルは手動で設定する必要があります。
以下の画像は、統合されたHTMLレスポンスを含む商品ページを示しています。
Product Page with Recommendations

​
a. extended = 0 の場合

{
    "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 の場合

{
    "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>"
}