ヘッドレスShopifyストアから購入者イベントをShoply AIへ送信する方法

Shoply AIは、検索順位とレコメンデーションを改善するために、購入者の行動(カートへの追加、チェックアウト、商品閲覧など)を追跡します。標準的なShopifyストアフロントでは、Web Pixel拡張機能 によって自動的に行われます。ただし、Shopify Web Pixelはヘッドレスストアフロントでは実行されません。ピクセルサンドボックスを挿入するShopifyのストアフロント描画エンジンに依存するためです。

Next.js、Hydrogen、独自フロントエンドなどのヘッドレスShopifyストアを運営している場合は、これらのイベントをフロントエンドコードから直接送信する必要があります。


前提条件

  • Shoply AIをインストール済みで、Shoply AIスクリプトがストアフロントに読み込まれていること。

イベントの送信

Shoply AIスクリプトが読み込まれると、**window.shoplyLogEvent**が自動的に公開されます。セッションID、ストアキー、APIエンドポイントを自分で管理する必要はなく、直接呼び出せます。

js
window.shoplyLogEvent(eventName, data)

dataオブジェクトの形式はイベント種別によって異なります。


コンバージョン追跡に必要なイベント

product_added_to_cart

購入者が商品バリエーションをカートに追加した時に送信します。

js
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イベントでチェックアウト完了を自動追跡します。独自のチェックアウトフローがある場合は、購入者がチェックアウトを完了した時(例:注文確認ページ)に送信してください。

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

サポートが必要ですか?

ミーティングをご予約ください 。ヘッドレスストアフロントへのイベント追跡の組み込みをお手伝いします。