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és pour afficher tout type de campagne Rokt.
Pour configurer un emplacement sur votre site web, vous pouvez utiliser le Rokt Web SDK (instructions ci-dessous). Rokt propose également une gamme de SDK mobiles pour configurer des emplacements sur les 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 - aucune programmation nécessaire !
Ce guide est destiné aux sites web construits en tant qu'applications à pages multiples. 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 comprend un identifiant client (nous recommandons l'adresse e-mail brute du client) et des données contextuelles. En savoir plus sur la raison pour laquelle Rokt demande des identifiants personnels et des attributs contextuels.
Exemple de code d'intégration
Chargement de l'intégration
La première étape pour intégrer Rokt est de charger le lanceur d'intégration de Rokt sur votre site. Pour de meilleures performances, nous vous encourageons à charger le script Rokt directement dans l'élément head de votre HTML en ajoutant la balise de script suivante.
Si vous utilisez Google Tag Manager, assurez-vous que le champ document.write est coché et consultez les étapes de mise en œuvre recommandées.
Si vous copiez l'exemple ci-dessous, assurez-vous de remplacer roktAccountId par l'identifiant unique de votre compte. Consultez Où puis-je trouver mon identifiant Rokt ? pour les instructions.
<script type="module">
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);
await new Promise((resolve) =>
window.Rokt
? resolve()
: document
.getElementById("rokt-launcher")
.addEventListener("load", () => resolve())
);
const launcher = await window.Rokt.createLauncher({
accountId: "rokt-account-id",
sandbox: true,
});
await launcher.selectPlacements({
attributs: {
email: "",
firstname: "",
lastname: "",
mobile: "",
confirmationref: "",
amount: "",
currency: "",
paymenttype: "",
ccbin: "",
zipcode: "",
country: "",
language: "",
},
});
</script>
Vous devriez opter pour l'une de ces méthodes et vous assurer qu'elle s'exécute une seule fois.
2. Ajoutez le code d'intégration Rokt à votre site
Ajoutez le code d'intégration Rokt de l'étape 1 entre les balises HTML <head></head> de n'importe quelle page où vous souhaitez afficher un emplacement Rokt.
Lorsque vous ajoutez le code d'intégration à votre page, assurez-vous de renseigner les données client et transactionnelles. Assurez-vous de configurer l'adresse e-mail du client afin que Rokt puisse identifier les clients et choisir une offre pertinente.
Remplissez toutes les attributs contextuels sur la transaction pour aider Rokt à personnaliser davantage les offres que le client voit.
Rokt recommande une intégration directe en tant que meilleure pratique, mais l'option d'intégration avec un gestionnaire de balises est disponible.
3. Configurer les pages et les emplacements
L'équipe Rokt configurera pour vous les pages et les emplacements pertinents dans One Platform. Nous pouvons personnaliser votre emplacement pour correspondre à vos directives de marque et à vos besoins en matière d'expérience utilisateur.
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>. Faites savoir à l'équipe Rokt quel élément l'emplacement doit cibler.
4. Testez votre intégration
Assurez-vous que le Rokt Web SDK se charge sur la bonne page et inclut les attributs corrects.
Lisez notre guide sur le test de votre intégration.
Si des problèmes de vitesse de chargement existent, vous pouvez utiliser un iframe préparatif pour résoudre cela. 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
- Chiffrement des attributs en transit
- Intégrations d'applications à page unique
Ajoutez un emplacement Rokt à vos applications mobiles iOS, Android, React Native ou Flutter.
::