如何從無頭 Shopify 商店將顧客事件傳送至 Shoply AI

Shoply AI 會追蹤顧客行為（加入購物車、結帳、瀏覽商品等），以改善搜尋排名與推薦結果。在標準 Shopify 店面中，這會透過我們的 Web Pixel 擴充功能自動完成。但是，Shopify Web Pixels 不會在無頭店面上執行，因為它們需要依賴 Shopify 的店面轉譯引擎來注入 pixel 沙盒環境。

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

事前準備

您已安裝 Shoply AI，且 Shoply AI 指令碼已載入到您的店面中。

傳送事件

Shoply AI 指令碼載入後，會自動公開 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"
})

需要協助嗎？

歡迎預約與我們開會，我們會協助您將事件追蹤整合至無頭店面。