Install Rokt
Add the Rokt Web SDK to your page
In order to implement the Payments Marketplace placement, we ask that you integrate the Rokt Web SDK on the page(s) you want the placement to show. This integration can be done direct-on-page or via a tag manager solution.
The Payments Marketplace placement is only compatible with the newest version of the Rokt Web SDK. Please work with your account manager to ensure your pages are updated to the latest version.
Please note that the method of firing the Rokt tag and loading the Payment Marketplace placement is different depending on your checkout flow.
- Collapsible Checkout: Please refrain from calling the selectPlacements method until the payments section is viewable. Otherwise, Rokt will count a placement impression without knowing whether a user actually saw the placement, which can negatively impact long term performance.
- Single Page Application: The recommended approach is to pre-initialize the Web SDK when customers first arrive on the site, then trigger the placement once the customer reaches the place where placements are rendered. For more details, see here.
For testing instructions, please see here.
Event listener
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.
Rokt supports the following event types for users to subscribe to on our Payments Marketplace placements:
| Event Title | Definition |
|---|---|
| POSITIVE_ENGAGEMENT | Describes a user engaging positively with an offer or catalog item. |
| PLACEMENT_INTERACTIVE | Describes the moment when the placement has been rendered and is interactable. |
Below is an example of the event listener integration:
//Optional event listeners
selection.on('PLACEMENT_INTERACTIVE').subscribe(() => {
selection.context.pageVariantName.then((val) => {
console.log(val)
});
});
selection.on('POSITIVE_ENGAGEMENT').subscribe(() => {
selection.context.pageVariantName.then((val) => {
console.log(val)
});
});
Embed Rokt
It’s now time to render the Rokt placement on your website. Initialize the placement by inserting the following code into the body of the page where you want the Rokt placement to appear. We recommend placing the Rokt Placement below the payment options on your checkout page for the best contextualisation of offers.
<div id="rokt-placeholder"></div>
Add multiple containers on your page
Rokt will often want to experiment with displaying the placement in multiple locations on your page. In order to do so, we request that you include additional unique div elements where the placement should render. The naming of each is flexible, but we recommend including some way of identifying them.
<div id="rokt-above-payment"></div>
<div id="rokt-below-payment"></div>
For multiple location testing, we recommend that you include additional div elements where the placement should render.
Follow our integration best practices to ensure that the Rokt UX loads quickly on your site and provides the optimal experience for your customers.