Ajouter un emplacement Rokt à votre site
Ajouter un emplacement Rokt à votre site est la première étape pour les partenaires 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 Web SDK (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 — aucune compétence en programmation requise!
Ce guide est destiné aux sites Web construits en tant qu'applications multipages. Si votre site est une application à page unique, vous devez suivre ces instructions.
1. Chargez 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 email brute du client) et des attributs de données. Lisez-en plus sur les raisons pour lesquelles Rokt demande des identifiants personnels et des attributs de données.
Code d'intégration d'exemple
La première étape pour intégrer Rokt est de charger le Web SDK sur 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 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. Consultez Où puis-je trouver mon ID Rokt ? pour des instructions.
<!DOCTYPE html>
<html lang="fr">
<head>
<!-- Balises meta -->
<!-- Partie #1 - Chargez 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 meta -->
</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",
```markdown
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 les meilleures performances, 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 de test. Lorsque vous êtes prêt à passer en production, définissez sandbox: false ou supprimez-le complètement.
Lorsque vous ajoutez le Web SDK à votre page, veuillez vous assurer d'intégrer les attributs de données, afin de fournir aux clients le message le plus pertinent disponible pour eux. Il s'agit généralement d'une combinaison des 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 l'option d'intégrer avec un gestionnaire de balises est disponible.
L'équipe Rokt configurera des pages et des emplacements pertinents pour vous dans One Platform. Nous pouvons [personnaliser votre emplacement](/fr/user-guides/rokt-ecommerce/layouts/overview) pour correspondre à vos directives de marque et à vos besoins UX.
#### Emplacements intégrés {#embedded-placements}
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.
### 3. Testez votre intégration {#5-test-your-integration}
Assurez-vous que le Web SDK se charge sur la bonne page et inclut les bons attributs.
Lire notre guide sur [tester votre intégration](/fr/developers/integration-guides/web/testing).
:::note Iframe préparatif
Si des problèmes de vitesse de chargement existent, vous pouvez utiliser une iframe préparatif pour résoudre cela. Vous pouvez en lire plus sur les avantages de l'iframe préparatif [ici](/fr/developers/integration-guides/web/advanced/preparative-iframe).
:::
### Plus d'informations {#more-information}
- [Référence générale du SDK Web](/developers/integration-guides/web/overview)
- [Sécurité du SDK Web](/fr/developers/integration-guides/data-and-security/web-security)
- [Intégration de données en deux étapes](/fr/developers/integration-guides/data-and-security/two-step-data-integration)
- [Chiffrement des attributs en transit](/fr/developers/integration-guides/data-and-security/encryption)
- [Intégrations d'applications à page unique](/fr/developers/integration-guides/web/advanced/single-page-applications)
:::note Intégrations d'applications mobiles natives
Ajoutez un emplacement Rokt à vos applications mobiles [iOS](/fr/developers/integration-guides/ios/how-to/adding-a-placement), [Android](/fr/developers/integration-guides/android/how-to/adding-a-placement), [React Native](/fr/developers/integration-guides/reactnative/how-to/adding-a-placement), ou [Flutter](/fr/developers/integration-guides/flutter/how-to/adding-a-placement).
:::