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 à plusieurs pages. Si votre site est une application à page unique, vous devriez suivre ces instructions.
1. Charger Rokt sur votre page
Votre responsable 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 dans votre site. Pour obtenir la meilleure performance, 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="fr">
<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 de meilleures performances, intégrez le SDK Web tôt (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 sandbox. Lorsque vous êtes prêt à passer en direct, 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 qui leur est disponible. Il s'agit généralement d'une combinaison de données client et transactionnelles. Votre responsable de compte peut vous guider à travers les attributs optimaux à intégrer en fonction du secteur d'activité de votre entreprise.
Rokt recommande une intégration directe comme meilleure pratique, mais il est possible de s'intégrer avec un gestionnaire de balises.
2. Configurer les pages et placements
L'équipe Rokt configurera les pages et placements pertinents pour vous dans One Platform. Nous pouvons personnaliser votre placement pour correspondre à vos directives de marque et besoins UX.
Placements intégrés
Si vous prévoyez d'ajouter un placement intégré à votre site, vous devez spécifier l'élément HTML auquel le placement doit être ancré. Par exemple : <div id="rokt-placeholder"></div>. Informez l'équipe Rokt de l'élément que le placement doit cibler.
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
- Chiffrement des attributs en transit
- Intégrations pour applications à page unique
Ajoutez un emplacement Rokt à vos applications mobiles iOS, Android, React Native ou Flutter.