Last updated 2023年9月12日

イベントベースの統合

イベントベースの統合では、読み込まれた配置を取得し、それらが発生するイベントをリッスンすることができます。

選択プロセスでは、Selection.onというメソッドを公開しており、選択された配置が発生するイベントにサブスクライブすることができます。また、Selection.getPlacementsメソッドから返されるプロミスからインスタンスを取得した後、各配置を個別にサブスクライブすることもできます。このメソッドは、選択プロセスが終了し、配置がページにロードされる前に配置が解決されます。

イベントの種類

Roktは、ユーザーが購読できるさまざまなイベントの種類をサポートしています：

イベントタイトル	定義
OFFER_ENGAGEMENT	ユーザーがオファーと積極的に関わることを説明します
POSITIVE_ENGAGEMENT	ユーザーがオファーやカタログアイテムと積極的に関わることを説明します
PLACEMENT_CLOSED	プレースメントが閉じられたときを説明します
PLACEMENT_INTERACTIVE	プレースメントがレンダリングされ、インタラクティブになった瞬間を説明します
PLACEMENT_READY	プレースメントが表示の準備ができているが、まだコンテンツがレンダリングされていないことを説明します

例

// 選択
const selection: Selection;

// プレースメントがインタラクティブになり、表示する準備ができたときにリッスンする
selection.on('PLACEMENT_INTERACTIVE').subscribe(() => {
  // プレースメントがインタラクティブになった後に実行するロジック
});

// プレースメントのiframeがリサイズされたときにリッスンする
selection.on('PLACEMENT_RESIZE').subscribe(function () {
  // プレースメントがリサイズされた後に実行するロジック
});

Google Tag Managerの統合の例

// ユーザーがオファーと積み上げアイテムに積極的に関与したときにリッスンする
selection.on("OFFER_ENGAGEMENT").subscribe(() => {
  window.dataLayer?.push({
    ROKT_OFFER_ENGAGEMENT: true,
  });
});

// ユーザーがオファーまたはカタログアイテムに積極的に関与したときにリッスンする
selection.on("POSITIVE_ENGAGEMENT").subscribe(() => {
  window.dataLayer?.push({
    ROKT_POSITIVE_ENGAGEMENT: true,
  });
});

// プレースメントを閉じたときにリッスンする
selection.on("PLACEMENT_CLOSED").subscribe(() => {
  window.dataLayer?.push({
    ROKT_PLACEMENT_CLOSED: true,
  });
});