イベントベースの統合

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

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

イベントタイプ

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

イベントタイトル	定義
OFFER_ENGAGEMENT	ユーザーがオファーに対して肯定的または否定的に関与することを説明します
POSITIVE_ENGAGEMENT	ユーザーがオファーまたはカタログアイテムに対して肯定的に関与することを説明します
PLACEMENT_CLOSED	プレースメントが閉じられたときの説明
PLACEMENT_COMPLETED	ユーザーが単一のプレースメントを通じて旅を完了することを説明します
PLACEMENT_INTERACTIVE	プレースメントがレンダリングされ、対話可能になった瞬間を説明します
PLACEMENT_READY	プレースメントが表示準備が整ったが、まだコンテンツがレンダリングされていないことを説明します
PLACEMENT_RESIZE	プレースメントがリサイズされるたびに、パートナーがプレースメントのサイズの変化に反応できるように説明します
PLACEMENT_FAILURE	プレースメントが回復不能なエラーに遭遇した場合を説明します

例

// selection
const selection: Selection;

// Listen for when the placement becomes interactive/ready to display
selection.on('PLACEMENT_INTERACTIVE').subscribe(() => {
  // Logic to run after Placement has become interactive
});

// Listen for when the placement iframe resizes
selection.on('PLACEMENT_RESIZE').subscribe(function () {
  // Logic to run after Placement resizes
});

Google Tag Manager 統合例

// Listen for when user engages positively or negatively with an offer
selection.on("OFFER_ENGAGEMENT").subscribe(() => {
  window.dataLayer?.push({
    ROKT_OFFER_ENGAGEMENT: true,
  });
});

// Listen for when user engages positively with an offer or catalog item
selection.on("POSITIVE_ENGAGEMENT").subscribe(() => {
  window.dataLayer?.push({
    ROKT_POSITIVE_ENGAGEMENT: true,
  });
});

// Listen for when user closes out of the placement
selection.on("PLACEMENT_CLOSED").subscribe(() => {
  window.dataLayer?.push({
    ROKT_PLACEMENT_CLOSED: true,
  });
});