Shoppergebeurtenissen vanuit een headless Shopify-winkel naar Shoply AI sturen

Shoply AI houdt het gedrag van shoppers bij (toevoegen aan winkelwagen, afrekenen, productweergaven enzovoort) om de zoekrangschikking en aanbevelingen te verbeteren. In standaard Shopify-webwinkels gebeurt dit automatisch via onze Web Pixel-extensie . Shopify Web Pixels worden echter niet uitgevoerd in headless storefronts, omdat ze afhankelijk zijn van de storefront-renderengine van Shopify om de pixel-sandbox te injecteren.

Als je een headless Shopify-winkel gebruikt (bijvoorbeeld met Next.js, Hydrogen of een aangepaste frontend), moet je deze gebeurtenissen rechtstreeks vanuit je frontendcode versturen.

Vereisten

Je hebt Shoply AI geïnstalleerd en het Shoply AI-script wordt op je storefront geladen.

Een gebeurtenis versturen

Zodra het Shoply AI-script is geladen, maakt het automatisch window.shoplyLogEvent beschikbaar. Roep dit rechtstreeks aan — je hoeft zelf geen sessie-ID’s, storesleutels of API-eindpunten te beheren:


window.shoplyLogEvent(eventName, data)

De vorm van het object data hangt af van het type gebeurtenis (zie hieronder).

Vereiste gebeurtenissen voor conversietracking

`product_added_to_cart`

Activeer deze gebeurtenis wanneer een shopper een productvariant aan de winkelwagen toevoegt.


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`

Als je de native checkout van Shopify gebruikt, heb je dit meestal niet nodig, omdat we de voltooiing van het afrekenen automatisch bijhouden via webpixelgebeurtenissen. Als je echter je eigen checkoutflow hebt, activeer deze gebeurtenis dan wanneer een shopper het afrekenen voltooit (bijvoorbeeld op je orderbevestigingspagina).


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

Hulp nodig?

Je kunt gerust een afspraak met ons inplannen ; we helpen je graag met de integratie van gebeurtenistracking in je headless storefront.