Aller au contenu principal

Rokt Snippet (Déprécié)

remarque

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. Au lieu de cela, veuillez vous rendre sur le nouvel Integration Launcher. Rokt continuera à soutenir snippet.js pour accueillir des 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 s'intégrer aux solutions Rokt. Il est disponible en tant que variable globale sous un nom spécifié dans votre script de snippet. Votre script de 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 ID 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 entièrement 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 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.

Étant donné que Rokt manipule la chaîne avant de la hacher, il est recommandé d'utiliser la méthode fournie au lieu d'implémenter la vôtre.

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 rappel qui est déclenché si l'objet Rokt échoue à se charger/ne peut pas s'afficher 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 :

NomType
reasonstring

Renvoie : 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 à l'emploi. Le rappel est déclenché immédiatement si l'objet Rokt est prêt.

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

Cette méthode 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 :

NomType
roktRokt

Renvoie : 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 éléments du catalogue. Par exemple, eventId est requis pour les événements de billetterie.

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

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

default

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

Parameters:

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

Returns: void

setFulfillmentAttributes​

▸ setFulfillmentAttributes(attributes: Attributes): void

Définit des 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 prénom, nom, email, etc.

Renvoie : void

triggerPageChange​

▸ triggerPageChange(options: TriggerPageChangeOptions): void

Relance 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 initialement pas de placements au client.

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

Paramètres :

NomTypeDescription
optionsTriggerPageChangeOptionsOptions pour la nouvelle page.

Renvoie : void

getValidationStatus​

▸ getValidationStatus(): Promise‹ValidationResult›

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

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

Renvoie :

Promise<{
  // Vous permet de déterminer rapidement s'il y a des erreurs
  isValid: boolean;
  // Voici la liste des placements avec validation
  placements: Array<{
    // C'est l'élément du placement contenant une erreur,
    // vous permettant de faire défiler jusqu'à celui-ci s'il y a une erreur
    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 quelque part. Ce 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 remplir avant de passer à l'étape suivante du flux 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 entreprendre avant de continuer.

Pour vérifier si les placements actuels sont valides, utilisez la méthode rokt.getValidationStatus(). getValidationStatus renvoie une promesse JavaScript qui attend 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;
  // Voici la liste des placements avec validation
  placements: Array<{
    // C'est l'élément du placement contenant une erreur,
    // vous permettant de faire défiler jusqu'à celui-ci s'il y a une erreur
    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 quelque part. Ce sera vide si valide
    errors: Array<{
      message: string;
    }>;
  }>;
}

Exemple d'utilisation

rokt.onLoaded(function (rokt) {
  rokt.setAttributes({
    /* ... */
  });
  rokt.init({
    /* ... */
```javascript
  });
  // 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 ?