Intégration du panier
Intégrer votre panier avec Rokt
S'abonner aux changements du panier de placement Rokt
L'intégration en transaction/panier notifie votre interface utilisateur chaque fois qu'un client sélectionne une opportunité d'upsell Rokt, permettant ainsi que le changement soit reflété dans le panier d'un client. Cela est réalisé en écoutant le message V2_CART_ITEM_UPDATED d'un emplacement, qui est déclenché chaque fois qu'un client apporte des modifications aux 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 emplacement sélectionné. Le payload 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, en fonction de votre fournisseur de catalogue, des informations supplémentaires peuvent être requises pour que Rokt puisse récupérer les articles du catalogue.
// (...) chargement du script Rokt et création de l'instance du lanceur d'intégration
const selection = await launcher.selectPlacements({
attributes: {
// attributs requis par Rokt pour récupérer les articles du catalogue
eventId: "eventId",
venueName: "venueName",
// tout attribut supplémentaire
email: "email",
},
});
selection.on("V2_CART_ITEM_UPDATED").subscribe((event) => {
// Ci-dessous, vous devez fournir votre code pour refléter les changements dans votre panier
clientCart.updateCart(event.body.cartItem, event.body.oldCartItem);
});
Mise à jour du panier 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 cela. Pour votre commodité, vous pouvez envoyer un message à chaque placement sélectionné en utilisant la méthode Selection.send. Le placement Rokt concerné écoutera et agira en conséquence. Le contenu de ce message est décrit dans UpdateCartItemPartnerMessageBody.
Veuillez noter que certains changements ne seront pas effectués 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 ne l'exécutera pas.
Cependant, soyez assuré qu'un message est toujours renvoyé au partenaire depuis le placement, pour boucler le processus et partager l'état du panier Rokt avec le partenaire, afin de garantir que les deux paniers sont alignés (voir la section ci-dessus).
const selection = await launcher.selectPlacements({
attributes: {
// attributs requis par Rokt pour récupérer les éléments du catalogue
},
});
selection.send("V2_UPDATE_CART_ITEM", payload);
Vérification de la disponibilité des emplacements
Cette extension implique que votre backend effectue un appel à Rokt pour vérifier si des emplacements sont disponibles. Vous pouvez ensuite décider si votre page d'upsell 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 lors de l'appel initial. Comme 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 liées 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 compléter avant de passer à l'étape suivante du flux de transaction. Un exemple de ceci est de remplir un formulaire ou de sélectionner 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.
Le comportement est optional 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 comme défini. La valeur résolue ressemble à :
interface PlacementValidationStatus {
// Permet de déterminer rapidement s'il y a des erreurs
isValid: boolean;
// Voici la liste des placements avec validation
placements: Array<{
// Cet élément du placement contient 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 c'est un
// tableau qui vous fournit les messages d'erreur si vous
// souhaitez les répéter quelque part. 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);
// Parcourez
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()) {
There is no translatable content in the provided text as it consists solely of JavaScript code.