Test
Tester l'intégration
Nous vous recommandons de tester l'intégration du SDK Web pour vous assurer qu'il se charge correctement et charge les attributs de données comme prévu.
Accédez à votre page de paiement.
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 d'état 200 pour une demande de placements, cela suggère que l'intégration est probablement configurée correctement. Contactez votre responsable de compte Rokt pour toute question ou demande d'assistance supplémentaire.
Caisse à page unique rétractable
Pour certaines applications, la section des paiements est contenue dans un élément rétractable. 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 la performance à long terme.
Veuillez voir ci-dessous pour un exemple d'implémentation :
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Balises méta -->
<!-- Partie #1 - Charger le SDK Web -->
<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 méta -->
</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 le bon événement déclencheur a été lancé.
Applications à page unique
Le processus d'intégration de Rokt avec une SPA diffère du processus d'intégration avec les sites Web traditionnels à pages multiples. Similaire au processus de paiement d'une page repliable décrit ci-dessus, l'approche recommandée est de pré-initialiser le SDK Web lorsque les clients arrivent sur le site, puis de 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 le bon événement déclencheur a été lancé.
Veuillez consulter ici pour plus d'informations sur les applications à page unique.
Flux de Paiement Multiples
Si différents flux utilisateurs existent sur la page des paiements, par exemple si un utilisateur peut atteindre la page des paiements 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.