Aller au contenu principal

rokt-snippet

---
title: "Rokt Snippet (Obsolète)"
sidebar_class_name: hidden
---

<head>
  <meta name="robots" content="nofollow, noindex" />
</head>

:::note

Après des années d'évolution, snippet.js est arrivé à un point où il ne peut plus répondre à tous nos besoins. Rokt ne recommande plus d'utiliser cette intégration pour l'onboarding. Veuillez plutôt vous diriger vers le nouveau [Integration Launcher](/developers/integration-guides/web/library/integration-launcher). Rokt continuera de supporter snippet.js pour les correctifs de sécurité, mais aucune nouvelle fonctionnalité ne sera ajoutée.

:::

## Aperçu \{#overview}

L'objet Rokt fournit le point d'entrée pour s'intégrer aux 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 :

```js
(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 pleine fonctionnalité de l'objet Rokt n'est pas disponible. Seule la fonction Rokt.onLoaded est immédiatement disponible, tandis que le reste des fonctionnalités 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 tous les placements sur une page.

Retourne : void

getPlacements​

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

Retourne une liste de placements sélectionnés.

Retourne : Promise‹Array‹Placement››

hashString​

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

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

Comme Rokt manipule la chaîne avant le hachage, il est recommandé d'utiliser la méthode fournie au lieu de l'implémenter vous-même.

Paramètres :

NomTypeDescription
valuestringchaîne à hacher

Retourne : Promise‹string›

init​

▸ init(configuration: Configuration): void

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

Paramètres :

NomTypeDescription
configurationConfigurationObjet de configuration

Retourne : void

onFailure​

▸ onFailure(failureCallback: function): void

Accepte un callback 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 hook pour afficher une erreur ou naviguer vers une autre page
});

Paramètres :

▪ failureCallback: function

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

▸ (reason: string): void

Paramètres :

NomType
reasonstring

Retourne : void

onLoaded​

▸ onLoaded(onLoadedCallback: function): void

Accepte un callback qui est déclenché une fois que l'objet Rokt a été chargé et est prêt à être utilisé. Le callback 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 callback unique. Une fois que l'objet Rokt est prêt à s'intégrer, ils sont exécutés séquentiellement.

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

exemple

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

Paramètres :

▪ onLoadedCallback: function

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

▸ (rokt: Rokt): void

Paramètres :

NomType
roktRokt

Retourne : void

setAttributes​

▸ setAttributes(attributes: Attributes): void

Définit les attributs qui permettent à Rokt de mieux adapter une offre à un client. Les attributs peuvent inclure l'email, le prénom, le nom de famille, etc.

Selon votre fournisseur de catalogue, des informations supplémentaires peuvent être requises par Rokt pour récupérer les articles du catalogue. Par exemple, eventId est requis pour les événements de billetterie.

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

Étant donné que Rokt nécessite l'agent utilisateur (user agent) du navigateur comme 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 :

NomTypeDescription
attributesAttributesDictionnaire avec des données telles que prénom, nom de famille, email, etc.

Retourne : void

setFulfillmentAttributes​

▸ setFulfillmentAttributes(attributes: Attributes): void

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

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

Paramètres :

NomTypeDescription
attributesAttributesDictionnaire avec des données telles que le prénom, le nom de famille, l'email, etc.

Retourne : void

triggerPageChange​

▸ triggerPageChange(options: TriggerPageChangeOptions): void

Relance la sélection de placement pour une nouvelle page.

Pour les intégrations d'applications monopage, la solution de Rokt peut être affichée sur plusieurs pages ou chargée sur une page qui n'affiche 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 les placements.

Paramètres :

NomTypeDescription
optionsTriggerPageChangeOptionsOptions pour la nouvelle page.

Retourne : void

getValidationStatus​

▸ getValidationStatus(): Promise‹ValidationResult›

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

Retournera une liste de placements avec leurs statuts de validation actuels et des références aux éléments iframe pertinents.

Retourne :

Promise<{
  // Vous permet de déterminer rapidement s'il y a des erreurs
  isValid: boolean;
  // Ceci est la liste des placements avec validation
  placements: Array<{
    // Ceci est l'élément du placement contenant une erreur,
    // vous permettant de faire défiler jusqu'à lui si une erreur est présente
    element: HTMLIFrameElement;
    // Les placements 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 ailleurs. Il sera vide si valide
    errors: Array<{
      message: string;
    }>;
  }>;
}>

Vérification de la validité des placements​

Certaines offres Rokt contiennent des champs que les clients doivent compléter avant de passer à l'étape suivante du processus de transaction, comme sélectionner oui ou non sur une offre ou remplir un formulaire. Ces types d'offres contiennent des messages de validation. Ces messages affichent des avertissements au client indiquant l'action qu'il doit effectuer avant de continuer.

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

interface PlacementValidationStatus {
  // Vous permet de déterminer rapidement s'il y a des erreurs
  isValid: boolean;
  // Ceci est la liste des placements avec validation
  placements: Array<{
    // Ceci est l'élément du placement contenant une erreur,
    // vous permettant de faire défiler jusqu'à lui si une erreur est présente
    element: HTMLIFrameElement;
    // Les placements 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 ailleurs. Il sera vide si 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 placements
  document.querySelector("button.check-validation").onclick = async () => {
    const result = await rokt.getValidationStatus();
    // Déterminez rapidement si les placements contiennent un placement invalide
    alert(result.isValid);
    // Boucle à travers
    for (const placement of result.placements) {
      alert(
        "l'élément est à : " +
          element.getBoundingClientRect().top +
          "px du haut de la page"
      );
      alert("le placement a : " + placement.errors.length + " erreurs");
      for (const [i, error] of placement.errors.entries()) {
        alert("erreur de placement : " + i + " est " + error);
      }
    }
  };
});
Cet article vous a-t-il été utile ?
Last updated Oct 29, 2025