Installer Rokt
Ajouter le SDK Web Rokt à votre page
Pour mettre en œuvre le placement du Payments Marketplace, nous vous demandons d'intégrer le SDK Web Rokt 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 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 d'activation de la balise Rokt et de chargement du placement du Payments Marketplace est différente selon votre flux de paiement.
- Caisse rétractable : Veuillez vous abstenir d'appeler la méthode selectPlacements jusqu'à ce que la section de paiement 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 la performance à 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.
Écouteur d'événements
L'intégration basée sur des événements vous permet de récupérer les emplacements 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 emplacement dans la sélection. Alternativement, chaque emplacement 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 emplacements 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 permettant aux utilisateurs de s'abonner à nos emplacements de Marketplace de Paiements :
| 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ù l'emplacement a été rendu et est interactif. |
Ci-dessous un exemple d'intégration d'écouteur d'événements :
//Écouteurs d'événements facultatifs
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 de rendre le placement Rokt sur votre site web. Initialisez le placement en insérant le code suivant dans le corps de la page où vous souhaitez que le placement Rokt apparaisse. Nous vous recommandons de placer le Placement Rokt sous les options de paiement sur votre page de commande 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 supplémentaires et uniques là où le placement devrait être rendu. La 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 à plusieurs emplacements, nous recommandons que vous incluiez des éléments div supplémentaires là où le placement devrait être rendu.
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.