Last updated 27 sept. 2024

Rokt Snippet (Obsolète)

remarque

Après des années d'évolution, snippet.js en est arrivé au point où il ne peut plus répondre à tous nos besoins. Rokt ne recommande plus d'utiliser cette intégration pour l'onboarding. Au lieu de cela, veuillez vous rendre sur le nouveau Integration Launcher. Rokt continuera à prendre en charge snippet.js pour les correctifs de sécurité, mais aucune autre nouvelle fonctionnalité ne sera ajoutée.

Aperçu

L'objet Rokt fournit le point d'entrée pour intégrer les solutions Rokt. Il est disponible en tant que variable globale sous un nom spécifié dans votre script snippet. Votre script snippet devrait ressembler à ce qui suit:

(function (r, o, k, t, n, e, w, a, _) {
  r._ROKT_ = n;
  r[n] = r[n] || {
    id: t,
    h: w,
    lc: [],
    it: new Date(),
    onLoaded: function (c) {
      r[n].lc.push(c);
    },
  };
  a = o.createElement("script");
  a.type = "text/javascript";
  a.async = !0;
  a.src = k;
  if (e) {
    a.integrity = e;
    a.crossOrigin = "anonymous";
  }
  _ = o.getElementsByTagName("script")[0];
  _.parentNode.insertBefore(a, _);
})(
  window,
  document,
  "https://apps.rokt.com/wsdk/integrations/snippet.js",
  "rokt-account-id",
  "rokt"
);

Veuillez noter les paramètres importants suivants dans la liste des arguments ci-dessus:

• https://apps.rokt.com/wsdk/integrations/snippet.js— est l'URL pointant vers la dernière version de l'objet Rokt.
• rokt-account-id— votre identifiant de compte Rokt unique et doit être remplacé par la valeur correcte.
• rokt— le nom sous lequel cet objet sera exposé sur votre objet window. Dans ce cas, il sera accessible en utilisant window.rokt ou simplement rokt.

L'objet Rokt se charge de manière asynchrone afin de ne pas interférer avec le chargement de votre page. Cela signifie qu'au moment de l'exécution du snippet d'initialisation, la fonctionnalité complète de l'objet Rokt n'est pas disponible. Seule la fonction Rokt.onLoaded est immédiatement disponible, tandis que le reste de la fonctionnalité est ajouté lorsque l'objet Rokt a été récupéré et complètement chargé. Pour recevoir une notification lorsque l'intégration est prête, vous pouvez ajouter une fonction de rappel à Rokt.onLoaded.

rokt.onLoaded(function (rokt) {
  rokt.setAttributes({
    email: "",
  });
});

Méthodes

closeAll

▸ closeAll(): void

Ferme ou décharge toutes les emplacements sur une page.

Renvoie: void

---

getPlacements

▸ getPlacements(): Promise‹Array‹Placement››

Renvoie une liste des emplacements sélectionnés.

Renvoie: Promise‹Array‹Placement››

---

hashString

▸ hashString(value: string): Promise‹string›

Méthode pratique pour hacher une chaîne de caractères en utilisant SHA-256.

Étant donné que Rokt manipule la chaîne de caractères avant le hachage, il est recommandé d'utiliser la méthode fournie plutôt que de l'implémenter vous-même.

Paramètres:

Nom	Type	Description
value	string	chaîne à hacher

Renvoie: Promise‹string›

---

init

▸ init(configuration: Configuration): void

Définit les informations qui permettent à Rokt d'identifier votre client.

Paramètres:

Nom	Type	Description
configuration	Configuration	Objet de configuration

Retourne: void

---

onFailure

▸ onFailure(failureCallback: function): void

Accepte un rappel qui est déclenché si l'objet Rokt échoue à se charger/ne peut pas être affiché correctement.

Ce scénario peut se produire si vous rencontrez un navigateur très ancien qui n'est pas pris en charge par Rokt.

exemple

rokt.onFailure((reason) => {
  // Utilisez ce crochet pour afficher une erreur ou naviguer vers une autre page
});

Paramètres:

▪ failureCallback: function

Rappel à déclencher lorsque l'objet Rokt est prêt.

▸ (reason: string): void

Paramètres:

Nom	Type
reason	string

Retourne: void

---

onLoaded

▸ onLoaded(onLoadedCallback: function): void

Accepte un rappel qui est déclenché une fois que l'objet Rokt a été chargé et est prêt à être utilisé. Le rappel est déclenché immédiatement si l'objet Rokt est prêt.

Vous pouvez invoquer cette méthode plusieurs fois, chaque fois en exécutant un rappel unique. Une fois que l'objet Rokt est prêt à être intégré, ils sont exécutés séquentiellement.

Cette approche peut être utile dans le cas d'applications à page unique qui ont plusieurs points d'intégration.

exemple

rokt.onLoaded((rokt) => {
  // Maintenant, vous pouvez interagir avec l'objet Rokt
});

Paramètres :

▪ onLoadedCallback : function

Rappel à déclencher lorsque l'objet Rokt a été chargé.

▸ (rokt : Rokt) : void

Paramètres :

Nom	Type
rokt	Rokt

Renvoie : void

---

setAttributes

▸ setAttributes(attributes: Attributes): void

Définit les attributs qui permettent à Rokt de mieux personnaliser une offre pour un client. Les attributs peuvent inclure l'e-mail, le prénom, le nom de famille, etc.

En fonction de votre fournisseur de catalogue, Rokt peut avoir besoin d'informations supplémentaires pour récupérer les éléments du catalogue. Par exemple, eventId est requis pour les événements de billetterie.

Rokt.setAttributes effectue une fusion superficielle des attributs passés avec les attributs existants.

Étant donné que Rokt nécessite l'agent utilisateur du navigateur en tant qu'attribut, la valeur est stockée dans la propriété userAgent par défaut.

default

{
  userAgent: 'Mozilla/5.0 (...)', // valeur de window.navigator.userAgent
}

Paramètres :

Nom	Type	Description
attributes	Attributes	Dictionnaire contenant des données telles que le prénom, le nom de famille, l'e-mail, etc.

Renvoie : void

---

setFulfillmentAttributes

▸ setFulfillmentAttributes(attributes: Attributes): void

Définit les attributs qui restent inconnus de Rokt jusqu'à ce que le client accepte une offre.

Rokt.setFulfillmentAttributes effectue une fusion superficielle des attributs passés avec les attributs existants.

Paramètres :

Nom	Type	Description
attributes	Attributes	Dictionnaire contenant des données telles que le prénom, le nom de famille, l'e-mail, etc.

Renvoie : void

---

triggerPageChange

▸ triggerPageChange(options: TriggerPageChangeOptions): void

Déclenche à nouveau la sélection de placement pour une nouvelle page.

Pour les intégrations d'applications à page unique, la solution de Rokt peut être affichée sur plusieurs pages ou chargée sur une page qui ne montre pas initialement de placements à un client.

Dans ce cas, Rokt compte sur le partenaire pour déclencher la méthode. Cela nous permet de savoir quand un client atteint la page où nous devons afficher des placements.

Paramètres :

Nom	Type	Description
options	TriggerPageChangeOptions	Options pour la nouvelle page.

Renvoie : void

---

getValidationStatus

▸ getValidationStatus(): Promise‹ValidationResult›

Méthode pour déterminer si les emplacements visibles sont valides.

Renvoie une liste d'emplacements avec leurs états de validation actuels et des références aux éléments iframe correspondants.

Renvoie:

Promise<{
  // Vous permet de déterminer rapidement s'il y a des erreurs
  isValid: boolean;
  // C'est la liste des emplacements avec validation
  placements: Array<{
    // C'est l'élément de l'emplacement contenant une erreur,
    // vous permettant de faire défiler jusqu'à lui en cas d'erreur
    element: HTMLIFrameElement;
    // Les emplacements afficheront leurs propres messages d'erreur, mais ceci est un
    // tableau qui vous fournit les messages d'erreur si vous
    // souhaitez les répéter quelque part. Il sera vide s'il est valide
    errors: Array<{
      message: string;
    }>;
  }>;
}>

Vérification de la validité de l'emplacement

Certaines offres Rokt contiennent des champs que les clients doivent remplir avant de passer à l'étape suivante du processus de transaction, tels que la sélection de oui ou non sur une offre ou le remplissage d'un formulaire. Ces types d'offres contiennent des messages de validation. Ces messages affichent des avertissements aux clients indiquant l'action qu'ils doivent prendre avant de continuer.

Pour vérifier si les emplacements actuels sont valides, utilisez la méthode rokt.getValidationStatus(). getValidationStatus renvoie une promesse JavaScript qui attend que les emplacements aient résolu leur premier état de validation tel que défini. La valeur résolue ressemble à ceci :

interface PlacementValidationStatus {
  // Vous permet de déterminer rapidement s'il y a des erreurs
  isValid: boolean;
  // Il s'agit de la liste des emplacements avec validation
  placements: Array<{
    // Il s'agit de l'élément de l'emplacement contenant une erreur,
    // vous permettant de faire défiler jusqu'à lui en cas d'erreur
    element: HTMLIFrameElement;
    // Les emplacements afficheront leurs propres messages d'erreur, mais c'est un
    // tableau qui vous fournit les messages d'erreur si vous
    // souhaitez les répéter quelque part. Il sera vide s'il est valide
    errors: Array<{
      message: string;
    }>;
  }>;
}

Exemple d'utilisation

rokt.onLoaded(function (rokt) {
  rokt.setAttributes({
    /* ... */
  });
  rokt.init({
    /* ... */
  });
  // Lorsque le client clique sur ce bouton, vous vérifiez l'état de validation des emplacements
  document.querySelector("button.check-validation").onclick = async () => {
    const result = await rokt.getValidationStatus();
    // Déterminez rapidement si les emplacements contiennent un emplacement non valide
    alert(result.isValid);
    // Parcourez
    for (const placement of result.placements) {
      alert(
        "l'élément est : " +
          element.getBoundingClientRect().top +
          "px depuis le haut de la page"
      );
      alert("l'emplacement a : " + placement.errors.length + " erreurs");
      for (const [i, error] of placement.errors.entries()) {
        alert("erreur de placement : " + i + " est " + error);
      }
    }
  };
});