Intégrer votre formulaire de demande
Résumé des exigences d'intégration :
- Fournir une URL d'application qui peut être affichée dans un iFrame.
- Mettre à jour votre politique de sécurité du contenu (CSP).
- Implémenter des signaux d'événements d'application en temps réel.
- Intégrer une solution de suivi des conversions.
Afficher l'application dans un iFrame
Rokt gère un plugin wrapper qui intègre le formulaire de demande dans un iFrame pour permettre aux applications de s'afficher directement sur une page partenaire. Ce plugin assure la communication avec le Web SDK ainsi qu'avec la page partenaire. Le plugin de demande de carte de crédit est hébergé sur le domaine du fournisseur et doit être une application web standard utilisant le framework de votre choix. Pour chaque carte de crédit ou produit, vous devez fournir une URL de formulaire de demande. L'interaction entre la page de demande de carte de crédit et le plugin Rokt est activée via la transmission de messages basée sur le navigateur. Le plugin de carte de crédit de Rokt est réactif et redimensionnera et centrera l'application de carte de crédit pour s'adapter à l'écran de l'utilisateur, ainsi que créer des dégradés d'arrière-plan.
En résumé, le plugin fournisseur de Rokt (iFrame) :
- Assure la communication avec le Web SDK ainsi qu'avec la page parent.
- Est hébergé sur votre domaine et doit être une application web standard.
- Doit inclure l'URL de la page de demande dans les champs de données pour chaque carte de crédit unique que vous proposerez via Rokt.
L'interaction entre la page de demande de carte de crédit et le plugin Rokt sera activée via la transmission de messages basée sur le navigateur. Des détails d'implémentation spécifiques avec des exemples de code sont inclus ci-dessous.
Considérations relatives à la politique de sécurité du contenu
Veuillez confirmer que la politique de sécurité du contenu (CSP) du formulaire de demande de carte de crédit permet l'hébergement via le domaine de Rokt : https://apps.rokt.com. Sinon, le plugin de Rokt ne pourra pas héberger le formulaire de demande. Rokt charge l'URL fournie sous forme d'iframe en provenance d'un autre domaine -- ce qui signifie que Rokt est seulement en mesure d'interagir avec la page grâce aux permissions explicites accordées par la CSP de la page. Dans la définition de la CSP, nous vous recommandons d'inclure explicitement https://apps.rokt.com dans la section frame-ancestors. Cela garantit que seul le domaine de Rokt est autorisé à intégrer le formulaire de demande. En agissant ainsi, vous êtes protégé contre l'injection de scripts tiers sur votre page web.
Décisions d'application en temps réel {#real-time-application}
Le processus de demande de carte de crédit doit communiquer les décisions d'application (comme approuvé instantanément, en attente ou refusé) à Rokt en temps réel via l'API du plugin, cela garantit que nous affichons un contenu de placement pertinent. Pour toutes les décisions en attente qui sont résolues ultérieurement, vous devez communiquer ces résultats à Rokt via l'API d'événement ou un autre mécanisme de livraison de données. Plus de détails sont disponibles dans la section suivi des conversions de ce document.
Rokt propose un mécanisme permettant aux fournisseurs de cartes d'envoyer des signaux d'événement pour représenter les interactions des utilisateurs avec le navigateur. Ces signaux permettent à Rokt de répondre aux interactions des utilisateurs et de déclencher des changements d'état sur le placement (par exemple, afficher un message de réussite lorsque les clients terminent la demande). Ils fournissent également des données d'événement importantes pour les rapports et la détection d'anomalies. Rokt n'a aucune visibilité sur le contenu du formulaire de demande ou sur les interactions des clients avec votre formulaire. Par conséquent, nous comptons sur le formulaire de demande pour nous envoyer des informations d'état à la fenêtre parente afin de permettre de rapporter sur l'avancement et le succès de la demande, ainsi que de surveiller quand ils ont terminé ou quitté le formulaire afin de fermer la fenêtre.
| Signal | Description |
|---|---|
| Application Initiated | Le formulaire de demande a été chargé et est prêt pour l'interaction de l'utilisateur. |
| Application Closed | L'utilisateur ferme la demande. |
| Application Approved | La demande de l'utilisateur est approuvée instantanément en temps réel. |
| Application Pending | La demande de l'utilisateur est en attente d'examen par le fournisseur. |
Envoi de messages d'état
Rokt ne peut pas accéder au contenu de votre formulaire de demande, c'est pourquoi il est important que votre application communique avec Rokt pour nous informer de l'état de la demande du client.
Au cours du cycle de vie de votre flux d'application, Rokt s'attend à recevoir trois messages : “Initiated” “Approved” ou “Pending” “Closed”
Les messages sont envoyés via PostMessage à la fenêtre Rokt, par exemple :
roktWindow.postMessage({ type: 'initiated' }, ‘https://your.domain.com’);
- Pour des raisons de sécurité, nous vous recommandons de fournir un
targetOriginspécifique à chaquepostMessage, évitez d'utiliser*. Rokt ignorera tout message qui ne provient pas de votre domaine. - Pour des raisons de sécurité, Rokt n'enverra aucun message à votre application, par conséquent, votre application ne doit pas écouter les événements "message".
- Votre application sera ouverte par Rokt. La référence de la fenêtre Rokt se trouve dans
window.opener. Cependant, il est possible que l'opener ne soit pas fourni, auquel cas vous devez vous rabattre surwindow.parent.
const roktWindow = window.opener || window.parent; roktWindow.postMessage(...);
Messages
Message d'initialisation
Rokt s'attend à recevoir un message initiated dès que votre application est chargée.
Les données du message sont { type: 'initiated' }
Il est très important que Rokt reçoive ce message pour savoir que le formulaire de votre application a été affiché. L'absence de ce message sera considérée comme une anomalie et fera l'objet d'une enquête de la part de Rokt.
Message d'état de progression
Rokt s'attend à recevoir un message pending ou approved, en fonction du résultat de la demande.
Pending doit être envoyé si l'utilisateur remplit votre demande, mais que vous ne pouvez pas approuver cette demande immédiatement.
Les données du message pending sont { type: ‘pending’}.
Approved ne doit être envoyé que si vous pouvez approuver instantanément la demande de l'utilisateur pour votre produit.
Les données du message approved sont { type: ‘approved’ }.
Le message de changement de statut ne doit être envoyé que si l'utilisateur soumet le formulaire de demande. N'envoyez pas de signal pending ou approved si le client quitte sans soumettre le formulaire.
Message de fermeture
Rokt s'attend à recevoir un message close chaque fois que l'utilisateur ferme le formulaire de demande, indépendamment de la complétion de la demande. Rokt déchargera votre fenêtre dès qu'un message close sera reçu.
Les données du message close sont { type: ‘close’ }
Les utilisateurs peuvent fermer le formulaire de demande en interagissant avec l'un des boutons du formulaire. Si votre formulaire n'a pas de bouton "fermer" et que vous comptez sur le bouton "X" dans l'iFrame du plugin Rokt pour fermer votre demande, vous n'êtes pas tenu d'envoyer ce signal.
Exemples d'implémentation
Cet exemple d'implémentation peut être utilisé directement dans votre application :
const roktIntegration = (function(origin) {
const targetOrigin = origin || window.location.origin;
const roktWindow = window.opener || window.parent;
return {
initiated() {
roktWindow.postMessage({ type: 'initiated' }, targetOrigin);
},
close() {
roktWindow.postMessage({ type: 'close' }, targetOrigin);
},
approved() {
roktWindow.postMessage({ type: 'approved' }, targetOrigin);
},
pending() {
roktWindow.postMessage({ type: 'pending' }, targetOrigin);
},
};
})(/* votre domaine de page ici */);
// Après le chargement ou dès que votre application est prête / interactive
roktIntegration.initiated();
// ,,, l'utilisateur termine votre application
// Si l'application a été approuvée par votre système
roktIntegration.approved();
// Si l'application a été refusée ou est en attente d'une analyse plus approfondie
roktIntegration.pending();
// Avant de terminer l'application
roktIntegration.close(); // Le message de fermeture fermera votre fenêtre pour vous.
Alternativement, vous pouvez implémenter ce qui suit :
// Après le chargement ou dès que votre application est prête / interactive
(window.opener || window.parent).postMessage({ type: 'initiated' }, /* votre domaine de page ou */ window.location.origin);
// ,,, l'utilisateur termine votre application
// Si l'application a été approuvée par votre système
(window.opener || window.parent).postMessage({ type: 'approved' }, /* votre domaine de page ou */ window.location.origin);
// Si l'application a été refusée ou est en attente d'une analyse plus approfondie
(window.opener || window.parent).postMessage({ type: 'pending' }, /* votre domaine de page ou */ window.location.origin);
// Avant de terminer l'application
(window.opener || window.parent).postMessage({ type: 'close' }, /* votre domaine de page ou */ window.location.origin); // Le message de fermeture fermera votre fenêtre pour vous.
Suivi des conversions
Les annonceurs et les fournisseurs doivent intégrer une solution de suivi des conversions. La mise en place d'un rapport automatique de conversion vous aide à mesurer l'impact de vos campagnes sur votre entreprise. Rokt propose plusieurs façons d'intégrer vos données de conversion. Pour une précision maximale, nous recommandons d'utiliser le Rokt Web SDK ou l'API d'événements. Les instructions pour chaque méthode sont répertoriées ci-dessous :
Bien que cela ne soit pas recommandé, vous pouvez également fournir des données de conversion via un téléchargement manuel de fichiers. Les données de conversion retardées ne doivent être utilisées que lorsque aucune autre solution de suivi des conversions n'est possible, car elles ont des implications importantes pour nos modèles de prédiction (c'est-à-dire la pertinence), restreignent l'accès aux outils intelligents et perturbent les capacités de rapport et d'analyse.
Approbations en attente
Le SDK Web ne suivra que les applications qui peuvent être approuvées en temps réel lorsque le client soumet la demande. Les demandes en attente qui nécessitent un examen supplémentaire avant qu'une décision d'approbation puisse être prise doivent néanmoins être fournies à Rokt afin que nous puissions capturer toutes les conversions attribuées à Rokt. Pour intégrer les données d'approbation en attente, nous vous recommandons d'utiliser l'API d'événement. En utilisant l'API d'événement, votre serveur backend peut se connecter en toute sécurité à celui de Rokt, transmettant les données de conversion une fois qu'une décision a été prise concernant le succès d'une demande de carte de crédit.
Suivez ces instructions pour intégrer l'API d'événement.
Pour attribuer correctement les conversions, vous devez inclure l'un des éléments suivants dans objectData : l'e-mail (email), l'e-mail haché en SHA-256 (emailsha256) ou l'identifiant de suivi Rokt (passbackconversiontrackingid), afin que Rokt puisse identifier le client. L'identifiant de suivi Rokt est l'identifiant préféré pour la plupart des institutions financières qui font de la publicité avec Rokt.
::