So sendest du Shopper-Ereignisse aus einem Headless-Shopify-Shop an Shoply AI

Shoply AI verfolgt das Verhalten von Shop-Besuchern (In-den-Warenkorb-Legen, Checkout, Produktansichten usw.), um das Suchranking und Empfehlungen zu verbessern. In Standard-Storefronts von Shopify geschieht dies automatisch über unsere Web-Pixel-Erweiterung . Shopify Web Pixels laufen jedoch nicht auf Headless-Storefronts, da sie auf die Rendering-Engine von Shopify angewiesen sind, um die Pixel-Sandbox einzubinden.

Wenn du einen Headless-Shopify-Shop betreibst (z. B. mit Next.js, Hydrogen oder einem benutzerdefinierten Frontend), musst du diese Ereignisse direkt aus deinem Frontend-Code senden.

Voraussetzungen

Du hast Shoply AI installiert und das Shoply-AI-Skript ist auf deiner Storefront geladen.

Ein Ereignis senden

Sobald das Shoply-AI-Skript geladen ist, stellt es window.shoplyLogEvent automatisch bereit. Rufe es direkt auf – du musst keine Sitzungs-IDs, Shop-Schlüssel oder API-Endpunkte selbst verwalten:


window.shoplyLogEvent(eventName, data)

Die Struktur des data-Objekts hängt vom Ereignistyp ab (siehe unten).

Erforderliche Ereignisse zur Unterstützung des Conversion-Trackings

`product_added_to_cart`

Löse dieses Ereignis aus, wenn ein Shop-Besucher eine Produktvariante in den Warenkorb legt.


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`

Wenn du den nativen Checkout von Shopify verwendest, benötigst du dies normalerweise nicht, da wir Web-Pixel-Ereignisse nutzen, um den Abschluss des Checkouts automatisch zu verfolgen. Wenn du jedoch einen eigenen Checkout-Ablauf hast, löse dieses Ereignis aus, wenn ein Shop-Besucher den Checkout abschließt (z. B. auf deiner Bestellbestätigungsseite).


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

Brauchst du Hilfe?

Du kannst gerne ein Gespräch mit uns buchen ; wir helfen dir bei der Integration des Event-Trackings in deine Headless-Storefront.