EcommWebSDK

Intégration via le SDK Web de Rokt

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 données contextuelles. Lisez plus sur pourquoi Rokt demande des identifiants personnels et des attributs de données.

Exemple de code d'intégration

Chargement de l'intégration

La première étape pour s'intégrer avec Rokt est de charger le lanceur d'intégration de Rokt sur votre site. Pour [les 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.

attention

Si vous copiez l'exemple ci-dessous, assurez-vous que roktAccountId est remplacé par l'ID unique de votre compte. Voir Où puis-je trouver mon ID Rokt? pour les instructions.

Confirmation Page

<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({
    attributes: {
      email: "",
      firstname: "",
      lastname: "",
      mobile: "",
      confirmationref: "",
      amount: "",
      currency: "",
      paymenttype: "",
      ccbin: "",
      address1: "",
      zipcode: "",
      age: "",
      gender: "",
      country: "",
      language: ""
    },
  });
</script>

Payments Page

remarque

Pour un guide d'intégration approfondi pour Payments Marketplace, veuillez suivre ces 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_here',
    sandbox: location.href.indexOf("staging_domain_here") > 0,
  });

  const cartItems = [
      {
          'itemPrice': '',
          'itemQuantity': '',
          'majorcat': '',
          'majorcatid': '',
          'minorcat': '',
          'minorcatid': '',
          'productname': '',
          'sku': '',
      },
      {
          'itemPrice': '',
          'itemQuantity': '',
          'majorcat': '',
          'majorcatid': '',
          'minorcat': '',
          'minorcatid': '',
          'productname': '',
          'sku': '',
      }
  ];

  const selection = await launcher.selectPlacements({
      identifier: "payment_page",
      attributes: {

      // Requis
      amount: '',
      siteCountry: '',
      siteLanguage: '',
      currency: '',

      //Données de commande
      clientcustomerid: '',
      cartId: '',
      subtotal: '',
      totalTax: '',
      totalShipping: '',
      margin: '',
      paymenttype: '',
      ccbin: '',
      cartItems: JSON.stringify(cartItems),

      //Données client
      customerType: '',
      hasAccount: '',
      isReturning: '',
      lastVisited: '',
      isLoyalty: '',
      loyaltyTier: '',
      email: '',
      mobile: '',
      title: '',
      firstname: '',
      lastname: '',
      age: '',
      gender: '',
      dob: '',
```      billingAddress1: '',
      billingAddress2: '',
      billingCity: '',
      billingState: '',
      billingZipcode: '',
      billingCountry: '',
      shippingAddress1: '',
      shippingAddress2: '',
      shippingCity: '',
      shippingState: '',
      shippingZipcode: '',
      shippingCountry: '',

      },
  });

  //Écouteurs d'événements optionnels
  selection.on('PLACEMENT_INTERACTIVE').subscribe(() => {
      // Logique à exécuter après que le Placement soit devenu interactif
      console.log(selection.context.pageVariantName);
  });
  selection.on('POSITIVE_ENGAGEMENT').subscribe(() => {
      // Logique à exécuter après un engagement positif avec le Placement
      console.log(selection.context.pageVariantName);
  });
</script>

Vous devriez opter pour l'une de ces méthodes et vous assurer qu'elle s'exécute une seule fois.

2. Activer l'iframe préparatoire

Choisissez une page qui se situe plus tôt dans le parcours client, idéalement là où un client pourrait passer un peu plus de temps. Une page de détails d'expédition ou de paiement fonctionne bien.

Ajoutez cet extrait de code n'importe où dans le HTML de la page :

<iframe
  aria-hidden="true"
  src="https://apps.rokt.com/wsdk/preload/index.html"
  sandbox="allow-scripts allow-same-origin"
  style="border: 0px; width: 100%; display: none;"
></iframe>

Cet extrait chargera et mettra en cache les ressources Rokt plus tôt dans le parcours client. Ensuite, lorsque vous êtes prêt à afficher un placement Rokt, les ressources Rokt seront prêtes, ce qui se traduira par un temps de chargement plus rapide. L'iframe préparatoire de Rokt est sécurisé et n'a pas accès à vos données de page ou de site.

Vous pouvez en lire plus sur les avantages de l'iframe préparatoire [ici].

3. Ajouter 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 toute 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.

Renseignez tous les [attributs de données] concernant la transaction pour aider Rokt à mieux personnaliser les offres que le client voit.

remarque

Rokt recommande une intégration directe comme [meilleure pratique], mais l'option d'[intégrer avec un gestionnaire de balises] est disponible.

4. Configurer les pages et les emplacements

L'équipe Rokt configurera pour vous les pages et emplacements pertinents 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.

5. Testez votre intégration

Assurez-vous que le SDK Web Rokt se charge sur la bonne page et inclut les attributs corrects.

Lisez notre guide sur [testing your integration].