Cách Gửi Sự Kiện Người Mua đến Shoply AI Từ Cửa Hàng Shopify Headless

Shoply AI theo dõi hành vi của người mua (thêm vào giỏ hàng, thanh toán, lượt xem sản phẩm, v.v.) để cải thiện thứ hạng tìm kiếm và đề xuất. Trên các cửa hàng Shopify tiêu chuẩn, việc này diễn ra tự động thông qua tiện ích mở rộng Web Pixel của chúng tôi. Tuy nhiên, Shopify Web Pixels không chạy trên các giao diện cửa hàng headless vì chúng dựa vào công cụ kết xuất giao diện cửa hàng của Shopify để chèn sandbox pixel.

Nếu bạn vận hành một cửa hàng Shopify headless (ví dụ: dùng Next.js, Hydrogen hoặc giao diện tùy chỉnh), bạn cần gửi trực tiếp các sự kiện này từ mã giao diện của mình.

Điều kiện tiên quyết

Bạn đã cài đặt Shoply AI và tập lệnh Shoply AI đã được tải trên giao diện cửa hàng của bạn.

Gửi một sự kiện

Sau khi tập lệnh Shoply AI được tải, tập lệnh này tự động cung cấp window.shoplyLogEvent. Hãy gọi trực tiếp — bạn không cần tự quản lý ID phiên, khóa cửa hàng hoặc endpoint API:


window.shoplyLogEvent(eventName, data)

Cấu trúc của đối tượng data phụ thuộc vào loại sự kiện (xem bên dưới).

Các sự kiện bắt buộc để hỗ trợ theo dõi chuyển đổi

`product_added_to_cart`

Kích hoạt sự kiện này khi người mua thêm một biến thể sản phẩm vào giỏ hàng.


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`

Nếu bạn đang sử dụng quy trình thanh toán gốc của Shopify, thông thường bạn không cần sự kiện này vì chúng tôi sử dụng các sự kiện web pixel để tự động theo dõi việc hoàn tất thanh toán. Tuy nhiên, nếu bạn có quy trình thanh toán riêng, hãy kích hoạt sự kiện này khi người mua hoàn tất thanh toán (ví dụ: trên trang xác nhận đơn hàng).


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

Cần trợ giúp?

Bạn có thể đặt lịch họp với chúng tôi và chúng tôi sẽ giúp bạn tích hợp tính năng theo dõi sự kiện vào giao diện cửa hàng headless của mình.