Comment envoyer des événements d’acheteurs à Shoply AI depuis une boutique Shopify headless

Shoply AI suit le comportement des acheteurs (ajout au panier, paiement, consultation de produits, etc.) afin d’améliorer le classement des recherches et les recommandations. Dans les vitrines Shopify standard, cela se fait automatiquement grâce à notre extension Web Pixel . Toutefois, les Shopify Web Pixels ne s’exécutent pas sur les vitrines headless, car ils dépendent du moteur de rendu des vitrines Shopify pour injecter le bac à sable du pixel.

Si vous exploitez une boutique Shopify headless (par exemple avec Next.js, Hydrogen ou un frontend personnalisé), vous devez envoyer ces événements directement depuis le code de votre frontend.

Prérequis

• Vous avez installé Shoply AI et le script Shoply AI est chargé dans votre vitrine.

Envoyer un événement

Une fois le script Shoply AI chargé, il expose automatiquement window.shoplyLogEvent. Appelez-le directement : vous n’avez pas besoin de gérer vous-même les identifiants de session, les clés de boutique ou les points de terminaison de l’API.

window.shoplyLogEvent(eventName, data)

La forme de l’objet data dépend du type d’événement (voir ci-dessous).

Événements indispensables pour le suivi des conversions

product_added_to_cart

Déclenchez cet événement lorsqu’un acheteur ajoute une variante de produit à son panier.

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 vous utilisez le paiement natif de Shopify, vous n’en avez généralement pas besoin, car nous utilisons les événements Web Pixel pour suivre automatiquement la fin du paiement. En revanche, si vous avez votre propre parcours de paiement, déclenchez cet événement lorsqu’un acheteur termine son paiement (par exemple, sur votre page de confirmation de commande).

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"
})

Besoin d’aide ?

N’hésitez pas à prendre rendez-vous avec nous  ; nous vous aiderons à intégrer le suivi des événements à votre vitrine headless.