Recuperar recomendaciones de productos - Kameleoon Documentation

Esta guía explica cómo recuperar recomendaciones de productos usando la Product Recommendation API sin incrustar el elemento HTML de Kameleoon. Consulte la guía de integración visual para el método visual. Utilice el siguiente endpoint:

Retrieve recommendations

¿Por qué usar la API?

Use la API para aplicaciones móviles.

Según sus necesidades, este enfoque ofrece múltiples ventajas:

Control total: Personalice la visualización de la variación para que coincida con sus estándares de diseño y UX.
Mejor rendimiento: Utilice llamadas a la API optimizadas para reducir los retrasos de carga de la página en comparación con las soluciones basadas en script.
Depuración más sencilla: Registre, supervise y depure las integraciones dentro de su base de código del cliente utilizando herramientas estándar.
Sin dependencia de scripts de terceros: Utilice llamadas directas para evitar scripts externos, reducir conflictos potenciales y alinearse con las políticas de seguridad.
Compatible con SPAs: Integre directamente en aplicaciones de una sola página para evitar problemas de tiempo y encajar con el enrutamiento del lado del cliente.
Resistencia frente a bloqueadores de anuncios: Entregue los experimentos de forma consistente sin scripts de terceros ni marcadores HTML específicos. Para más detalles sobre cómo afectan los bloqueadores de anuncios a Kameleoon, consulte las FAQ.

Objetivo

Recuperar recomendaciones del catálogo de productos usando la Product Recommendation API. La siguiente imagen muestra una sección de recomendaciones añadida a una página de producto:

Requisitos

Una cuenta de Kameleoon válida con un Store ID (shop_id).
- Obtenga su shop_id en Recommendations > Settings > Store settings en la aplicación Kameleoon. Contacte con su Customer Success Manager para obtener la clave si es necesario.

Un Device ID (did) y un Session ID (sid). (Obligatorios solo cuando se utilicen filtros o algoritmos que dependan de datos históricos de dispositivo/usuario).
- Para Kameleoon Web Experimentation, obténgalos de las siguientes cookies:
  - KameleoonProducts_device_id → Device ID (did)
  - KameleoonProducts_session_code → Session ID (sid)
- En caso contrario, genere estos valores manualmente.

Pasos

1. Recuperar las cookies (solo Kameleoon Web Experimentation)

Genere estos valores manualmente para implementaciones de backend o entornos sin Kameleoon Web Experimentation. Consulte el endpoint Init para más detalles.

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. Configurar las recomendaciones de productos

Navegue a Recommendations > Product Recommendations > Recommendation Blocks en la aplicación Kameleoon. Para bloques no configurados, siga esta guía. Identifique el recommender_code.

La API no devuelve los estilos CSS configurados en la aplicación Kameleoon.

3. Solicitud de consulta

Endpoint:

GET https://api.products.kameleoon.com/recommend/{%recommender_code%}

Sustituya {recommender_code} por el valor obtenido en el Paso 2.

Parámetro	Tipo	Obligatorio	Descripción
`did`	String	True	Device ID
`shop_id`	String	True	Store Key
`sid`	String	True	ID de sesión temporal del usuario
`resize_image`	Integer	False	Tamaño de imagen (px) para el redimensionado. Valores admitidos: `120`, `140`, `160`, `180`, `200`, `220`.
`extended`	Integer/Empty	Opcional	Añade información extendida para los productos recomendados. Si es `1`, la API devuelve toda la información de los productos. Si está vacío, la API devuelve solo los IDs de los productos.
`with_locations`	Boolean	False	Si es `true` y `extended` también es true, la respuesta incluye `location_ids` para la disponibilidad del producto. Si `extended` falta o es `false`, la API ignora `with_locations` y lo establece por defecto en `false`.

Ejemplo:

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

Nombre	Tipo	Descripción
`html`	string	Código HTML para el bloque de productos. Personalice la plantilla en la cuenta personal de Kameleoon.
`title`	string	Título del bloque. Coincide con el valor del elemento “Action” en las reglas del bloque.
`recommends`	array	Lista de productos.
`id`	number	Identificador único del bloque. Coincide con el ID del bloque en la cuenta personal de Kameleoon.

Si extended = 1, los productos contienen todos los detalles del producto. En caso contrario, la API devuelve solo los IDs de los productos como cadenas.

La aplicación móvil puede ignorar html.

La API no devuelve CSS; debe aplicar estilos al resultado manualmente.

La siguiente imagen muestra la página del producto con la respuesta HTML integrada:

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

}

​¿Por qué usar la API?

​Objetivo

​Requisitos

​Pasos

​1. Recuperar las cookies (solo Kameleoon Web Experimentation)

​2. Configurar las recomendaciones de productos

​3. Solicitud de consulta

​4. Respuesta

​a. Con extended = 0

​b. Con extended = 1

¿Por qué usar la API?

Objetivo

Requisitos

Pasos

1. Recuperar las cookies (solo Kameleoon Web Experimentation)

2. Configurar las recomendaciones de productos

3. Solicitud de consulta

4. Respuesta

a. Con extended = 0

b. Con extended = 1