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 selection process exposes a method called Selection.on that allows you to subscribe to events emitted by any placement in the selection. Alternatively, each placement can be subscribed to separately after obtaining their instances from a promise returned by Selection.getPlacements method. This resolves with placements once the selection process finishes but before they are loaded on a page

Event types

Rokt supports various event types for users to subscribe to:

Event TitleDefinition
OFFER_ENGAGEMENTdescribes user engaging positively 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

Examples

// 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 integration example

// Listen for when user engages positively 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,
});
});
Was this article helpful?