Aller au contenu principal

SiteMonetization

Ajouter un emplacement Rokt à votre site est la première étape pour les partenaires de Rokt Ecommerce. Les emplacements sont des iframes flexibles qui sont utilisés 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 boutiques Shopify peuvent configurer un emplacement Rokt en quelques secondes en utilisant l'application Rokt Ecommerce — aucun codage nécessaire !

Applications à page unique

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) ainsi que des attributs de données. En savoir plus sur les raisons pour lesquelles Rokt demande des identifiants personnels et des attributs de données.

Exemple de code d'intégration​

La première étape pour s'intégrer avec Rokt est de charger le Web SDK sur votre site. Pour obtenir les meilleures performances, nous vous encourageons à charger le script Rokt en utilisant la structure ci-dessous.

Google Tag Manager

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.

attention

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>
  <!-- Meta tags -->

  <!-- Part #1 - Load the 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>

  <!-- Other scripts and meta tags -->
</head>
<body>
  <!-- Your HTML content here -->

  <!-- Part #2 - As soon as the data attributes are available, execute the below script to display a Rokt placement -->
  <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>

  <!-- Your HTML content here -->
</body>
</html>

La manière idéale d'intégrer le Web SDK est de le charger tôt (par exemple, dans le <head></head>) puis de l'exécuter 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, définissez sandbox: false ou supprimez-le entièrement.

Lorsque vous ajoutez le Web SDK à votre page, veuillez vous assurer d'intégrer les attributs de données, afin de proposer aux clients le message le plus pertinent 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.

remarque

Rokt recommande une intégration directe comme meilleure pratique, mais l'option de s'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 dans One Platform. Nous pouvons personnaliser votre emplacement pour correspondre à vos directives de marque et à vos besoins UX.

Emplacements intégrés​

Si vous envisagez 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.

iframe préparatif

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​

Intégrations d'applications mobiles natives

Ajoutez un emplacement Rokt à vos applications mobiles iOS, Android, React Native ou Flutter.

Cet article vous a-t-il été utile ?