Intégrez votre application web intégrée

Résumé des exigences d'intégration :

• Fournir une URL pour une application web pouvant être rendue dans un iFrame.
• Mettre à jour la politique de sécurité du contenu (CSP) de votre application web pour permettre l'hébergement dans le domaine de Rokt.
• Implémenter des signaux de message en temps réel permettant à Rokt de répondre aux changements d'état.
• Intégrer une solution de suivi des conversions.

Rendre l'application web intégrée dans un iFrame

Rokt gère un plugin wrapper qui intègre votre page web dans un iFrame, permettant des interactions transparentes directement sur une page partenaire. Ce plugin facilite la communication entre le Web SDK et la page partenaire et fournit une frontière d'isolation de sécurité entre votre page, Rokt et la page partenaire. Le plugin d'action intégrée est hébergé sur votre domaine et doit être construit comme une application web standard en utilisant le framework de votre choix. Pour chaque produit ou service que vous proposez, vous devez fournir une URL.

L'interaction entre votre page web et le plugin Rokt est activée via le passage de messages basé sur le navigateur. Le plugin d'action intégrée de Rokt est réactif — il redimensionne et centre la page pour s'adapter à l'écran de l'utilisateur tout en appliquant des dégradés d'arrière-plan pour une intégration transparente.

L'interaction entre votre page web 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é du contenu (CSP)

Assurez-vous que la politique de sécurité du contenu (CSP) de votre application web autorise 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 l'application.

Rokt charge l'URL fournie en tant qu'iFrame d'origine croisée. Cela offre un bac à sable de sécurité où vous conservez un contrôle maximal sur votre page. Si vous utilisez des CSP, vous devrez explicitement accorder à Rokt (https://apps.rokt.com) la permission de rendre votre page dans un iFrame en utilisant la directive frame-ancestors. Cette directive doit être ajoutée uniquement pour les pages rendues dans l'iFrame de Rokt.

Signaux de messages en temps réel

Rokt fournit un mécanisme pour que votre application web envoie des signaux de messages en temps réel représentant les interactions des utilisateurs dans le navigateur. Ces signaux permettent à Rokt de :

• Répondre dynamiquement : Par exemple, afficher un message de succès lorsqu'un client termine une transaction.
• Déclencher des changements d'état : Tels que réduire la fenêtre lorsque l'iFrame est fermée.
• Collecter des données importantes : Assurant que Rokt peut rendre le contenu de placement le plus pertinent et suivre avec précision la progression de l'utilisateur.

Pour toute décision en attente qui est résolue ultérieurement, vous devez communiquer ces résultats à Rokt via l'Event API 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.

Ci-dessous se trouve un tableau des signaux pris en charge et leurs descriptions :

Action sur le site web	Description	Intégration requise
Initialized	Envoyé lorsque la page de destination se charge avec succès et que le site est prêt pour l'interaction.	True
Complete Registration	Envoyé lorsqu'un utilisateur a soumis avec succès des informations en échange d'un service fourni par votre entreprise. Par exemple, enregistré pour un compte	False
Logged In	Indique qu'un utilisateur a authentifié avec succès son compte.	False
Lead	Envoyé lorsqu'un client soumet des informations (par exemple, s'inscrire pour un essai ou remplir un formulaire) avec la compréhension qu'il peut être contacté plus tard.	False
Subscribe	Envoyé lorsqu'un utilisateur initie un abonnement payant pour l'un de vos produits ou services.	False
Application Submitted	Envoyé lorsque l'utilisateur soumet une demande de carte de crédit	True uniquement pour les offres de cartes de crédit
Application Approved	Envoyé lorsque la demande de carte de crédit de l'utilisateur est instantanément approuvée en temps réel.	True uniquement pour les offres de cartes de crédit
Terminé	Envoyé lorsque l'utilisateur termine avec succès l'action souhaitée sur votre site annonceur (par exemple, finaliser un achat).	Vrai
Fermeture du fournisseur	Envoyé lorsqu'un utilisateur quitte le formulaire en retournant au paiement (par exemple, en cliquant sur le bouton « retourner au paiement »).	Vrai

Envoi de signaux de message

En raison du bac à sable de sécurité fourni par l'iFrame cross-origin, Rokt ne peut pas accéder au contenu de votre application web. Par conséquent, il est crucial que votre formulaire communique son statut en envoyant des signaux de message en utilisant l'API postMessage du navigateur à la fenêtre Rokt. Par exemple :

roktWindow.postMessage({ type: 'initiated' }, ‘https://your.domain.com’);

IMPORTANT

• Fournissez toujours un targetOrigin spécifique à chaque appel postMessage (évitez d'utiliser *). Pour des raisons de sécurité, Rokt ignorera les messages qui ne proviennent pas de votre domaine spécifié.
• Rokt n'envoie aucun message en retour à votre application web, vous ne devez donc pas écouter les événements « message ».
• Votre application web est ouverte par Rokt, avec la référence de la fenêtre disponible dans window.opener. Si cela n'est pas fourni, utilisez window.parent comme alternative.

const roktWindow = window.opener || window.parent; roktWindow.postMessage(...);

Messages

Initialisation du formulaire

Rokt s'attendra à recevoir un message 'initialized' dès que votre application est chargée.

IMPORTANT

Il est crucial pour Rokt de recevoir ce message pour savoir que votre page web a été rendue. L'absence de ce message sera considérée comme une anomalie et nécessitera une enquête de la part de Rokt.

Messages de progression

Rokt accepte les messages de "progression" suivants pour suivre les étapes du parcours de conversion d'un utilisateur. Ceux-ci peuvent être utiles pour les rapports et l'optimisation des campagnes. Au minimum, le message completed est requis pour indiquer que l'utilisateur a effectué l'action souhaitée sur votre site (par exemple, finaliser un achat).

• Utilisez 'loggedIn' lorsqu'un utilisateur se connecte avec succès à son compte.
• Utilisez 'completeRegistration' lorsqu'un utilisateur termine son processus d'inscription.
• Utilisez 'subscribe' lorsqu'un utilisateur initie un abonnement payant pour l'un de vos produits ou services.
• Utilisez 'lead' lorsqu'un client soumet des informations (par exemple, s'inscrire à un essai ou remplir un formulaire) avec la compréhension qu'il pourra être contacté ultérieurement.
• Utilisez 'applicationSubmitted' lorsqu'un client soumet sa demande de carte de crédit
• Utilisez 'applicationApproved' lorsqu'une demande de carte de crédit d'un client est approuvée instantanément

IMPORTANT

Au minimum, le message completed est requis pour indiquer que l'utilisateur a effectué l'action souhaitée sur votre site. Pour les annonceurs de cartes de crédit hébergeant un formulaire de demande sur Rokt, applicationSubmitted et applicationApproved sont requis pour optimiser les taux de demande à approbation.

Sortie du formulaire

Rokt s'attend à un message providerClose chaque fois que l'utilisateur quitte le formulaire, que l'action souhaitée ait été complétée ou non. Rokt déchargera votre fenêtre dès qu'un message de fermeture est reçu.

IMPORTANT

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émentation

Ce 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);
    },  
    loggedIn() {
      roktWindow.postMessage({ type: 'loggedIn' }, targetOrigin);
    },  
    completeRegistration() {
      roktWindow.postMessage({ type: 'completeRegistration' }, targetOrigin);
    },  
    applicationSubmitted() {
      roktWindow.postMessage({ type: 'applicationSubmitted' }, targetOrigin);
    },  
    applicationApproved() {
      roktWindow.postMessage({ type: 'applicationApproved' }, targetOrigin);
    },  
    completed() {
      roktWindow.postMessage({ type: 'completed' }, targetOrigin);
    },  
    providerClose() {
      roktWindow.postMessage({ type: 'providerClose' }, targetOrigin);
    }  
  };    
})(/* votre domaine de page ici */);
   

// Exemple d'utilisation :  
// Au chargement de la page d'accueil  
roktIntegration.initiated();  

// Lorsque l'utilisateur se connecte  
roktIntegration.loggedIn();  

// Lorsqu'un nouveau compte est créé  
roktIntegration.completeRegistration();  

// Lorsque le formulaire de demande de carte de crédit est soumis  
roktIntegration.applicationSubmitted();

// Lorsque le formulaire de demande de carte de crédit est approuvé  
roktIntegration.applicationApproved();  

// Lorsqu'une action est complétée  
roktIntegration.completed();  

// Lorsque l'utilisateur termine le processus via le bouton "retourner à la caisse"  
roktIntegration.providerClose();

Alternativement, vous pouvez envoyer directement des messages sans l'enveloppe :

const roktWindow = window.opener || window.parent;

// Au chargement de la page d'accueil :
roktWindow.postMessage({ type: 'initiated' }, /* votre domaine de page ou */ window.location.origin);

// Lors de la connexion de l'utilisateur :
roktWindow.postMessage({ type: 'loggedIn' }, /* votre domaine de page ou */ window.location.origin);

// Lors de la création de compte :
roktWindow.postMessage({ type: 'completeRegistration' }, /* votre domaine de page ou */ window.location.origin);

// Lors de la soumission du formulaire de demande de carte de crédit (si applicable) :
roktWindow.postMessage({ type: 'applicationSubmitted' }, /* votre domaine de page ou */ window.location.origin);

// Sur l'approbation de la demande de carte de crédit (si applicable) :
roktWindow.postMessage({ type: 'applicationApproved' }, /* votre domaine de page ou */ window.location.origin);

// Sur l'action terminée :
roktWindow.postMessage({ type: 'completed' }, /* votre domaine de page ou */ window.location.origin);

// Sur la sortie ou le retour au paiement :
roktWindow.postMessage({ type: 'providerClose' }, /* votre domaine de page ou */ window.location.origin); // le message providerClose fermera votre fenêtre pour vous

Suivi des conversions

Les annonceurs et les fournisseurs sont tenus d'intégrer une solution de suivi des conversions. Configurer le 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 (Event API). Les instructions pour chaque méthode sont listées ci-dessous :

• SDK Web
• API d'événements

Bien que cela ne soit pas recommandé, vous pouvez alternativement fournir des données de conversion via un téléchargement de fichier manuel. Les données de conversion retardées ne devraient être utilisées que lorsqu'aucune autre solution de suivi des conversions n'est possible, car cela a des implications significatives pour nos modèles de prédiction (c'est-à-dire la pertinence), restreint l'accès aux outils intelligents et perturbe 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 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 (Event API). En utilisant l'API d'événements, votre serveur backend peut se connecter en toute sécurité à celui de Rokt, en 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énements.

remarque

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.

Sécurité et Confidentialité

Propriété des données de l'application

Votre page est rendue dans un iframe inter-domaine pour fournir un bac à sable de sécurité. Rokt et ses partenaires ne pourront pas accéder à vos données de formulaire d'application ni les recevoir. Les informations que les clients saisissent dans le formulaire d'application ne vous seront fournies qu'à vous et seront stockées par vous sur vos propres serveurs. Les utilisateurs peuvent, bien sûr, choisir de partager les mêmes informations ou des informations similaires directement avec les partenaires sur la page de commerce électronique. Une grande partie des mêmes informations, telles que le nom et l'adresse, est requise pour compléter un achat sur le site du partenaire d'origine. Vous n'aurez pas accès à aucune donnée PII (Personally Identifiable Information) fournie directement par les clients aux partenaires.

Stockage des données de l'application

Rokt n'a pas accès aux données des clients saisies dans votre formulaire d'application. Par conséquent, les données des clients ne sont pas stockées sur les serveurs de Rokt pour les campagnes d'application intégrées.

Politiques de sécurité de Rokt

Voici quelques mesures de sécurité mises en œuvre par Rokt pour atténuer les vulnérabilités et vous protéger de toute forme de communication avec votre application web, sauf par le biais d'implémentations postmessage explicitement définies.

• Bien que Rokt n'essaiera jamais d'accéder au contenu de votre application, Rokt définira la configuration CSP (Content Security Policy) la plus sécurisée pour l'iFrame hébergeant votre application, rendant tout accès externe impossible.
• Rokt utilise une API de messagerie de canal (Channel Messaging API) à la fois du côté expéditeur et récepteur. Cela vise à empêcher les tiers d'envoyer ou de recevoir des messages via window.postmessage().
• Rokt n'envoie aucun identifiant ou jeton via window.postmessage().
• Rokt n'utilisera aucun type de canal de communication, ce qui signifie que votre application n'a pas besoin d'écouter les événements "message".
• Rokt implémente la directive CSP frame-ancestors pour se défendre contre le clickjacking.

Rokt dispose d'un processus détaillé pour gérer tout incident de sécurité, qui inclut un examen interne complet de tout incident.