SiteMonetization
Ajouter un placement Rokt à votre site est la première étape pour les partenaires de Rokt Ecommerce. Les emplacements sont des iframes flexibles utilisés pour afficher tout type de campagne Rokt.
Pour configurer un emplacement sur votre site web, vous pouvez utiliser le SDK Web (instructions ci-dessous). Rokt propose également une gamme de SDK mobiles pour configurer des emplacements sur des applications natives Android, iOS, React Native et Flutter.
Les magasins Shopify peuvent configurer un emplacement Rokt en quelques secondes en utilisant l'application Rokt Ecommerce — aucun codage nécessaire !
Ce guide est destiné aux sites web construits comme des applications multipages. Si votre site est une application à page unique, vous devez suivre ces instructions.
1. Charger Rokt sur votre page
Votre gestionnaire de compte peut vous fournir votre code d'intégration, ou vous pouvez le trouver dans my.rokt.com.
Votre code d'intégration inclut un identifiant client (nous recommandons l'adresse e-mail brute du client) et des attributs de données. Lisez-en plus sur pourquoi Rokt demande des identifiants personnels et attributs de données.
Code d'intégration exemple
La première étape pour intégrer avec Rokt est de charger le SDK Web dans votre site. Pour les meilleures performances, nous vous encourageons à charger le script Rokt en utilisant la structure ci-dessous.
Si vous utilisez Google Tag Manager, veuillez vous assurer que le champ document.write est coché et voir les étapes de mise en œuvre recommandées.
Si vous copiez l'exemple ci-dessous, assurez-vous que rokt-account-id est remplacé par l'ID unique de votre compte. Voir Où puis-je trouver mon ID Rokt? pour les instructions.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Balises méta -->
<!-- Partie #1 - Charger le SDK Web -->
<script type="module">
window.RoktLauncherScriptPromise = new Promise((resolve, reject) => {
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";
script.addEventListener('load', () => resolve());
script.addEventListener('error', (error) => reject(error));
target.appendChild(script);
});
</script>
<!-- Autres scripts et balises méta -->
</head>
<body>
<!-- Votre contenu HTML ici -->
<!-- Partie #2 - Dès que les attributs de données sont disponibles, exécutez le script ci-dessous pour afficher un emplacement Rokt -->
<script type="module">
await window.RoktLauncherScriptPromise;
const launcher = await window.Rokt.createLauncher({
accountId: "rokt-account-id",
sandbox: true,
});
await launcher.selectPlacements({
attributes: {
email: "",
firstname: "",
lastname: "",
confirmationref: "",
billingzipcode: "",
amount: "",
paymenttype: "",
ccbin: "",
mobile: "",
country: "",
language: "",
currency: "",
billingaddress1: "",
billingaddress2: "",
age: "",
gender: "",
cartItems: JSON.stringify(cartItems),
},
});
</script>
<!-- Votre contenu HTML ici -->
</body>
</html>
Pour obtenir les meilleures performances, intégrez le SDK Web dès le début (par exemple dans <head></head>) et activez ensuite l'appel selectPlacements dès que les attributs de données sont disponibles pour être intégrés.
Dans l'exemple ci-dessus, sandbox: true est utilisé pour tester l'intégration dans un environnement de test. Lorsque vous êtes prêt à passer en production, définissez sandbox: false ou supprimez-le complètement.
Lorsque vous ajoutez le SDK Web à votre page, assurez-vous d'intégrer les attributs de données, afin de pouvoir offrir aux clients le message le plus pertinent disponible pour eux. Cela représente généralement une combinaison de données à la fois client et transactionnelles. Votre gestionnaire de compte peut vous guider dans le choix des attributs optimaux à intégrer en fonction du secteur d'activité dans lequel vous opérez.
Rokt recommande une intégration directe en tant que bonne pratique, mais l'option d'intégrer avec un gestionnaire de balises est disponible.
2. Configurer les pages et les emplacements
L'équipe Rokt configurera les pages et les emplacements pertinents pour vous sur One Platform. Nous pouvons personnaliser votre emplacement pour correspondre à vos directives de marque et aux besoins UX.
Emplacements intégrés
Si vous prévoyez d'ajouter un emplacement intégré à votre site, vous devez spécifier l'élément HTML auquel l'emplacement doit être ancré. Par exemple : <div id="rokt-placeholder"></div>. Informez l'équipe Rokt de l'élément ciblé par l'emplacement.
3. Testez votre intégration
Assurez-vous que le SDK Web se charge sur la bonne page et inclut les attributs corrects.
Lisez notre guide sur tester votre intégration.
Si des problèmes de vitesse de chargement existent, vous pouvez utiliser un iframe préparatif pour les résoudre. Vous pouvez en savoir plus sur les avantages de l'iframe préparatif ici.
Plus d'informations
- Référence générale du SDK Web
- Sécurité du SDK Web
- Intégration de données en deux étapes
- Cryptage des attributs en transit
- Intégrations des applications à page unique
Ajoutez un emplacement Rokt à vos applications mobiles iOS, Android, React Native, ou Flutter.