Test
Tester l'intégration
Nous recommandons de tester l'intégration du Web SDK pour garantir qu'elle se charge correctement et que les attributs de données se chargent comme prévu.
Accédez à votre page de paiements.
Ouvrez les outils de développement et inspectez l'activité réseau en cliquant avec le bouton droit sur n'importe quelle partie de la page et en cliquant sur Inspecter.
Allez dans l'onglet réseau dans le panneau qui s'ouvre et rechargez la page.
Dans le panneau de recherche, recherchez
domain:\*.rokt.com.
Si vous recevez un code de statut 200 pour une requête placements, cela suggère que l'intégration est probablement configurée correctement. Contactez votre responsable de compte Rokt pour toute question ou pour obtenir des conseils supplémentaires.
Vérifications des billetteries collapsibles
Pour certaines applications, la section des paiements est contenue dans un élément collapsible. Dans ces cas, évitez 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.
Veuillez voir ci-dessous pour un exemple d'implémentation :
<!DOCTYPE html>
<html lang="fr">
<head>
<!-- Balises meta -->
<!-- Partie #1 - Charger le Web SDK -->
<script type="module">
window.RoktLauncherScriptPromise = new Promise((resolve, reject) => {
const target = document.head || document.body;
const script = document.createElement("script");
script.type = "text/javascript";
script.src = "https://apps.rokt.com/wsdk/integrations/launcher.js";
script.fetchpriority = "high";
script.crossOrigin = "anonymous";
script.async = true;
script.id = "rokt-launcher";
script.addEventListener('load', () => resolve());
script.addEventListener('error', (error) => reject(error));
target.appendChild(script);
});
</script>
<!-- Autres scripts et balises meta -->
</head>
<body>
<!-- Votre contenu HTML ici -->
<!-- Partie #2 - Dès que les attributs de données sont disponibles, exécutez le script ci-dessous pour afficher un placement Rokt -->
<script type="module">
await window.RoktLauncherScriptPromise;
const launcher = await window.Rokt.createLauncher({
accountId: "rokt-account-id",
sandbox: true,
});
async function renderPlacement() {
const selection = await launcher.selectPlacements({
identifier: "payment_page",
attributes: {
...
}
});
}
document.querySelector('#renderPlacement').addEventListener('click', renderPlacement)
</script>
<!-- Votre contenu HTML ici -->
</body>
</html>
Pour tester cette intégration, ouvrez l'onglet réseau comme indiqué ci-dessus et assurez-vous que l'appel réseau placements est effectué uniquement après que l'événement de déclenchement approprié a été déclenché.
Applications à Page Unique
Le processus d'intégration de Rokt avec une SPA diffère du processus d'intégration avec des sites web multi-pages traditionnels. Tout comme le Collapsible One Page Checkout décrit ci-dessus, l'approche recommandée consiste à pré-initialiser le Web SDK lorsque les clients arrivent pour la première fois sur le site, puis à déclencher le placement une fois que le client atteint l'endroit où les placements sont rendus.
Comme ci-dessus, pour tester cette intégration, ouvrez l'onglet réseau et assurez-vous que l'appel réseau placements est effectué uniquement après que l'événement de déclenchement approprié a été déclenché.
Veuillez vous référer ici pour plus d'informations sur les applications à page unique.
Flux de Paiement Multiples
Si différents flux utilisateur sont présents sur la page de paiement, par exemple si un utilisateur peut accéder à la page de paiement en tant qu'utilisateur connecté ou en tant qu'invité, veuillez vous assurer de tester chaque variation possible.
Lisez notre guide complet pour plus d'informations sur le test de votre intégration.