Démarrer avec Salesforce Commerce Cloud – Klaviyo - Help Center - FR

Vous apprendrez

Découvrez comment intégrer Salesforce Commerce Cloud à Klaviyo. L'intégration de la cartouche et de l'API de Klaviyo permet aux sites Web utilisant Salesforce Commerce Cloud (anciennement Demandware) de se connecter rapidement et d'envoyer des données historiques et en temps réel à Klaviyo. Lorsque vous intégrez Klaviyo à Salesforce Commerce Cloud (SFCC), Klaviyo commence à suivre les actions des internautes en temps réel, comme la navigation sur le site Web, le suivi des recherches, la visualisation des produits et des catégories, l'ajout d'articles à un panier, le paiement et la commande.

L’intégration de Magento 1 avec Klaviyo se fait en deux étapes :

Installation de la cartouche Klaviyo dans SFCC.
Ajout de snippets d'habilitation à la SFCC.
Activation de l'intégration OCAPI de la SFCC dans Klaviyo.

Avant de commencer

Klaviyo s'intègre à la fois aux sites Site Genesis (SG) basés sur le contrôleur SFCC et aux sites Storefront Reference Architecture (SFRA). Chaque cadre nécessite une configuration de cartouche et des snippets légèrement différents, décrits ci-dessous.

Utilisez-vous une cartouche SFCC Klaviyo version 23.7.0 ? La version 23.7.0 et ultérieure comprend un certain nombre de fonctionnalités supplémentaires, une installation prête à l’emploi plus complète et des améliorations liées à l’expérience des développeurs. Si vous souhaitez effectuer une mise à niveau, lisez Comment mettre à niveau la cartouche de votre Salesforce Commerce Cloud.

Afin d'utiliser notre cartouche version 23.7.0 (ou toute autre version supérieure), nous vous recommandons de mettre à jour votre mode de compatibilité SFCC à 21.7 ou plus.

Si vous souhaitez commencer par intégrer votre environnement de développement, vous pouvez créer un compte Klaviyo lié en utilisant la méthode décrite dans cet article et connecter votre environnement de développement à ce compte. Nous vous recommandons d’inclure le mot « Dev » ou « Staging » dans le nom de l’entreprise que vous utilisez lors de la configuration du compte, afin de mieux différencier les comptes une fois connecté.

Il est également recommandé d’ajouter les adresses IP Klaviyo à la liste d’autorisation de votre fournisseur de pare-feu afin de minimiser les problèmes d’authentification et de configuration. Pour plus de détails, veuillez consulter la rubrique Comment mettre liste d'autorisation aux adresses IP du trafic d’intégration Klaviyo.

Configurer les cartouches Klaviyo

Téléchargez les cartouches

Vous trouverez notre liste d’applications sur Salesforce AppExchange. Sur l'AppExchange, vous pouvez en savoir plus sur Klaviyo et cliquer sur Get It Now pour être amené sur Github, où nos cartouches sont disponibles dans un fichier zip pour le téléchargement. Si votre site est de type SFRA, téléchargez le fichier zip KlaviyoSFRA et s’il est de type Site Genesis, téléchargez le fichier zip KlaviyoSG.

Vous devrez configurer deux cartouches, qui sont toutes deux incluses dans le fichier zip que vous avez téléchargé. Ces cartouches comprennent

int_klaviyo ou int_klaviyo_sfra : Une cartouche spécifique au site ; int_klaviyo est pour les sites web basés sur Site Genesis, et int_klaviyo_sfra est pour les sites web basés sur SFRA.
int_klaviyo_core : pour les deux types d'infrastructures, contenant certaines fonctionnalités de base qui se chevauchent.

Importer les cartouches

La première étape consiste à importer les cartouches dans Visual Studio Code ou Eclipse afin qu'elles soient disponibles pour être liées à votre instance SFCC.

Dans le code VS

Copiez et collez la cartouche int_klaviyo_core.
Copiez les dossiers int_klaviyo (Site Genesis) ou int_klaviyo_sfra (SFRA) dans la base de code en tant que frères et sœurs de vos autres dossiers de cartouches.

Dans Eclipse

Naviguez vers Administration > Importer > Général > Projets existants dans l'espace de travail.
Importez le répertoire int_klaviyo_core à l'aide de l'assistant d'importation.
Sélectionnez l'instance SFCC avec laquelle vous souhaitez connecter la cartouche.
Sélectionnez Propriétés.
Sélectionnez Références du projet.
Vérifiez la cartouche int_klaviyo_core.
Répétez les étapes 2 à 6 pour l'autre cartouche spécifique à votre framework (int_klaviyo ou int_klaviyo_sfra).

Ajoutez les cartouches dans le chemin des cartouches.

Une fois les cartouches importées, elles doivent être ajoutées à la liste des cartouches utilisées par votre site à l'aide du Business Manager de SFCC.

Naviguez vers Administration > Sites > Manage Sites.
Sélectionnez votre site.
Sélectionnez l'onglet Paramètres.
Au début de l'entrée intitulée Cartridges, ajoutez les noms des cartouches Klaviyo importées, avec la cartouche core en dernier (soit int_klaviyo:int_klaviyo_core ou int_klaviyo_sfra:int_klaviyo_core).
Cliquez sur Appliquer.

Une fois que vous avez cliqué sur Appliquer, vous devriez maintenant voir les 2 cartouches au début du champ intitulé Chemin effectif de la cartouche.

Ajouter des services

Après avoir importé les cartouches et les avoir ajoutées au chemin des cartouches du site, le service Klaviyo doit être ajouté pour permettre la configuration des paramètres de la cartouche. Dans le répertoire racine du fichier zip des cartouches Klaviyo se trouve un autre fichier zip appelé metadata.zip. Les instructions suivantes font référence à ce fichier zip.

Naviguez vers Administration > Site Development > Site Import & Export > Services.
Veuillez télécharger, puis importer le fichier metadata.zip.
Lorsque vous êtes invité à confirmer l'importation de l'archive sélectionnée, sélectionnez OK.
Vous devriez maintenant voir l’importation se dérouler sous la section Statut en bas de la page.
Vous avez désormais accès à une page de préférences dans Outils marchands > Préférences du site > Préférences personnalisées > Klaviyo. Vous pouvez alors gérer les paramètres suivants :
Le fichier metadata.zip créera également un nouveau service dans le SFCC. En naviguant vers Administration > Operations > Services, vous devriez maintenant voir 2 nouvelles entrées sous l'onglet Services appelées KlaviyoEventService et KlaviyoSubscribeProfilesService, chacune avec des entrées de profil et d'informations d'identification respectives.

Configuration des sélecteurs de champs Klaviyo Email et de la Page de commande Email Field Selector

Ces préférences font partie intégrante de l’identification et du tracking des visiteurs du site par Klaviyo. Si un visiteur n’est pas identifié par Klaviyo, aucun événement ne sera suivi pour ce visiteur. Une fois l’intégration terminée, vous pouvez apprendre à tester la configuration de votre sélecteur de champ d’e-mail Klaviyo Email and page de commande dans la section Tester votre configuration SFCC ci-dessous.

Sélecteurs de champs d'email Klaviyo

Les préférences du site Klaviyo Email Field Selectors sont utilisées pour cibler toutes les adresses électroniques et tous les numéros de téléphone figurant sur le site (à l'exception de l'adresse électronique figurant sur la page de commande, qui est traitée ci-dessous). Nous identifions ces champs à l'aide de sélecteurs CSS standard, chacun étant ajouté individuellement aux préférences du site (qui est un "ensemble de chaînes", permettant d'entrer plusieurs valeurs de chaînes une par une). Tout sélecteur complexe pouvant être utilisé dans une feuille de style standard pour cibler un élément spécifique peut être utilisé, par exemple #dwfrm_login div.username input.input-text, de même que les sélecteurs pouvant cibler plusieurs éléments sur l'ensemble du site sur la base d'attributs partagés, par exemple input[type=e-mail]. Veillez à ne pas cibler les entrées via des ID générés dynamiquement - un cas très courant dans SiteGen - car ces ID changeront en fonction du chargement de la page et échoueront donc (par exemple, #dwfrm_login_username_d0fignzngiyq).

Notez que les champs ajoutés au DOM après le chargement de la page peuvent toujours être ciblés. Il peut s'agir, par exemple, d'un champ d'adresse électronique inséré dans une fenêtre modale après un appel AJAX, ou d'un champ injecté dans le DOM par des JavaScripts tiers.

Notez également que les champs de numéro de téléphone seuls peuvent ne pas identifier complètement l'utilisateur pour Klaviyo, en fonction de vos paramètres SMS dans votre compte Klaviyo (si les SMS sont activés et que vous avez un numéro d'envoi associé au pays du numéro de téléphone saisi, le navigateur sera identifié). Ainsi, l'ajout de sélecteurs CSS pour cibler les champs de numéros de téléphone peut être considéré comme "agréable à avoir" ou "au besoin", alors que l'ajout de sélecteurs pour les champs d'adresses électroniques doit être considéré comme essentiel.

Sélecteur de champ pour l'email de paiement

Le champ de collecte du courrier électronique dans la page de commande est un cas particulier et, en tant que tel, il a ses propres préférences en matière de ciblage. Le principe est exactement le même que celui de la préférence de site Klaviyo Email Field Selectors : il suffit de saisir un seul sélecteur CSS qui cible le champ de l'adresse e-mail dans le flux de la page de commande de votre site, qu'il apparaisse au début, à la fin ou au milieu de la page de commande.

Il est essentiel de configurer cette préférence de site pour cibler le champ de collecte d’adresses e-mail dans la page de commande afin de suivre correctement l’événement Page de commande Débutée. Par conséquent, il est fortement recommandé de procéder à des tests pour vous assurer que les événements Page de commande Débutée apparaissent dans Klaviyo après la saisie d’une adresse e-mail dans le champ de collecte d’adresses e-mail dans la page de commande.

Notez également que le champ e-mail de la page de commande ciblé par la préférence de site Email Field Selector sera automatiquement câblé pour identifier l'utilisateur, en plus de déclencher l'événement Started page de commande (c'est-à-dire qu'il n'est pas nécessaire d'inclure le sélecteur CSS pour le champ e-mail de la page de commande à la fois dans les préférences de site Klaviyo Email Field Selectors et page de commande Email Field Selector).

Ajouter des snippets d'installation

La dernière partie de l'installation de la cartouche consiste à ajouter les snippets aux fichiers modèles de votre site afin de permettre à la cartouche de communiquer avec le site. Ces étapes sont très différentes pour les infrastructures Site Genesis (SG) et Storefront Reference Architecture (SFRA), assurez-vous donc de suivre les instructions correctes pour votre configuration.

Configuration des snippets de l'architecture de référence Storefront (SFRA)

Ajoutez le code suivant au bas de votre fichier pageFooter.isml :

<isinclude template="klaviyo/klaviyoFooter"/>

Vous avez terminé la configuration de l’extrait de code pour votre boutique SFRA.

Configuration des snippets de Site Genesis (SG)

Pour ajouter le fichier KlaviyoFooter.isml au pied de page global : Ajoutez le code suivant au bas de votre fichier footer.isml (ou tout modèle similaire chargé en bas de chaque page).
```
<isinclude template="klaviyo/klaviyoFooter"/>
```
Pour ajouter des extraits de code pour l’identification de l’utilisateur côté serveur : ajoutez l’extrait de code suivant à vos contrôleurs Account-Show et Cart-Show n’importe où avant l’appel pour afficher leurs modèles respectifs (c’est-à-dire app.getView(...)).
```
   // KLAVIYO
 var klaviyoUtils = require('*/cartridge/scripts/klaviyo/utils'), klid ;
 if(klaviyoUtils.klaviyoEnabled && 
    !klaviyoUtils.getKlaviyoExchangeID()){
    klid = klaviyoUtils.getProfileInfo();
    }
    // END KLAVIYO
```

Ensuite, vous mettrez à jour l’appel app.getView(...) pour inclure Klid en tant que variable de prédiction.

Dans votre contrôleur Account-Show :

app.getView({downloadAvailable: true, klid: klid}).render('account/accountoverview') ;
// KLAVIYO : ajout de "klid : klid

Dans votre contrôleur Cart-Show :

app.getView('Cart', {cart: app.getModel('Cart').get(),RegistrationStatus: false,klid: klid // KLAVIYO: added 'klid: klid'}).render('checkout/cart/cart') ;

Pour ajouter l’extrait Added To Cart au contrôleur Cart-AddProduct : Ajoutez l’extrait suivant à votre contrôleur Cart-AddProduct n’importe où avant l’appel pour afficher le modèle (c’est-à-dire app.getView(...)).

 /* Klaviyo Added to Cart event tracking */
 var BasketMgr = require('dw/order/BasketMgr') ;
 var klaviyoUtils = require('*/cartridge/scripts/klaviyo/utils') ;
 var addedToCartData = require('*/cartridge/scripts/klaviyo/eventData/addedToCart') ;
 if(klaviyoUtils.klaviyoEnabled){
    var exchangeID = klaviyoUtils.getKlaviyoExchangeID() ;
    var dataObj, serviceCallResult, currentBasket ;
 var isKlDebugOn = request.getHttpReferer().includes('kldebug=true') ? true
: false ;
 if (exchangeID) {
 currentBasket = BasketMgr.getCurrentBasket() ;
    if (currentBasket && currentBasket.getProductLineItems().toArray().length)
    {
 dataObj = addedToCartData.getData(currentBasket) ;
    serviceCallResult = klaviyoUtils.trackEvent(exchangeID, dataObj, klaviyoUtils.EVENT_NAMES.addedToCart,
    false) ;
 if (isKlDebugOn) {
 var klDebugData = klaviyoUtils.prepareDebugData(dataObj) ;
    var serviceCallData = klaviyoUtils.prepareDebugData(serviceCallResult) ;
    var siteGenKlDebutData = `<input type="hidden" name="siteGenKlDebutData"
 id="siteGenKlDebutData" value="${klDebugData}"/>` ;
   var siteGenServiceCallData = `<input type="hidden" name="siteGenServiceCallData"
 ="siteGenServiceCallData" value="${serviceCallData}"/>` ;
 response.writer.print(siteGenKlDebutData) ;
    response.writer.print(siteGenServiceCallData) ;
    }
   }
   }
   }
   /* END Klaviyo Added to Cart event tracking */

Extraits de Page de commande commencés : Lorsque vous ajoutez des extraits de Klaviyo à des contrôleurs de page de commande pour suivre les événements de Page de commande commencée , gardez à l’esprit ce qui suit :
Suit l’extrait de code correspondant au premier itinéraire touché en page de commande (généralement COCustomer-Start). Insérez-le n’importe où avant l’appel pour afficher le modèle (par exemple, app.getView(...)). Notez la principale différence entre cet extrait de code et les autres extraits de page de commande (mis en évidence ci-dessous) : le premier argument de la méthode KLCheckoutHelpers.startedCheckoutHelper est true au lieu de false. Notez que dans l’extrait ci-dessous, KLCheckoutHelpers.startedCheckoutHelper la méthode est true au lieu de false (comme dans les autres extraits de page de commande). Ceci est essentiel pour informer le code que nous avons un nouvel événement Page de commande Débutée à suivre.
```
/* Klaviyo a commencé à suivre l'événement Checkout */
 var KLCheckoutHelpers = require('*/cartridge/scripts/klaviyo/checkoutHelpers') ;
 var customerEmail = KLCheckoutHelpers.getEmailFromBasket() ;
   var KLTplVars = KLCheckoutHelpers.startedCheckoutHelper(true, customerEmail) ;
 if (KLTplVars.klDebugData || KLTplVars.serviceCallData) {
 app.getView({
           klDebugData: KLTplVars.klDebugData,
           serviceCallData: KLTplVars.serviceCallData
       }).render('klaviyo/klaviyoDebug') ;
   }
  /* END Klaviyo Started Checkout event tracking */
```

Ensuite, mettez à jour l’appel app.getView(...) pour inclure Klid en tant que variable de prédiction :

app.getView({
  ContinueURL: URLUtils.https('COCustomer-LoginForm').append('scope', 'checkout'),
klid: KLTplVars.klid, // KLAVIYO: added 'klid: klid'
}).render('checkout/checkoutlogin') ;

Les extraits suivants doivent être ajoutés à la première route qui se déclenche après qu’une adresse e-mail a été jointe à l’objet Basket. Si vous n’êtes pas sûr ou si vous souhaitez simplement couvrir vos besoins, nous vous recommandons d’ajouter cet extrait de code à toutes les routes suivantes : Comme pour les extraits ci-dessus, ajoutez cet extrait de code n’importe où avant l’appel pour effectuer le modèle ou avant les appels aux contrôleurs suivants (exemple : COBilling-Save: app.getController(‘COSummary’).Start()).
```
/* Klaviyo a commencé à suivre l'événement Checkout */
 var KLCheckoutHelpers = require('*/cartridge/scripts/klaviyo/checkoutHelpers') ;
var customerEmail = KLCheckoutHelpers.getEmailFromBasket() ;
  var KLTplVars = KLCheckoutHelpers.startedCheckoutHelper(false, customerEmail) ;
if (KLTplVars.klDebugData || KLTplVars.serviceCallData) {
app.getView({
klDebugData: KLTplVars.klDebugData,
serviceCallData: KLTplVars.serviceCallData
}).render('klaviyo/klaviyoDebug') ;
}
/* END Klaviyo Started Checkout event tracking */
```
Pour les itinéraires qui appellent directement des modèles (par exemple, COShipping-Start), mettez à jour l’appel app.getView(...) pour inclure Klid en tant que variable de prédiction. Voici un exemple pour la route COShipping-Start :
```
app.getView({
ContinueURL: URLUtils.https('COShipping-SingleShipping'),
Basket: cart.object,
HomeDeliveries: homeDeliveries,
klid: KLTplVars.klid, // KLAVIYO: added 'klid: klid'
}).render('checkout/shipping/singleshipping') ;
```
Pour ajouter l'extrait de confirmation de commande au contrôleur COSummary-ShowConfirmation : Ajoutez l'extrait suivant à votre contrôleur COSummary-ShowConfirmation, n'importe où avant l'appel au rendu du modèle.

/* Klaviyo Order Confirmation event tracking */
 var klaviyoUtils = require('*/cartridge/scripts/klaviyo/utils') ;
 var orderConfirmationData = require('*/cartridge/scripts/klaviyo/eventData/orderConfirmation') ;
var Logger = require('dw/system/Logger') ;
if (klaviyoUtils.klaviyoEnabled){
session.privacy.klaviyoCheckoutTracked = false ;
var exchangeID = klaviyoUtils.getKlaviyoExchangeID() ;
var dataObj, serviceCallResult ;
if (order && order.customerEmail) {
// vérifiez si le statut est nouveau ou créé
 if (order.status == dw.order.Order.ORDER_STATUS_NEW || order.status == dw.order.Order.ORDER_STATUS_OPEN)
  {
dataObj = orderConfirmationData.getData(order, exchangeID);
  serviceCallResult = klaviyoUtils.trackEvent(exchangeID, dataObj, klaviyoUtils.EVENT_NAMES.orderConfirmation,
  order.customerEmail);
}
  if('KLEmailSubscribe' in session.custom || 'KLSmsSubscribe' in session.custom)
  {
var email = order.customerEmail ;
var phone = order.defaultShipment.shippingAddress.phone ;
var e164PhoneRegex = new RegExp(/^\+[1-9]\d{1,14}$/) ;
if (phone) {
 // NOTE : Klaviyo n'accepte que les numéros de téléphone qui incluent + et le code du pays
 au début (ex pour US : +16465551212)
 // afin de réussir à abonner les utilisateurs à la liste SMS, vous devez collecter
 le code du pays dans le champ du numéro de téléphone de votre commande !
phone = '+' + phone.replace(/[^a-z0-9]/gi, '') ;
if(!e164PhoneRegex.test(phone)) {
if (session.custom.KLSmsSubscribe) {
 var logger = Logger.getLogger('Klaviyo', Klaviyo.core : Order-Confirm') ;
 logger.error(`SMS Abonnement demandé par l'utilisateur, mais un numéro de téléphone invalide
 a été fourni. Phone number : ${phone}`) ;
}
phone = null ;
}
}
if (email || phone) {
klaviyoUtils.subscribeUser(email, phone);
}
}
}
}
/* END Klaviyo Order Confirmation event tracking */

Vous avez terminé la configuration des extraits de code pour votre boutique Site Genesis.

Ajouter des snippets de case de consentement à la caisse (SG et SFRA)

Veuillez noter les conditions préalables suivantes pour synchroniser le consentement par SMS à la caisse avec Klaviyo :

Activez SMS dans Klaviyo et configurez des numéros d’envoi.
Le champ du numéro de téléphone de votre formulaire de paiement doit comporter un code de pays.

Pour recueillir le consentement à la caisse pour l'envoi d'e-mails et de SMS, vous devrez inclure des extraits de code pour que les cases à cocher de consentement apparaissent à l'endroit souhaité, en plus de configurer les paramètres de l'ID de liste indiqués dans la section Ajouter des services ci-dessus.

Par exemple, pour que ces extraits apparaissent dans la page de commande, ils peuvent être placés dans le modèle shipmentCard.isml (app_storefront_base) dans SFRA ou placés dans le modèle facturation.isml (app_storefront_core) dans SiteGen.

Vous trouverez ci-dessous les snippets ISML pour Site Genesis et SFRA. Ils peuvent être placés à n'importe quel endroit du flux de paiement qui convient le mieux à votre site. Notez que pour que le consentement à la commande fonctionne correctement sur Site Genesis, vous devez avoir inclus l'extrait de confirmation de commande référencé dans la section Ajouter des extraits de configuration ci-dessus.

Les extraits ci-dessous supposent que votre langage d'acceptation pour les e-mails et les SMS est contenu dans un ensemble de ressources appelé "checkout". Vous devrez remplacer `votre.email.subscribe.resource.string.here` et `votre.sms.subscribe.resource.string.here` avec les touches correspondant respectivement à votre langue d'inscription par courriel et par SMS. Cette langue apparaît à côté de la case à cocher.

Par exemple, le libellé de votre formulaire d'adhésion pourrait ressembler à ceci :

Email Abonnez aux e-mails de suivi
SMS Abonnez aux mises à jour SMS. En cochant cette case et en saisissant votre numéro de téléphone ci-dessus, vous acceptez de recevoir des SMS à caractère commercial (tels que [des codes de réduction] et [des rappels de panier abandonné]) de la part de [nom de l’entreprise]. Ces messages seront envoyés au numéro indiqué et sont susceptibles d’être générés par un système automatisé. Le consentement n’est pas une condition d’achat. Des frais relatifs aux messages et données peuvent s’appliquer. La fréquence des messages varie. Vous pouvez vous désabonner à tout moment en répondant STOP ou en cliquant sur le lien de désabonnement (le cas échéant) dans l’un de nos messages. Consultez notre politique de confidentialité [lien] et nos conditions d’utilisation [lien].

 <isset name="KLEmailSubscribed" value="${(session.custom.KLEmailSubscribe
  == true) ? 'checked' : ''}" scope="page" />
 < isset name="KLSmsSubscribed" value="${(session.custom.KLSmsSubscribe == true)
  ? 'checked' : ''}" scope="page" />
 < input type="checkbox" id="KLEmailSubscribe" ${KLEmailSubscribed} /> ${Resource.msg('your.email.subscribe.resource.string.here',
  'checkout', null)} <br />
  < input type="checkbox" id="KLSmsSubscribe" ${KLSmsSubscribed} /> ${Resource.msg('your.sms.subscribe.resource.string.here',
  'checkout', null)}

Activez l'intégration OCAPI dans Klaviyo

Points finaux

Afin de s'intégrer à la SFCC pour le catalogue de produits et les données de commandes historiques/en cours, Klaviyo utilise quatre points de terminaison OCAPI :

/order_search Synchronise les données historiques des commandes avec Klaviyo synchronise les événements de commande en cours toutes les 60 minutes. Les événements Produit commandé et Commande passée synchroniseront des données supplémentaires pour la segmentation et le filtrage des flux, et sont idéaux pour une personnalisation améliorée qui n'est pas disponible à partir de l'événement Confirmation de la commande. Pour les e-mails de confirmation de commande en temps réel, utilisez l'événement Confirmation de commande de la cartouche.
/sites Vous permet de sélectionner le site à partir duquel Klaviyo synchronise les données lors de la configuration de votre intégration.
/product_search Connecte votre catalogue à Klaviyo pour activer des fonctionnalités telles que les recommandations de produits dans les e-mails.
/products/*/variantes Permet de synchroniser les variantes avec Klaviyo pour activer des fonctionnalités telles que le retour en stock, les stocks faibles et les flux de baisse de prix.

Configuration côté SFCC

Avant de pouvoir communiquer avec l'OCAPI de la SFCC, certaines permissions et certains paramètres doivent être définis dans la SFCC.

Veuillez noter que si le site Klaviyo intégrations requiert des autorisations POST pour order_search et product_search, nous n'envoyons pas de données à la SFCC ; ceci est dû à la conception de l'OCAPI de la SFCC.

Accédez à https://account.demandware.com/dw/account/APIAdmin et ajoutez un client API pour Klaviyo. L’identifiant et le mot de passe du client API seront nécessaires pour générer le jeton porteur pour OCAPI.
Une fois le client API ajouté, naviguez vers Administration > Site Development > Open Commerce API Settings dans le SFCC Business Manager.
Ajoutez les extraits suivants, en remplaçant la version de l'API et l'ID du client. Nous prenons en charge les versions 19.5 et supérieures de l'API ainsi que la version 18.8. Remplacez CLIENT_ID par l'ID du client API généré lors de la configuration du client API à l'étape précédente (cela devrait ressembler à "xxxxxxxx-xxxx-xxxx-xxxxxxxxxxxx"). Si les paramètres existent déjà pour ces API, il vous suffira d'ajouter les sections surlignées ci-dessous au tableau JSON des clients existants.
1. Ajoutez le JSON suivant sous le type Shop and context Global (organization-wide), en remplaçant SHOP_API_VERSION par votre version OCAPI Shop API, puis cliquez sur Save. Une fois ajoutés, les paramètres doivent ressembler à ceci :
```
{
 " _v":"SHOP_API_VERSION",
 " clients":[
 {
 " client_id":"CLIENT_ID",
 " ressources":[
 {
 "resource_id":"/order_search",
 "methods":["post"],
 "read_attributes":"(**)",
 "write_attributes":"(**)"
 }
 ]
 }
 ]
 }
```
2. Ajoutez le JSON suivant sous le type Données et contexte Global (à l’échelle de l’organisation), en remplaçant DATA_API_VERSION par votre version de l’API de données OCAPI, puis cliquez sur Enregistrer. Une fois ajoutés, les paramètres doivent ressembler à ceci :

{
 " _v":"DATA_API_VERSION",
 " clients":[
 {
 " client_id":"CLIENT_ID",
 " ressources":[
 {
 "resource_id":"/product_search",
 "methods":["post"],
 "read_attributes":"(**)",
 "write_attributes":"(**)"
 },
 {
 "resource_id":"/sites",
 "methods":["get"],
 "read_attributes":"(**)",
 },
 {
 "resource_id":"/products/*/variations",
 "methods":["get"],
 "read_attributes":"(**)",
 }
 ]
 }
 ]
}

Configuration du côté de Klaviyo

Dans Klaviyo, sélectionnez Intégrations > Ajouter des intégrations.
Recherchez Salesforce Commerce Cloud et cliquez sur la carte, puis sur Installer.
Cliquez sur Connecter au Salesforce Commerce Cloud sur la page de destination.
Sur la page suivante, remplissez les informations suivantes :
Une fois que vous avez saisi ces informations d'identification, cliquez sur le lien Récupérer la liste des sites pour récupérer une liste des sites sur votre instance SFCC.
Une fois les sites récupérés, sélectionnez le(s) site(s) à intégrer à ce compte et cliquez sur Terminer la configuration. Votre intégration devrait maintenant commencer à synchroniser vos données de commande, de catalogue et de client.

Testez l'intégration de votre SFCC

Pour tester la configuration de votre cartouche, rendez-vous sur votre site et suivez les instructions suivantes :

Cookie vous-même en ajoutant le paramètre url utm_email comme adresse e-mail dans votre barre d'adresse. Par exemple : https://www.example.com/?utm_email=your@email.com.
Recherchez dans votre catalogue.
Afficher une page de catégorie.
Afficher une page de produit.
Ajoutez un article à votre panier.
Passez une commande test.
Naviguez vers Analytics > Metrics dans Klaviyo, puis recherchez les indicateurs provenant de Salesforce Commerce Cloud.

Testez les sélecteurs de champs d'email de Klaviyo

Pour tester qu'un champ d'email donné a été correctement ciblé et qu'il identifie correctement l'utilisateur dans Klaviyo :

Ouvrez une fenêtre de navigateur incognito.
Dans la console de développement, saisissez la commande suivante et appuyez sur Entrée : Klaviyo.isIdentified(); Le résultat devrait être le suivant : Promesse {<fulfilled>: false}
Tapez une adresse électronique dans le champ ciblé et cliquez sur la touche de tabulation pour passer à un autre élément de la page.
Retournez sur la console de développement et saisissez Klaviyo.isIdentified() ; à nouveau. Le résultat devrait être le suivant : Promesse {<fulfilled>: true}
Vous pouvez vérifier que Klaviyo reçoit bien les appels Identify en allant sur Analytics > Metrics dans Klaviyo et en trouvant le flux d'activité des événements Active on Site, où vous devriez voir la liste des adresses e-mail que vous avez saisies.

Test Checkout Email Field Selector

Pour vérifier que le champ de collecte de l'email de paiement déclenche bien l'événement Started Checkout :

Ajoutez un ou plusieurs produits au panier, puis passez à la caisse.
Lors de la validation, saisissez une adresse électronique dans le champ prévu à cet effet et cliquez sur la touche de tabulation pour passer à un autre élément de la page.
Vous pouvez vérifier que Klaviyo reçoit bien les appels Identify en allant sur Analytics > Metrics dans Klaviyo et en trouvant le flux d'activité des événements Started Checkout, où vous devriez voir que votre événement récent a été suivi.

Résultats

Vous avez maintenant intégré Salesforce Commerce Cloud à Klaviyo et testé votre intégration.