Skip to main content

Event-based integration

The event-based integration allows you to retrieve loaded placements and listen to the events that they emit.

The Rokt object exposes a method called rokt.getPlacements() that returns a promise that resolves with the placements after they have finished loading.

Each placement exposes a placement.on(EVENT_NAME) method that allows you to subscribe to events emitted by that placement.

Event types#

Rokt supports various event types for users to subscribe to:

Event TitleDefinition
OFFER_ENGAGEMENTdescribes user engaging positively or negatively with an offer
POSITIVE_ENGAGEMENTdescribes user engaging positively with an offer or catalog item
PLACEMENT_CLOSEDdescribes when a placement closes
PLACEMENT_INTERACTIVEdescribes the moment when placement has been rendered and is interactable
PLACEMENT_READYdescribes when the placement is ready to display but has not rendered content yet
PLACEMENT_FAILUREdescribes when a placement encounters an error it cannot recover from. The placement closes thereafter

Examples#

rokt.onLoaded(function (rokt) {  rokt.getPlacements().then(function (placements) {    // for each placements in the response    for (let placement of placements) {      // Listen for when the placement becomes interactive/ready to display      placement.on("PLACEMENT_INTERACTIVE").subscribe(function () {        // Logic to run after Placement has become interactive      });
      // Listen for when the placement iframe resizes      placement.on("PLACEMENT_RESIZE").subscribe(function () {        // Logic to run after Placement resizes      });
      // Listen for when the placement encounters an unrecoverable failure before closing      placement.on("PLACEMENT_FAILURE").subscribe(function () {        // Logic to run after Placement has encountered a failure      });    }  });
  // Integration steps as per other examples});

Google Tag Manager integration example#

rokt.onLoaded(function (rokt) {  rokt.getPlacements().then(function (placements) {    for (let placement of placements) {      // Listen for when user engages positively OR negatively with an offer      placement.on("OFFER_ENGAGEMENT").subscribe(function () {        window.dataLayer?.push({          ROKT_OFFER_ENGAGEMENT: true,        });      });
      // Listen for when user engages positively with an offer      placement.on("POSITIVE_ENGAGEMENT").subscribe(function () {        window.dataLayer?.push({          ROKT_POSITIVE_ENGAGEMENT: true,        });      });
      // Listen for when user closes out of the placement      placement.on("PLACEMENT_CLOSED").subscribe(function () {        window.dataLayer?.push({          ROKT_PLACEMENT_CLOSED: true,        });      });    }  });});
Was this article helpful?