Test
Test de l'intégration
Nous recommandons de tester l'intégration du Web SDK pour vous assurer qu'il se charge correctement et que les attributs de données se chargent comme prévu.
Accédez à votre page de paiement.
Ouvrez les outils de développement et inspectez l'activité du réseau en cliquant avec le bouton droit n'importe où sur la page, puis en cliquant sur Inspecter.
Accédez à 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 d'état 200 pour une demande de placements, cela suggère que l'intégration est probablement configurée correctement. Contactez votre gestionnaire de compte Rokt pour toute question ou assistance supplémentaire.
Checkouts à une seule page pliables
Pour certaines applications, la section des paiements est contenue dans un élément pliable. Dans ces cas, abstenez-vous d'appeler la méthode selectPlacements tant que la section des paiements 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 les performances à long terme.
Veuillez consulter l'exemple d'implémentation ci-dessous :
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta tags -->
<!-- Part #1 - Load the 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>
<!-- Other scripts and meta tags -->
</head>
<body>
<!-- Your HTML content here -->
<!-- Part #2 - As soon as the data attributes are available, execute the below script to display a Rokt placement -->
<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>
<!-- Your HTML content here -->
</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 à une seule page
Le processus d'intégration de Rokt avec une application à une seule page diffère du processus d'intégration avec des sites Web traditionnels à plusieurs pages. Tout comme le processus de paiement à une seule page pliable décrit ci-dessus, l'approche recommandée consiste à pré-initialiser le Web SDK lorsque les clients arrivent 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 consulter ici pour plus d'informations sur les applications à une seule page.
Flux de paiement multiples
S'il existe différents flux d'utilisateurs 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.