Intégrez votre formulaire d'application
Résumé des exigences d'intégration :
- Fournissez une URL d'application qui peut être rendue dans un iFrame.
- Mettez à jour votre politique de sécurité de contenu (CSP) de l'application.
- Implémentez des signaux d'événements d'application en temps réel.
- Intégrez une solution de suivi des conversions.
Rendre l'application dans un iFrameLien direct vers Rendre l'application dans un iFrame
Rokt gère un plugin wrapper qui intègre le formulaire d'application dans un iframe pour permettre des applications directement sur une page partenaire. Ce plugin fait office de proxy pour la communication avec le SDK Web ainsi qu'avec la page partenaire. Le plugin d'application 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 d'application. L'interaction entre la page d'application de carte de crédit et le plugin Rokt est activée via le passage de messages basé 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 aux écrans des utilisateurs ainsi que créer des dégradés de fond.
Pour résumer, le plugin fournisseur Rokt (iFrame) :
- Fait office de proxy pour la communication avec le SDK Web ainsi que la page parente.
- Est hébergé sur votre domaine et doit être une application web standard.
- Doit inclure l'URL de la page d'application dans les champs de données pour chaque carte de crédit unique que vous proposerez via Rokt.
L'interaction entre la page d'application de carte de crédit et le plugin Rokt sera activée via le passage de messages basé sur le navigateur. Les détails spécifiques de l'implémentation avec des exemples de code sont inclus ci-dessous.
Considérations sur la politique de sécurité de contenuLien direct vers Considérations sur la politique de sécurité de contenu
Veuillez confirmer que la politique de sécurité de contenu (CSP) de votre formulaire d'application de carte de crédit permet l'hébergement via les domaines de Rokt : https://apps.rokt.com et https://apps.rokt-api.com. Sinon, le plugin de Rokt ne pourra pas héberger le formulaire d'application. Rokt charge le formulaire d'URL fourni comme un iframe d'origine croisée -- ce qui signifie que Rokt ne peut interagir avec la page que par des permissions explicites données par le CSP de la page. Dans la définition du CSP, nous recommandons que vous listiez explicitement https://apps.rokt.com et https://apps.rokt-api.com dans la section des frame-ancestors. Cela garantit que seuls les domaines Rokt ont la capacité d'intégrer le formulaire d'application. Ce faisant, vous êtes protégé contre l'injection de scripts tiers sur votre page web.
Décisions d'application en temps réelLien direct vers Décisions d'application en temps réel
Le processus de demande de carte de crédit doit communiquer les décisions d'application (comme approuvé instantanément, en attente ou refusé) avec Rokt en temps réel via l'API du plugin, cela garantit que nous affichons un contenu de placement pertinent. Pour toute décision en attente qui est résolue ultérieurement, vous devez communiquer ces résultats à Rokt via l'API d'événements 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 fournit un mécanisme pour que les fournisseurs de cartes envoient des signaux d'événements 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 succès lorsque les clients terminent la demande). Ils fournissent également des données d'événements importantes pour le reporting et la détection d'anomalies. Rokt n'a aucune visibilité sur le contenu du formulaire de demande ou les interactions des clients avec votre formulaire. Par conséquent, nous comptons sur le formulaire de demande pour nous envoyer des informations sur le statut à la fenêtre parente pour permettre le rapport sur la progression et le succès de la demande, ainsi que pour surveiller quand ils ont terminé ou quitté le formulaire afin de réduire la fenêtre.
| Signal | Description |
|---|---|
| Application Initiée | Le formulaire de demande a été chargé et est prêt pour l'interaction utilisateur. |
| Application Fermée | L'utilisateur ferme la demande. |
| Application Approuvée | La demande de l'utilisateur est approuvée instantanément en temps réel. |
| Application En Attente | La demande de l'utilisateur est en attente de révision par le fournisseur. |
Envoi de messages de statutLien direct vers Envoi de messages de statut
Rokt ne peut accéder à aucun contenu de votre formulaire de demande et c'est pourquoi il est important que votre application communique avec Rokt pour nous informer du statut de la demande du client.
Au cours du cycle de vie de votre flux d'application, Rokt s'attend à recevoir trois messages : « Initiée » « Approuvée » ou « En Attente » « Fermée »
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 recommandons de fournir un
targetOriginspécifique sur 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 d'événements "message".
- Votre application sera ouverte par Rokt. La référence de la fenêtre Rokt est dans
window.opener. Néanmoins, il est possible que l'opener ne soit pas fourni, dans ce cas vous devriez revenir àwindow.parent.
const roktWindow = window.opener || window.parent; roktWindow.postMessage(...);
MessagesLien direct vers Messages
Message initié
Rokt s'attendra à un message initiated dès que votre application est chargée.
Les données du message sont { type: 'initiated' }
Il est très important pour Rokt de recevoir ce message pour savoir que votre formulaire d'application a été rendu. L'absence de ce message sera considérée comme une anomalie et entraînera une enquête de la part de Rokt.
Message de statut de progression
Rokt s'attendra à un message pending ou approved, selon le résultat de l'application.
En attente doit être envoyé si l'utilisateur complète votre application, mais que vous ne pouvez pas approuver cette application immédiatement.
Les données du message pending sont { type: ‘pending’}.
Approuvé ne doit être envoyé que si vous êtes en mesure d'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 d'application. Ne pas envoyer de signal en attente ou approuvé si le client quitte sans soumettre le formulaire.
Message de fermeture
Rokt s'attendra à un message close chaque fois que l'utilisateur ferme le formulaire d'application, que l'application soit complétée ou non. Rokt déchargera votre fenêtre dès qu'un message close est reçu.
Les données du message close sont { type: ‘close’ }
Les utilisateurs peuvent fermer le formulaire d'application en interagissant avec l'un des boutons du formulaire. Si votre formulaire n'a pas de bouton "fermer" et que vous vous fiez au bouton "X" dans l'iFrame du plugin Rokt pour fermer votre application, alors vous n'êtes pas tenu d'envoyer ce signal.
Exemples d'implémentationLien direct vers Exemples d'implémentation
Cet exemple d'implémentation peut être utilisé directement sur 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);
},
};
})(/* your page domain here */);
// After load or as soon your application is ready / interactive
roktIntegration.initiated();
// ,,, user completes your application
// If the application was approved by your system
roktIntegration.approved();
// If the application was denied or it is pending to further analysis
roktIntegration.pending();
// Before terminating the application
roktIntegration.close(); // Close message will close your window for you.
Alternativement, vous pouvez implémenter ce qui suit :
// After load or as soon your application is ready / interactive
(window.opener || window.parent).postMessage({ type: 'initiated' }, /* your page domain or */ window.location.origin);
// ,,, user completes your application
// If the application was approved by your system
(window.opener || window.parent).postMessage({ type: 'approved' }, /* your page domain or */ window.location.origin);
// If the application was denied or it is pending to further analysis
(window.opener || window.parent).postMessage({ type: 'pending' }, /* your page domain or */ window.location.origin);
// Before terminating the application
(window.opener || window.parent).postMessage({ type: 'close' }, /* your page domain or */ window.location.origin); // Close message will close your window for you.
Suivi de conversionLien direct vers Suivi de conversion
Les annonceurs et partenaires e-commerce sont tenus d'intégrer une solution de suivi des conversions. La mise en place d'un rapport de conversion automatique vous aide à mesurer l'impact de vos campagnes sur votre entreprise. Rokt offre plusieurs façons d'intégrer vos données de conversion. Pour une précision maximale, nous recommandons d'utiliser le SDK Web Rokt ou l'API d'événements. Les instructions pour chaque méthode sont listées ci-dessous :
Bien qu'il ne soit pas recommandé, vous pouvez alternativement fournir des données de conversion via un téléchargement manuel de fichier. Les données de conversion retardées ne doivent être utilisées que lorsqu'aucune autre solution de suivi des conversions n'est possible, car elles ont des implications significatives 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 attenteLien direct vers Approbations en attente
Le SDK Web ne suivra que les applications qui peuvent être approuvées en temps réel lorsque le client soumet l'application. Les applications en attente qui nécessitent un examen supplémentaire avant qu'une décision d'approbation puisse être prise doivent toujours ê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 recommandons d'utiliser l'API d'événements. En utilisant l'API d'événements, 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.
Pour attribuer correctement les conversions, vous devez inclure l'un des éléments suivants : email (email), email haché SHA-256 (emailsha256), ou ID de suivi Rokt (passbackconversiontrackingid) dans objectData afin que Rokt puisse identifier le client. L'ID de suivi Rokt est l'identifiant préféré pour la plupart des institutions de services financiers qui font de la publicité avec Rokt.