SiteMonetization
Ajouter un emplacement Rokt à votre site est la première étape pour les partenaires de Rokt Ecommerce. Les emplacements sont des iframes flexibles utilisées 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 boutiques 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 sur 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 des attributs de données.
Exemple de code d'intégration
La première étape pour intégrer Rokt est de charger le SDK Web sur votre site. Pour obtenir 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 consultez les étapes d'implémentation 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 Web SDK -->
<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 des performances optimales, intégrez le Web SDK tôt (par exemple dans <head></head>) puis activez 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 sandbox. Lorsque vous êtes prêt à passer en production, réglez sandbox: false ou retirez-le complètement.
Lorsque vous ajoutez le Web SDK à votre page, assurez-vous d'intégrer les attributs de données, afin de pouvoir servir aux clients le message le plus pertinent disponible pour eux. Il s'agit généralement d'une combinaison de données client et transactionnelles. Votre gestionnaire de compte peut vous guider sur les attributs optimaux à intégrer en fonction du secteur dans lequel votre entreprise opère.
Rokt recommande une intégration directe comme meilleure 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 emplacements pertinents pour vous dans One Platform. Nous pouvons personnaliser votre emplacement pour correspondre à vos directives de marque et 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 que l'emplacement doit cibler.
3. Tester votre intégration
Assurez-vous que le Web SDK 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 Web SDK
- Sécurité du Web SDK
- Chiffrement des attributs en transit
- Intégrations d'applications à page unique
Ajoutez un emplacement Rokt à vos applications mobiles iOS, Android, React Native, ou Flutter.