Installer Rokt
Ajouter le SDK Web Rokt à votre page
Pour implémenter le placement du Payments Marketplace, nous vous demandons d'intégrer le SDK Web Rokt sur la ou les pages où vous souhaitez afficher le placement. Cette intégration peut être effectuée directement sur la page ou via une solution de gestion de balises.
Le placement du Payments Marketplace est uniquement compatible avec la version la plus récente du SDK Web Rokt. 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 est différente selon votre flux de paiement.
- Paiement Rétractable: Veuillez vous abstenir d'appeler la méthode selectPlacements jusqu'à ce que la section des paiements soit 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 les performances à long terme.
- Application à Page Unique: L'approche recommandée est de pré-initialiser le SDK Web 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.
Pour les instructions de test, veuillez 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 des placements une fois le processus de sélection 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'abonner à nos placements sur le Marketplace des paiements :
| Titre de l'événement | Définition |
|---|---|
| POSITIVE_ENGAGEMENT | Décrit un utilisateur s'engageant positivement avec une offre ou un article de catalogue. |
| PLACEMENT_INTERACTIVE | Décrit le moment où le placement a été rendu et est interactif. |
Voici un exemple de l'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 sous les 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 voudra 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 garantir que l'UX de Rokt se charge rapidement sur votre site et offre l'expérience optimale à vos clients.