Jak wysyłać zdarzenia kupujących do Shoply AI z bezgłowego sklepu Shopify

Shoply AI śledzi zachowania kupujących (dodanie do koszyka, realizacja zakupu, wyświetlenia produktów itd.), aby ulepszać pozycjonowanie w wynikach wyszukiwania i rekomendacje. W standardowych witrynach sklepowych Shopify odbywa się to automatycznie za pośrednictwem naszego rozszerzenia Web Pixel . Jednak Shopify Web Pixels nie działają w witrynach bezgłowych, ponieważ polegają na silniku renderowania sklepu Shopify, który wstrzykuje piaskownicę piksela.

Jeśli prowadzisz bezgłowy sklep Shopify (np. z Next.js, Hydrogenem lub niestandardowym frontendem), musisz wysyłać te zdarzenia bezpośrednio z kodu frontendu.

Wymagania wstępne

Shoply AI jest zainstalowane, a skrypt Shoply AI jest załadowany w witrynie sklepu.

Wysyłanie zdarzenia

Po załadowaniu skryptu Shoply AI automatycznie udostępnia window.shoplyLogEvent. Wywołaj je bezpośrednio — nie musisz samodzielnie zarządzać identyfikatorami sesji, kluczami sklepu ani punktami końcowymi API:


window.shoplyLogEvent(eventName, data)

Struktura obiektu data zależy od typu zdarzenia (zobacz poniżej).

Zdarzenia wymagane do obsługi śledzenia konwersji

`product_added_to_cart`

Wywołaj je, gdy kupujący doda wariant produktu do koszyka.


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`

Jeśli korzystasz z natywnej funkcji realizacji zakupu Shopify, zazwyczaj nie musisz tego robić, ponieważ używamy zdarzeń web pixel do automatycznego śledzenia zakończenia realizacji zakupu. Jeśli jednak masz własny proces realizacji zakupu, wywołaj je, gdy kupujący zakończy realizację zakupu (np. na stronie potwierdzenia zamówienia).


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

Potrzebujesz pomocy?

Możesz umówić z nami spotkanie , a pomożemy Ci zintegrować śledzenie zdarzeń w bezgłowej witrynie sklepu.