Last updated 2024年7月16日

イベントベースの統合

イベントベースの統合により、読み込まれたプレースメントを取得し、それらが発するイベントをリッスンすることができます。

選択プロセスは、選択内の任意のプレースメントが発するイベントを購読できるSelection.onというメソッドを公開しています。あるいは、Selection.getPlacementsメソッドによって返されるプロミスからインスタンスを取得した後、各プレースメントを個別に購読することもできます。これは、選択プロセスが終了した後、ページに読み込まれる前にプレースメントを解決します。

イベントタイプ

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

イベントタイトル	定義
OFFER_ENGAGEMENT	ユーザーがオファーに対して肯定的または否定的に関与することを示します
POSITIVE_ENGAGEMENT	ユーザーがオファーまたはカタログアイテムに対して肯定的に関与することを示します
PLACEMENT_CLOSED	プレースメントが閉じられたときのことを示します
PLACEMENT_INTERACTIVE	プレースメントがレンダリングされ、対話可能になった瞬間を示します
PLACEMENT_READY	プレースメントが表示準備が整ったが、まだコンテンツがレンダリングされていないことを示します

例

// selection
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,
  });
});