メインコンテンツまでスキップ

カートの統合

Roktとのカート統合​

Roktプレースメントのカート変更を購読する​

トランザクション内/カート統合は、顧客がRoktのアップセル機会を選択するたびにフロントエンドに通知し、顧客のカートにその変更を反映させることができます。これは、顧客がRokt側で選択したアイテムに変更を加えるたびにトリガーされるプレースメントのV2_CART_ITEM_UPDATEDメッセージをリッスンすることで実現されます。

このメッセージを購読するには、任意の選択されたプレースメントからのメッセージをリッスンできるSelection.onメソッドを使用します。これらのメッセージのペイロードは、UpdateCartItemPlacementMessageBodyで説明されています。

さらに、オファーの選択を顧客により適合させるために、属性を渡して追加情報を提供することができます。場合によっては、カタログプロバイダーに応じて、Roktがカタログアイテムを取得するために追加情報が必要になることがあります。

// (...) Roktスクリプトの読み込みとIntegration Launcherインスタンスの作成

const selection = await launcher.selectPlacements({
  attributes: {
    // Roktがカタログアイテムを取得するために必要な属性
    eventId: "eventId",
    venueName: "venueName",
    // 任意の追加属性
    email: "email",
  },
});

selection.on("V2_CART_ITEM_UPDATED").subscribe((event) => {
  // 以下にカートの変更を反映するためのコードを提供してください
  clientCart.updateCart(event.body.cartItem, event.body.oldCartItem);
});

Rokt配置のカートをカートから更新する​

カートの変更をRokt側に反映させる必要がある場合、メッセージを配置に送信することで実現できます。便利なことに、Selection.sendメソッドを使用して、選択された各配置にメッセージを送信できます。影響を受けたRokt配置はメッセージを受信し、適切に処理します。このメッセージのペイロードは、UpdateCartItemPartnerMessageBodyで説明されています。

注記

設定が許可していない場合、特定の変更は実行されないことにご注意ください。例えば、強制アップセルが最小数量1で設定されている場合、パートナーからその選択を削除するメッセージを受信しても、配置はそれを実行しません。

ただし、配置からパートナーにメッセージが常に送信され、ループを閉じてRokt配置のカート状態をパートナーと共有し、両方のカートが一致していることを確認します（上記のセクションを参照してください）。

const selection = await launcher.selectPlacements({
  attributes: {
    // Roktがカタログアイテムを取得するために必要な属性
  },
});

selection.send("V2_UPDATE_CART_ITEM", payload);

配置の可用性を確認する​

この拡張機能では、バックエンドがRoktに対して呼び出しを行い、配置が利用可能かどうかを確認します。その後、アップセルページを表示するかスキップするかを決定できます。このシナリオでは、ページはおそらくすでにバックエンドで生成されており、最初の呼び出しで顧客データと取引データをRoktに含めています。その呼び出しでセッションIDがすでに生成されている可能性があるため、Rokt JavaScript APIは、識別とパフォーマンスの理由から、Rokt.createLauncher メソッドにセッションIDを含める必要があります。これにより、両方のインタラクションをペアリングできます。

// (...) Roktスクリプトの読み込み

const launcher = await Rokt.createLauncher({
  accountId: "rokt-account-id",
  sessionId: "uniqueSessionId", // Roktバックエンドで生成されたセッションID
});

// (...) 残りの統合ロジック

配置が有効であることの確認​

一部のRoktオファーには、顧客がトランザクションフローを進める前に完了しなければならないフィールドが含まれています。例えば、フォームに記入したり、オファーに対してはい/いいえを選択したりすることです。

このようなタイプのオファーには、顧客が進行する前に取るべきアクションを示す警告メッセージが表示されるバリデーションメッセージが含まれています。

この動作はオプションであり、選択を行う前にIntegrationLauncher.use()メソッドを通じて有効にする必要があります。パートナーバリデーションモジュールを取得したら、getValidationStatusメソッドを使用して現在の配置が有効かどうかを確認できます。このメソッドは、配置が定義された最初のバリデーション状態を解決するまで待機するJavaScriptのPromiseを返します。解決された値は次のようになります:

interface PlacementValidationStatus {
  // エラーがあるかどうかをすばやく判断するためのもの
  isValid: boolean;
  // バリデーションを含む配置のリスト
  placements: Array<{
    // エラーを含む配置の要素で、
    // エラーがある場合にスクロールすることができます
    element: HTMLIFrameElement;
    // 配置は独自のエラーメッセージを表示しますが、
    // 必要に応じてどこかで繰り返すためのエラーメッセージを提供する
    // 配列です。有効な場合は空になります
    errors: Array<{
      message: string;
    }>;
  }>;
}

使用例

const partnerValidation = await launcher.use('PartnerValidation');

const selection = await launcher.selectPlacements({
    attributes: {
        /* ... */
    },
});

// 顧客がこのボタンをクリックしたとき、配置のバリデーションステータスを確認します
document.querySelector("button.check-validation").onclick = async () => {
  await selection.ready();  
  const result = await partnerValidation.getValidationStatus();

  // 配置に無効な配置が含まれているかどうかをすばやく判断します
  console.log(result.isValid);

    // ループを通して
  for (const placement of result.placements) {
    console.log(
      "element is: " +
        element.getBoundingClientRect().top +
        "px from the top of the page"
    );
    console.log("placement has: " + placement.errors.length + " errors");

    for (const [i, error] of placement.errors.entries()) {
      console.log("placement error: " + i + " is " + error);
    }
  }
};
この記事は役に立ちましたか？
Last updated Oct 29, 2025