Cómo enviar eventos de compradores a Shoply AI desde una tienda Shopify headless

Shoply AI realiza un seguimiento del comportamiento de los compradores (añadir al carrito, finalizar compra, vistas de producto, etc.) para mejorar la clasificación de las búsquedas y las recomendaciones. En los escaparates Shopify estándar, esto sucede automáticamente mediante nuestra extensión Web Pixel . Sin embargo, Shopify Web Pixels no se ejecuta en escaparates headless porque depende del motor de renderizado de escaparates de Shopify para insertar el entorno aislado del píxel.

Si utilizas una tienda Shopify headless (por ejemplo, con Next.js, Hydrogen o un frontend personalizado), debes enviar estos eventos directamente desde el código de tu frontend.

Requisitos previos

Has instalado Shoply AI y el script de Shoply AI está cargado en tu escaparate.

Enviar un evento

Una vez cargado el script de Shoply AI, expone automáticamente window.shoplyLogEvent. Llámalo directamente: no necesitas gestionar por tu cuenta IDs de sesión, claves de tienda ni puntos finales de API:


window.shoplyLogEvent(eventName, data)

La estructura del objeto data depende del tipo de evento (consulta más abajo).

Eventos imprescindibles para admitir el seguimiento de conversiones

`product_added_to_cart`

Activa este evento cuando un comprador añada una variante de producto a su carrito.


await window.shoplyLogEvent('product_added_to_cart', {
  "cartLine": {
    "cost": {
      "totalAmount": {
        "amount": 769,
        "currencyCode": "USD"
      }
    },
    "merchandise": {
      "id": "42553607094387",  // Variant ID
      "title": "25.5 Mondo",
      "price": {
        "amount": 769,
        "currencyCode": "USD"
      },
      "product": {
        "id": "7834124058739"  // Product ID
      }
    },
    "quantity": 1
  },
  "clientId": "35214700-144e-4022-974e-fe008736e973",  // Not used
  "referrer": "https://demo.shoplyai.ai/collections/all"
})

`checkout_completed`

Si utilizas el proceso de pago nativo de Shopify, normalmente no necesitas esto, ya que utilizamos eventos de web pixel para realizar el seguimiento de la finalización de la compra automáticamente. Sin embargo, si tienes tu propio flujo de pago, activa este evento cuando un comprador complete el pago (por ejemplo, en la página de confirmación de pedido).


await window.shoplyLogEvent('checkout_completed', {
  "token": "8cea7db9ce551f0a8c9113a0f7f2dce0",  // Not used
  "order": {
    "id": "7251060916339",  // Shopify Order ID
    "customer": {
      "id": "9903183265907",  // Shopify Customer ID
      "isFirstOrder": true
    }
  },
  "lineItems": [
    {
      "finalLinePrice": {
        "amount": 1538,
        "currencyCode": "USD"
      },
      "quantity": 2,
      "variant": {
        "id": "42553607094387",  // Variant ID
        "title": "25.5 Mondo",
        "price": {
          "amount": 769,
          "currencyCode": "USD"
        },
        "product": {
          "id": "7834124058739"  // Product ID
        }
      }
    },
    {
      "finalLinePrice": {
        "amount": 384.93,
        "currencyCode": "USD"
      },
      "quantity": 1,
      "variant": {
        "id": "42553643958387",
        "title": "157 CM",
        "price": {
          "amount": 384.93,
          "currencyCode": "USD"
        },
        "product": {
          "id": "7834140180595"
        }
      }
    }
  ],
  "clientId": "35214700-144e-4022-974e-fe008736e973",  // Not used
  "referrer": "https://demo.shoplyai.ai/cart"
})

¿Necesitas ayuda?

No dudes en reservar una reunión con nosotros y te ayudaremos a integrar el seguimiento de eventos en tu escaparate headless.