ドキュメント

SDK 2.0 · 統合

カートとイベント

文書化された 2 つのコールバックをストアフロントと分析に接続します。

サポートされているコールバック

コールバック発火したらキーペイロード
onTryOnButtonClickダイアログが開く前にボタンをクリックしたとき。name
onAddToCartClickedエクスペリエンスがカートに追加メッセージを投稿するとき。まずカートに追加を有効にしてください。name, garments, setIsLoading, closePopUp, onError

カートリクエストを処理する

TypeScript
import { init } from "@spreeai/web-sdk";
import "@spreeai/web-sdk/dist/web-sdk.css";

const sdk = await init({ clientId: "YOUR_ISSUED_CLIENT_ID" });
if (sdk) {
  await sdk.renderTryOnButton({
    elementId: "spreeai-try-on",
    garments: [{ garmentId: "YOUR_READY_GARMENT_ID" }],
    enableAddToCart: true,
    events: {
      onTryOnButtonClick: ({ name }) => {
        // Forward this non-sensitive event to your analytics layer.
        console.info(name);
      },
      onAddToCartClicked: async ({
        garments, setIsLoading, closePopUp, onError,
      }) => {
        setIsLoading(true);
        try {
          // Implement this endpoint in YOUR storefront backend.
          // Validate and map these garment IDs to your own cart variants.
          const response = await fetch("/api/cart/from-spreeai", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({ garments }),
          });
          if (!response.ok) throw new Error("Cart request failed");
          closePopUp();
        } catch {
          onError("Could not add to bag. Please try again.");
        } finally {
          setIsLoading(false);
        }
      },
    },
  });
}

正しい行動を測定する

ボタンクリックのコールバックは、試着を開始する意図を測定します。試着が完了したこと、または購入が行われたことを証明するものではありません。承認された分析統合を下流の結果に使用します。公開された API にない完了コールバックやサーバー Webhook を作成しないでください。

受け入れチェック

  • カート操作が成功すると、目的の製品、バリエーション、数量が追加されます。
  • リクエストが失敗すると、買い物客に情報が提供され、読み込み状態がクリアされます。
  • 重複クリックによって、独自のハンドラーに意図しない重複ミューテーションが作成されることはありません。
  • 分析にはイベントのメタデータのみが含まれ、顧客の画像、トークン、不要な個人データは含まれません。
出典参照

ページのタイトルとコンテンツを検索します。エスケープすると検索が終了します。

言語を選択してください。