如何從無頭 Shopify 商店向 Shoply AI 傳送購物者事件

Shoply AI 會追蹤購物者行為（加入購物車、結帳、查看產品等），以改善搜尋排名及推薦結果。在標準 Shopify 商店前台，這會透過我們的 Web Pixel 擴充功能自動完成。不過，Shopify Web Pixels 不會在無頭商店前台執行，因為它們依靠 Shopify 的商店前台渲染引擎注入 pixel sandbox。

如果你營運無頭 Shopify 商店（例如使用 Next.js、Hydrogen 或自訂前端），便需要直接從前端程式碼傳送這些事件。

先決條件

你已安裝 Shoply AI，而 Shoply AI script 已在你的商店前台載入。

傳送事件

Shoply AI script 載入後，會自動提供 window.shoplyLogEvent。直接呼叫即可——無需自行管理工作階段 ID、商店金鑰或 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"
})

需要協助？

歡迎預約與我們會面，我們會協助你將事件追蹤整合到無頭商店前台。