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 typesRokt supports various event types for users to subscribe to:
Event Title | Definition |
---|---|
OFFER_ENGAGEMENT | describes user engaging positively or negatively with an offer |
POSITIVE_ENGAGEMENT | describes user engaging positively with an offer or catalog item |
PLACEMENT_CLOSED | describes when a placement closes |
PLACEMENT_INTERACTIVE | describes the moment when placement has been rendered and is interactable |
PLACEMENT_READY | describes when the placement is ready to display but has not rendered content yet |
#
Examples// selectionconst selection: Selection;
// Listen for when the placement becomes interactive/ready to displayselection.on('PLACEMENT_INTERACTIVE').subscribe(() => { // Logic to run after Placement has become interactive});
// Listen for when the placement iframe resizesselection.on('PLACEMENT_RESIZE').subscribe(function () { // Logic to run after Placement resizes});
#
Google Tag Manager integration example// Listen for when user engages positively OR negatively with an offerselection.on("OFFER_ENGAGEMENT").subscribe(() => { window.dataLayer?.push({ ROKT_OFFER_ENGAGEMENT: true, });});
// Listen for when user engages positively with an offerselection.on("POSITIVE_ENGAGEMENT").subscribe(() => { window.dataLayer?.push({ ROKT_POSITIVE_ENGAGEMENT: true, });});
// Listen for when user closes out of the placementselection.on("PLACEMENT_CLOSED").subscribe(() => { window.dataLayer?.push({ ROKT_PLACEMENT_CLOSED: true, });});