Cliquez pour lancer l'intégration
Cliquez pour lancer est une solution d'intégration pour les partenaires qui souhaitent afficher un emplacement uniquement après qu'un client ait interagi avec un bouton natif sur leur site. Veuillez consulter les instructions ci-dessous pour la mise en œuvre :
Intégration de Cliquez pour lancer
- Chargez l'intégration Rokt sur votre page en incluant la balise de script Rokt dans la
<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 code suivant dans la logique JavaScript déjà fournie à 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
roktAccountIdest remplacé par l'ID unique de votre compte. Vous pouvez obtenir votreroktAccountIdauprès de votre gestionnaire de compte ou sur One Platform.La référence à la promesse du lanceur doit être stockée afin d'être réutilisée ultérieurement dans le flux de l'application. Cela peut être fait en l'assignant à un état global, en le fournissant en tant que contexte React, en tant que service Angular ou de toute autre manière appropriée à votre framework 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. Lorsqu'un client clique sur le bouton que vous avez défini comme déclencheur pour charger votre emplacement, cela devrait se charger de manière transparente. Le service de lanceur d'intégration doit ê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 fini de se charger.
Si le rendu de l'élément d'ancrage peut être retardé sur votre page, par exemple en raison de demandes XHR supplémentaires qui pourraient le retarder davantage, vous devez attendre que l'élément d'ancrage 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 peut être fait en l'assignant à un état global, en le fournissant en tant que contexte React, service Angular ou de toute autre 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 de la page actuelle et effectuer le nettoyage.
// fermer la sélection de l'emplacement
selection.close();
Si vous affichez un emplacement intégré, vous voudrez peut-être supprimer l'élément HTML d'ancrage pour ne pas affecter la mise en page du site. Voir l'exemple ci-dessous.
// supprimer la div Rokt
let removeRokt = document.getElementById('rokt-placeholder')
removeRokt.remove();