Intégration du clic pour lancer
Le clic pour lancer est une solution d'intégration pour les partenaires qui souhaitent afficher un emplacement uniquement après qu'un client a interagi 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 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 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 de l'Integration Launcher. 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 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 plus tard dans le flux de l'application. Cela peut être fait en l'assignant à un état global, en le fournissant comme un React Context, un Angular Service 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 l'Integration Launcher lorsque le client est 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 sans problème. Le service Integration Launcher devrait être en cours d'exécution à ce stade 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 charger.
Si le rendu de l'élément d'ancrage peut être retardé sur votre page, par exemple, s'il est susceptible de requêtes XHR supplémentaires qui pourraient le retarder davantage, 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 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 comme un React Context, un Angular Service 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 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 d'ancrage pour ne pas affecter la mise en page du site. Voir l'exemple ci-dessous.
// supprimer le Div de Rokt
let removeRokt = document.getElementById('rokt-placeholder')
removeRokt.remove();