Cliquez pour lancer l'intégration
Cliquer pour lancer est une solution d'intégration pour les partenaires qui souhaitent afficher un emplacement uniquement après qu'un client interagisse avec un bouton natif sur leur site. Veuillez voir ci-dessous les instructions d'implémentation :
Intégration cliquez pour lancer
- Chargez l'intégration Rokt sur votre page en incluant la balise de 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 snippet 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-idsoit remplacé par l'ID unique de votre compte. Vous pouvez obtenir votrerokt-account-idauprès de votre responsable de compte ou sur 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 peut ê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.
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 un client est sur la page où l'événement de clic se produira.
Chargez votre emplacement. Lorsque un client clique sur le bouton que vous avez défini comme le déclencheur pour charger votre emplacement, cela devrait se charger sans problème. Le service du Lanceur d'Intégration devrait être en cours d'exécution à ce moment-là et le site n'a besoin que de 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 se charger.
Si le rendu de l'élément d'ancrage peut être retardé sur votre page, par exemple, susceptible de subir des requêtes XHR supplémentaires qui pourraient le retarder encore, vous devriez 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 placement par un clic sur un bouton, vous devrez maintenir l'état de la sélection du placement. La sélection peut être undefined lorsque le placement n'est pas affiché, et réattribuée pour référencer le placement lors du clic sur le bouton dans la fonction configurePlacement. Cela peut ê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.
Lorsque vous fermez un placement, le site partenaire doit déclencher une méthode sur le service Rokt pour supprimer les placements de la page actuelle et effectuer un nettoyage.
// fermer la sélection de placement
selection.close();
Si vous rendant un placement 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 le Div Rokt
let removeRokt = document.getElementById('rokt-placeholder')
removeRokt.remove();