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

カート統合

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側に反映させる必要がある場合、Placementにメッセージを送信することでそれを行うことができます。ご便利のために、Selection.sendメソッドを使用して、選択された各Placementにメッセージを送信できます。影響を受けるRoktのPlacementは、適切にリスンしてアクションを実行します。このメッセージのペイロードは、UpdateCartItemPartnerMessageBodyに記載されています。

注記

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

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

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()) {
```javascript
console.log("配置エラー: " + i + " は " + error);
    }
  }
};

この記事は役に立ちましたか？