Installer Rokt
Ajouter le Rokt Web SDK à votre page
Pour implémenter le placement du Payments Marketplace, nous vous demandons d'intégrer le Rokt Web SDK sur la ou les pages où vous souhaitez que le placement apparaisse. Cette intégration peut être effectuée directement sur la page ou via une solution de gestionnaire de balises (tag manager).
Le placement du Payments Marketplace est uniquement compatible avec la version la plus récente du Rokt Web SDK. Veuillez travailler avec votre gestionnaire de compte pour vous assurer que vos pages sont mises à jour vers la dernière version.
Veuillez noter que la méthode de déclenchement de la balise Rokt et de chargement du placement du Payments Marketplace diffère selon votre flux de paiement.
- Checkout Rétractable (Collapsible Checkout) : Veuillez vous abstenir d'appeler la méthode selectPlacements tant que la section de paiement n'est pas visible. Sinon, Rokt comptera une impression de placement sans savoir si un utilisateur a réellement vu le placement, ce qui peut avoir un impact négatif sur la performance à long terme.
- Application à Page Unique (Single Page Application) : L'approche recommandée est de pré-initialiser le Web SDK lorsque les clients arrivent pour la première fois sur le site, puis de déclencher le placement une fois que le client atteint l'endroit où les placements sont rendus. Pour plus de détails, voir ici.
Écouteur d'événements
L'intégration basée sur les événements vous permet de récupérer les placements chargés et d'écouter les événements qu'ils émettent.
Le processus de sélection expose une méthode appelée Selection.on qui vous permet de vous abonner aux événements émis par n'importe quel placement dans la sélection. Alternativement, chaque placement peut être abonné séparément après avoir obtenu leurs instances à partir d'une promesse retournée par la méthode Selection.getPlacements. Cela se résout avec les placements une fois que le processus de sélection est terminé mais avant qu'ils ne soient chargés sur une page.
Rokt prend en charge les types d'événements suivants pour que les utilisateurs puissent s'y abonner sur nos placements du Payments Marketplace :
| Titre de l'événement | Définition |
|---|---|
| POSITIVE_ENGAGEMENT | Décrit un utilisateur s'engageant positivement avec une offre ou un élément de catalogue. |
| PLACEMENT_INTERACTIVE | Décrit le moment où le placement a été rendu et est interactif. |
Ci-dessous un exemple d'intégration de l'écouteur d'événements :
//Écouteurs d'événements optionnels
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)
});
});
Intégrer Rokt
Il est maintenant temps d'afficher le placement Rokt sur votre site web. Initialisez le placement en insérant le code suivant dans le body de la page où vous souhaitez que le placement Rokt apparaisse. Nous recommandons de placer le placement Rokt en dessous des options de paiement sur votre page de paiement pour une meilleure contextualisation des offres.
<div id="rokt-placeholder"></div>
Ajouter plusieurs conteneurs sur votre page
Rokt souhaitera souvent expérimenter l'affichage du placement à plusieurs endroits sur votre page. Pour ce faire, nous vous demandons d'inclure des éléments div uniques supplémentaires où le placement doit s'afficher. La dénomination de chacun est flexible, mais nous recommandons d'inclure un moyen de les identifier.
<div id="rokt-above-payment"></div>
<div id="rokt-below-payment"></div>
Pour les tests de localisation multiple, nous recommandons d'inclure des éléments div supplémentaires où le placement doit s'afficher.
Suivez nos meilleures pratiques d'intégration pour vous assurer que l'UX de Rokt se charge rapidement sur votre site et offre l'expérience optimale à vos clients.