Zum Hauptinhalt springen
Diese Anleitung erklärt, wie Sie Produktempfehlungen mithilfe der Product Recommendation API abrufen, ohne das Kameleoon-HTML-Element einzubetten. Die visuelle Methode finden Sie im visuellen Integrationsleitfaden. Verwenden Sie den folgenden Endpoint:

​
Warum die API verwenden?

Verwenden Sie die API für mobile Anwendungen.
Je nach Ihren Anforderungen bietet dieser Ansatz mehrere Vorteile:
  • Vollständige Kontrolle: Passen Sie die Anzeige der Variation an Ihre Design- und UX-Standards an.
  • Bessere Leistung: Verwenden Sie optimierte API-Aufrufe, um Seitenladeverzögerungen im Vergleich zu skriptbasierten Lösungen zu reduzieren.
  • Einfacheres Debugging: Protokollieren, überwachen und debuggen Sie Integrationen innerhalb Ihrer Client-Codebasis mit Standardwerkzeugen.
  • Keine Abhängigkeit von Drittanbieter-Skripten: Verwenden Sie direkte Aufrufe, um externe Skripte zu vermeiden, potenzielle Konflikte zu reduzieren und mit Sicherheitsrichtlinien übereinzustimmen.
  • SPA-freundlich: Integrieren Sie direkt in Single-Page-Anwendungen, um Timing-Probleme zu vermeiden und in das clientseitige Routing zu passen.
  • Widerstandsfähigkeit gegen Ad Blocker: Liefern Sie Experimente konsistent ohne Drittanbieter-Skripte oder spezifische HTML-Marker. Weitere Details darüber, wie Ad Blocker Kameleoon beeinflussen, finden Sie in den FAQ.

​
Ziel

Rufen Sie Empfehlungen aus dem Produktkatalog mithilfe der Product Recommendation API ab. Das folgende Bild zeigt einen Empfehlungsbereich, der einer Produktseite hinzugefügt wurde:
Product Page without Recommendations

​
Voraussetzungen

  • Ein gültiges Kameleoon-Konto mit einer Store-ID (shop_id).
    • Holen Sie Ihre shop_id in Recommendations > Settings > Store settings in der Kameleoon App. Kontaktieren Sie Ihren Customer Success Manager, falls erforderlich, um den Schlüssel zu erhalten.
Store Key
  • Eine Device-ID (did) und eine Session-ID (sid). (Nur erforderlich, wenn Filter oder Algorithmen verwendet werden, die auf historischen Geräte-/Benutzerdaten basieren).
    • Für Kameleoon Web Experimentation holen Sie diese aus den folgenden Cookies:
      • KameleoonProducts_device_id → Device-ID (did)
      • KameleoonProducts_session_code → Session-ID (sid)
    • Andernfalls generieren Sie diese Werte manuell.

​
Schritte

​
1. Cookies abrufen (nur Kameleoon Web Experimentation)

Generieren Sie diese Werte manuell für Backend-Implementierungen oder Umgebungen ohne Kameleoon Web Experimentation. Details finden Sie im Init-Endpoint.
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. Ihre Produktempfehlungen konfigurieren

Navigieren Sie in der Kameleoon App zu Recommendations > Product Recommendations > Recommendation Blocks. Für nicht konfigurierte Blöcke folgen Sie dieser Anleitung. Identifizieren Sie den recommender_code.
Recommender Code
Die API gibt keine in der Kameleoon App konfigurierten CSS-Stile zurück.

​
3. Anfrage

Endpoint: 
GET https://api.products.kameleoon.com/recommend/{%recommender_code%}
Ersetzen Sie {recommender_code} durch den in Schritt 2 abgerufenen Wert.
ParameterTypErforderlichBeschreibung
didStringTrueDevice-ID
shop_idStringTrueStore Key
sidStringTrueTemporäre Benutzersitzungs-ID
resize_imageIntegerFalseBildgröße (px) für die Größenänderung. Unterstützte Werte: 120, 140, 160, 180, 200, 220.
extendedInteger/EmptyOptionalFügt erweiterte Informationen für empfohlene Produkte hinzu. Bei 1 gibt die API alle Produktinformationen zurück. Wenn leer, gibt die API nur Produkt-IDs zurück.
with_locationsBooleanFalseWenn true und extended ebenfalls true ist, enthält die Antwort location_ids für die Produktverfügbarkeit. Wenn extended fehlt oder false ist, ignoriert die API with_locations und verwendet standardmäßig false.
Beispiel: 
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. Antwort

NameTypBeschreibung
htmlstringHTML-Code für den Produktblock. Passen Sie die Vorlage im persönlichen Kameleoon-Konto an.
titlestringBlocktitel. Entspricht dem Wert des “Action”-Elements in den Blockregeln.
recommendsarrayListe der Produkte.
idnumberEindeutige Blockkennung. Entspricht der Block-ID im persönlichen Kameleoon-Konto.
Wenn extended = 1, enthalten Produkte alle Produktdetails. Andernfalls gibt die API nur die Produkt-IDs als Strings zurück.
Die mobile App kann html ignorieren.
Die API gibt kein CSS zurück; Sie müssen die Ausgabe manuell gestalten.
Das folgende Bild zeigt die Produktseite mit der integrierten HTML-Antwort:
Product Page with Recommendations

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