Intégration dans le panier

Intégration de votre panier avec Rokt

S'abonner aux modifications de placement du panier Rokt

L'intégration dans la transaction/panier notifie votre frontend chaque fois qu'un client sélectionne une opportunité de vente incitative Rokt, permettant ainsi de refléter le changement dans le panier du client. Cela est réalisé en écoutant le message V2_CART_ITEM_UPDATED d'un placement, qui est déclenché chaque fois qu'un client effectue des modifications sur les articles sélectionnés du côté Rokt.

Vous pouvez vous abonner à ce message en utilisant la méthode Selection.on qui vous permet d'écouter les messages de tout placement sélectionné. Le contenu de ces messages est décrit dans UpdateCartItemPlacementMessageBody.

De plus, vous pouvez fournir des informations supplémentaires en passant des attributs pour mieux adapter la sélection des offres à un client. Dans certains cas, selon votre fournisseur de catalogue, des informations supplémentaires peuvent être nécessaires pour que Rokt récupère les articles du catalogue.

// (...) chargement du script Rokt et création de l'instance Integration Launcher

const selection = await launcher.selectPlacements({
  attributes: {
    // attributs requis par Rokt pour récupérer les articles du catalogue
    eventId: "eventId",
    venueName: "venueName",
    // tous attributs supplémentaires
    email: "email",
  },
});

selection.on("V2_CART_ITEM_UPDATED").subscribe((event) => {
  // Vous devez fournir ci-dessous votre code pour refléter les changements dans votre panier
  clientCart.updateCart(event.body.cartItem, event.body.oldCartItem);
});

Mettre à jour le panier de placement Rokt depuis votre panier

Dans le cas où les modifications de votre panier doivent être reflétées du côté de Rokt, vous pouvez envoyer des messages au Placement pour ce faire. Pour votre commodité, vous pouvez envoyer un message à chaque placement dans la sélection en utilisant la méthode Selection.send. Le placement Rokt concerné écoutera et agira en conséquence. La charge utile (payload) de ce message est décrite dans UpdateCartItemPartnerMessageBody.

remarque

Veuillez noter que certaines modifications ne seront pas effectuées si la configuration ne le permet pas. Par exemple, si une vente incitative forcée a une quantité minimale de 1, et que le placement reçoit un message du partenaire pour supprimer cette sélection, le placement n'agira pas en conséquence.

Assurez-vous cependant qu'un message est toujours envoyé en retour au partenaire depuis le placement, pour boucler la boucle et partager l'état du panier de placement Rokt avec le partenaire, afin de garantir que les deux paniers sont alignés (veuillez consulter la section ci-dessus).

const selection = await launcher.selectPlacements({
  attributes: {
    // attributes required by Rokt to retrieve the catalog items
  },
});

selection.send("V2_UPDATE_CART_ITEM", payload);

Vérification de la disponibilité des emplacements

Cette extension implique que votre backend émette un appel à Rokt pour vérifier si des emplacements sont disponibles. Vous pouvez ensuite décider si votre page de vente incitative doit être affichée ou ignorée. Dans ce scénario, vos pages ont très probablement déjà été générées sur le backend, et vous avez déjà inclus les données client et de transaction à Rokt dans l'appel initial. Étant donné que cet appel a peut-être déjà généré votre ID de session, l'API JavaScript de Rokt nécessite que vous incluiez votre ID de session dans la méthode Rokt.createLauncher afin que les deux interactions puissent être associées ensemble pour des raisons d'identification et de performance.

// (...) chargement du script Rokt

const launcher = await Rokt.createLauncher({
  accountId: "rokt-account-id",
  sessionId: "uniqueSessionId", // ID de session généré par le backend Rokt
});

// (...) le reste de la logique d'intégration

Vérification de la validité du placement

Certaines offres Rokt contiennent des champs que le client doit remplir avant de poursuivre le flux de transaction. Un exemple de cela est le remplissage d'un formulaire ou la sélection de oui/non sur une offre.

Ces types d'offres contiennent des messages de validation qui affichent un avertissement au client indiquant l'action qu'il doit entreprendre avant de continuer.

Ce comportement est optionnel et doit être activé via la méthode IntegrationLauncher.use() avant de faire une sélection. Une fois le module de validation du partenaire obtenu, vous pouvez vérifier si les placements actuels sont valides en utilisant la méthode getValidationStatus. La méthode retourne 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;
  // 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

const partnerValidation = await launcher.use('PartnerValidation');

const selection = await launcher.selectPlacements({
    attributes: {
        /* ... */
    },
});

// Lorsque le client clique sur ce bouton, vous vérifiez l'état de validation des placements
document.querySelector("button.check-validation").onclick = async () => {
  await selection.ready();  
  const result = await partnerValidation.getValidationStatus();

  // Déterminez rapidement si les placements contiennent un placement invalide
  console.log(result.isValid);

    // Boucle à travers
  for (const placement of result.placements) {
    console.log(
      "l'élément est à : " +
        element.getBoundingClientRect().top +
        "px du haut de la page"
    );
    console.log("le placement a : " + placement.errors.length + " erreurs");

    for (const [i, error] of placement.errors.entries()) {
      console.log("erreur de placement : " + i + " est " + error);
    }
  }
};