click-to-launch
Cliquez pour lancer est une solution d'intégration pour les partenaires qui souhaitent afficher un emplacement uniquement après qu'un client interagit avec un bouton natif sur leur site. Veuillez consulter ci-dessous les instructions de mise en œuvre :
Intégration du clic pour lancer
- Chargez l'Intégration Rokt sur votre page en incluant la balise script Rokt dans le
<head>du site Web.
<head>
<script
async
crossorigin="anonymous"
id="rokt-launcher"
fetchpriority="high"
src="https://apps.rokt.com/wsdk/integrations/launcher.js"
type="module"
></script>
</head>
Alternativement, vous pouvez ajouter le fragment de code suivant dans la logique JavaScript déjà livrée à votre application :
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";
target.appendChild(script);
Créez une instance du Lanceur d'Intégration. Si vous copiez l'exemple ci-dessous, assurez-vous que
rokt-account-idest remplacé par l'ID unique de votre compte. Vous pouvez obtenir votrerokt-account-idauprès de votre responsable de compte ou dans One Platform.La référence à la promesse du lanceur doit être stockée afin d'être réutilisée plus tard dans le flux de l'application. Cela pourrait être fait en l'attribuant à un état global, en le fournissant comme un Contexte React, un Service Angular ou de toute autre manière appropriée à votre cadre de choix.
const launcherPromise = new Promise((resolve, reject) => {
script.onload = () =>
resolve(window.Rokt.createLauncher({ accountId: "rokt-account-id" }));
script.onerror = (error) => reject(error);
});
Initialisez le Lanceur d'Intégration lorsque le client se trouve sur la page où l'événement de clic se produira.
Chargez votre emplacement. Lorsque le client clique sur le bouton que vous avez défini comme déclencheur pour charger votre emplacement, il devrait se charger de manière transparente. Le service Lanceur d'Intégration devrait être en cours d'exécution à ce stade et le site doit simplement déclencher la sélection de l'offre. La sélection de l'emplacement peut être déclenchée lorsque la page et l'élément déclencheur ont terminé de charger.
Si le rendu de l'élément ancre peut être retardé sur votre page, par exemple, susceptible de requêtes XHR supplémentaires qui pourraient le retarder davantage, vous devriez attendre que l'élément ancre soit rendu avant de déclencher une sélection.
async function configurePlacement() {
let launcher = await launcherPromise;
let selection = await launcher.selectPlacements({
attributes: {
email: "j.smith@example.com"
},
identifier: "button.click",
});
}
Cliquez pour fermer
Si vous souhaitez fermer un emplacement lors d'un clic sur un bouton, vous devrez maintenir l'état de la sélection de l'emplacement. La sélection peut être undefined lorsque l'emplacement n'est pas affiché, et réassignée pour référencer l'emplacement lors du clic sur le bouton dans la fonction configurePlacement. Cela pourrait être fait en l'assignant à un état global, en le fournissant comme un Contexte React, un Service Angular ou de toute manière appropriée à votre framework de choix.
Lors de la fermeture d'un emplacement, le site partenaire doit déclencher une méthode sur le service Rokt pour supprimer les emplacements sur la page actuelle et effectuer le nettoyage.
// fermer la sélection de l'emplacement
selection.close();
Si vous rendez un emplacement intégré, vous voudrez peut-être supprimer l'élément HTML de l'ancre pour ne pas affecter la mise en page du site. Voir l'exemple ci-dessous.
// supprimer Div Rokt
let removeRokt = document.getElementById('rokt-placeholder')
removeRokt.remove();