Как да изпращате събития за купувачите към Shoply AI от headless Shopify магазин

Shoply AI проследява поведението на купувачите (добавяне в количката, плащане, преглеждания на продукти и др.), за да подобрява класирането в търсенето и препоръките. При стандартните витрини на Shopify това се случва автоматично чрез нашето разширение Web Pixel . Web Pixels на Shopify обаче не работят при headless витрини, защото разчитат на механизма за визуализиране на витрината на Shopify, за да инжектират sandbox-а на пиксела.

Ако използвате headless Shopify магазин (например с Next.js, Hydrogen или персонализиран frontend), трябва да изпращате тези събития директно от кода на frontend-а си.

Предварителни изисквания

Инсталирали сте Shoply AI и скриптът на Shoply AI е зареден във витрината ви.

Изпращане на събитие

След като скриптът на Shoply AI бъде зареден, той автоматично предоставя window.shoplyLogEvent. Извикайте го директно — няма нужда сами да управлявате идентификатори на сесии, ключове на магазина или API крайни точки:


window.shoplyLogEvent(eventName, data)

Формата на обекта data зависи от типа събитие (вижте по-долу).

Задължителни събития за поддръжка на проследяването на реализациите

`product_added_to_cart`

Изпращайте това събитие, когато купувач добави вариант на продукт в количката си.


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`

Ако използвате нативното плащане на Shopify, обикновено не е необходимо да изпращате това събитие, тъй като използваме събитията от Web Pixel, за да проследяваме автоматично завършването на плащането. Ако обаче имате собствен процес на плащане, изпращайте това събитие, когато купувач завърши плащането (например на страницата за потвърждение на поръчката).


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

Нуждаете се от помощ?

Можете да насрочите среща с нас и ще ви помогнем да интегрирате проследяването на събития във вашата headless витрина.