Passer au contenu principal
Ce guide explique comment récupérer des recommandations de produits à l’aide de la Product Recommendation API sans intégrer l’élément HTML Kameleoon. Consultez le guide d’intégration visuelle pour la méthode visuelle. Utilisez l’endpoint suivant :

​
Pourquoi utiliser l’API ?

Utilisez l’API pour les applications mobiles.
Selon vos besoins, cette approche offre plusieurs avantages :
  • Contrôle total : personnalisez l’affichage de la variation pour correspondre à vos standards de design et d’UX.
  • Meilleures performances : utilisez des appels API optimisés pour réduire les délais de chargement des pages par rapport aux solutions basées sur des scripts.
  • Débogage plus facile : journalisez, surveillez et déboguez les intégrations dans votre base de code client à l’aide d’outils standards.
  • Aucune dépendance à un script tiers : utilisez des appels directs pour éviter les scripts externes, réduire les conflits potentiels et vous aligner sur les politiques de sécurité.
  • Compatible SPA : intégrez directement dans les applications monopage pour éviter les problèmes de timing et vous adapter au routage côté client.
  • Résilience face aux ad blockers : diffusez les expériences de manière cohérente sans scripts tiers ni marqueurs HTML spécifiques. Pour plus de détails sur l’impact des ad blockers sur Kameleoon, consultez la FAQ.

​
Objectif

Récupérez des recommandations depuis le catalogue de produits à l’aide de la Product Recommendation API. L’image suivante montre une section de recommandations ajoutée à une page produit :
Product Page without Recommendations

​
Prérequis

  • Un compte Kameleoon valide avec un Store ID (shop_id).
    • Obtenez votre shop_id dans Recommendations > Settings > Store settings dans l’application Kameleoon. Contactez votre Customer Success Manager pour obtenir la clé si nécessaire.
Store Key
  • Un Device ID (did) et un Session ID (sid). (Requis uniquement lors de l’utilisation de filtres ou d’algorithmes reposant sur des données historiques de l’appareil/de l’utilisateur).
    • Pour Kameleoon Web Experimentation, obtenez-les à partir des cookies suivants :
      • KameleoonProducts_device_id → Device ID (did)
      • KameleoonProducts_session_code → Session ID (sid)
    • Sinon, générez ces valeurs manuellement.

​
Étapes

​
1. Récupérer les cookies (Kameleoon Web Experimentation uniquement)

Générez ces valeurs manuellement pour les implémentations backend ou les environnements sans Kameleoon Web Experimentation. Consultez l’endpoint Init pour plus de détails.
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. Configurer vos recommandations de produits

Accédez à Recommendations > Product Recommendations > Recommendation Blocks dans l’application Kameleoon. Pour les blocs non configurés, suivez ce guide. Identifiez le recommender_code.
Recommender Code
L’API ne renvoie pas les styles CSS configurés dans l’application Kameleoon.

​
3. Requête

Endpoint : 
GET https://api.products.kameleoon.com/recommend/{%recommender_code%}
Remplacez {recommender_code} par la valeur récupérée à l’Étape 2.
ParamètreTypeRequisDescription
didStringTrueDevice ID
shop_idStringTrueStore Key
sidStringTrueID de session utilisateur temporaire
resize_imageIntegerFalseTaille de l’image (px) pour le redimensionnement. Valeurs prises en charge : 120, 140, 160, 180, 200, 220.
extendedInteger/EmptyOptionnelAjoute des informations étendues pour les produits recommandés. Si 1, l’API renvoie toutes les informations sur le produit. Si vide, l’API ne renvoie que les IDs des produits.
with_locationsBooleanFalseSi true et que extended est également true, la réponse inclut location_ids pour la disponibilité des produits. Si extended est manquant ou false, l’API ignore with_locations et utilise false par défaut.
Exemple : 
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. Réponse

NomTypeDescription
htmlstringCode HTML pour le bloc de produits. Personnalisez le template dans le compte personnel Kameleoon.
titlestringTitre du bloc. Correspond à la valeur de l’élément “Action” dans les règles du bloc.
recommendsarrayListe des produits.
idnumberIdentifiant unique du bloc. Correspond à l’ID du bloc dans le compte personnel Kameleoon.
Si extended = 1, les produits contiennent tous les détails du produit. Sinon, l’API ne renvoie que les IDs des produits sous forme de chaînes.
L’application mobile peut ignorer html.
L’API ne renvoie pas de CSS ; vous devez styliser la sortie manuellement.
L’image suivante montre la page produit avec la réponse HTML intégrée :
Product Page with Recommendations

​
a. Avec 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. Avec 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>"
}
}