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

# Produktempfehlungen abrufen

> Erfahren Sie, wie Sie Produktempfehlungen mit der Kameleoon Product Recommendation API in Ihrer Web- oder mobilen Anwendung abrufen und anzeigen.

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](/user-manual/recommendations-and-merchandising/recommendations/use-a-product-recommendation-block-in-a-campaign).

Verwenden Sie den folgenden Endpoint:

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

## Warum die API verwenden?

<Warning>
  Verwenden Sie die API für mobile Anwendungen.
</Warning>

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](../../../feature-experimentation/technical-reference/faq-global#how-do-ad-blockers-affect-kameleoon)**.

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

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

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

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

* 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)

<Warning>
  Generieren Sie diese Werte manuell für Backend-Implementierungen oder Umgebungen ohne Kameleoon Web Experimentation. Details finden Sie im **[Init-Endpoint](../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. 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](/user-manual/recommendations-and-merchandising/recommendations/configure-and-add-a-recommendation-block).

Identifizieren Sie den `recommender_code`.

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

<Warning>
  Die API gibt keine in der Kameleoon App konfigurierten CSS-Stile zurück.
</Warning>

### 3. Anfrage

**Endpoint:**

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

<Note>
  Ersetzen Sie `{recommender_code}` durch den in [Schritt 2](#2-configure-your-product-recommendations) abgerufenen Wert.
</Note>

| Parameter        | Typ           | Erforderlich | Beschreibung                                                                                                                                                                                                                    |
| :--------------- | :------------ | :----------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `did`            | String        | True         | Device-ID                                                                                                                                                                                                                       |
| `shop_id`        | String        | True         | Store Key                                                                                                                                                                                                                       |
| `sid`            | String        | True         | Temporäre Benutzersitzungs-ID                                                                                                                                                                                                   |
| `resize_image`   | Integer       | False        | Bildgröße (px) für die Größenänderung. Unterstützte Werte: `120`, `140`, `160`, `180`, `200`, `220`.                                                                                                                            |
| `extended`       | Integer/Empty | Optional     | Fü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_locations` | Boolean       | False        | Wenn `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:**

```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. Antwort

| Name         | Typ    | Beschreibung                                                                               |
| :----------- | :----- | :----------------------------------------------------------------------------------------- |
| `html`       | string | HTML-Code für den Produktblock. Passen Sie die Vorlage im persönlichen Kameleoon-Konto an. |
| `title`      | string | Blocktitel. Entspricht dem Wert des "Action"-Elements in den Blockregeln.                  |
| `recommends` | array  | Liste der Produkte.                                                                        |
| `id`         | number | Eindeutige Blockkennung. Entspricht der Block-ID im persönlichen Kameleoon-Konto.          |

<Note>
  Wenn `extended = 1`, enthalten Produkte alle **[Produktdetails](../all-endpoints/Recommend/get-product-list#produktfelder)**. Andernfalls gibt die API nur die Produkt-IDs als Strings zurück.
</Note>

<Note>
  Die mobile App kann `html` ignorieren.
</Note>

<Warning>
  Die API gibt kein CSS zurück; Sie müssen die Ausgabe manuell gestalten.
</Warning>

Das folgende Bild zeigt die Produktseite mit der integrierten HTML-Antwort:

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

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

}

```
```