Démarrer avec Salesforce Commerce Cloud

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 SFCC avec Klaviyo se fait en trois étapes principales, abordées dans ce guide :

1. Installation de la cartouche Klaviyo dans SFCC.
2. Ajoutez des extraits d'habilitation à la SFCC.
3. 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.

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é à l'aide de 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 création du compte, afin de mieux différencier les comptes lors de la connexion. 

Configurer les cartouches Klaviyo

Téléchargez les cartouches

Vous trouverez la liste de nos applications sur Salesforce AppExchange. Sur l'AppExchange, vous pouvez en savoir plus sur Klaviyo et cliquer sur Get It Now pour accéder à Github, où nos cartouches sont disponibles dans un fichier zip à télécharger. Si vous avez un site SFRA, téléchargez le fichier zip KlaviyoSFRA, et si vous avez un site Site Genesis, téléchargez le fichier zip KlaviyoSG. 

Vous devrez installer 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

1. Copiez et collez la cartouche int_klaviyo_core.
2. 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

1. Naviguez vers Administration > Importer > Général > Projets existants dans l'espace de travail.
2. Importez le répertoire int_klaviyo_core à l'aide de l'assistant d'importation.
3. Sélectionnez l'instance SFCC avec laquelle vous souhaitez connecter la cartouche.
4. Sélectionnez Propriétés.
5. Sélectionnez Références du projet.
6. Vérifiez la cartouche int_klaviyo_core.
7. 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.

1. Naviguez vers Administration > Sites > Manage Sites.
2. Sélectionnez votre site.
3. Sélectionnez l'onglet Paramètres.
4. 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).
5. Cliquez sur Appliquer.

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

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.

1. Naviguez vers Administration > Site Development > Site Import & Export > Services.
2. Téléchargez, puis importez le fichier metadata.zip.
   
3. Lorsque vous êtes invité à confirmer l'importation de l'archive sélectionnée, sélectionnez OK.
4. Vous devriez maintenant voir que l'importation est en cours dans la section Statut, près du bas de la page.
   
5. Vous aurez désormais accès à une page de préférences à l'adresse suivante : Merchant tools > Site Preferences > Custom Preferences > klaviyo.
   
   À partir de là, vous pouvez gérer les paramètres suivants :
   • Klaviyo activé
     Doit être réglé sur "Yes" pour activer la cartouche.
   • Clé privée Klaviyo
     Une clé d'API privée de Klaviyo. Assurez-vous que la clé d'API privée Klaviyo que vous utilisez pour cette intégration a reçu un accès complet. 
   • Compte Klaviyo
     Votre clé d'API publique Klaviyo, ou ID de site.
   • Étiqueter les événements comme SFCC
     Si vous choisissez d'étiqueter les événements comme SFCC, vous aurez accès à des flux préconstruits dans Klaviyo utilisant des données SFCC. Un inconvénient actuel de l'étiquetage des événements est que si vous choisissez de les étiqueter, vous n'aurez pas accès aux recommandations Viewed Product ou Added to Cart dans les flux de produits de Klaviyo. 
     
     • Les intégrations créées avant le 13 juillet 2023 (c'est-à-dire les versions de cartouche antérieures à la version 23.7.0) génèrent des indicateurs qui ne sont pas étiquetés comme SFCC. Si vous avez utilisé une version antérieure à la 23.7.0, ce paramètre tient compte des anciennes conventions de dénomination afin d'éviter une discontinuité des données de l'indicateur dans votre compte. 
   • Send Added To Cart Event as "Add To Cart"
     Si vous avez installé une version de cartouche antérieure à la version 23.7.0 et que vous passez à la version 23.7.0 ou à une version plus récente, réglez le paramètre sur Oui. Dans le cas contraire, réglez sur Non. Ce paramètre empêche la discontinuité des données de l'indicateur dans votre compte. 
   • Sélecteurs de champs d'email Klaviyo et Sélecteur de champs d'email Checkout
     Veuillez consulter la section ci-dessous pour obtenir des informations détaillées sur la configuration de ces deux champs.
   • Type d'image
     Le type d'image du produit que vous souhaitez utiliser dans les données d'événement envoyées à Klaviyo. Si vous n'êtes pas sûr du type d'image à définir, rendez-vous sur Outils marchands > Produits et catalogues > Produits, cliquez sur un produit et déterminez le type d'affichage que vous souhaitez utiliser en fonction de ce qui est disponible (par exemple, grand, moyen, petit, haute résolution).
   • ID de la liste d'adresses électroniques de marketing
     Vous pouvez collecter des abonnés à l'email lors de la commande et les synchroniser avec une liste Klaviyo. Ce paramètre est l'ID de la liste dans Klaviyo à laquelle vous souhaitez ajouter des abonnés. Apprenez à trouver un ID de liste dans Klaviyo. Pour collecter les adresses électroniques des abonnés à la caisse, vous devrez également ajouter un snippet de case à cocher, décrit dans une section ultérieure.
   • ID de la liste de marketing SMS
     Vous pouvez collecter des abonnés SMS à la caisse et les synchroniser avec une liste Klaviyo. Ce paramètre est la liste ID Klaviyo à laquelle vous souhaitez ajouter des abonnés SMS. Apprenez à trouver un ID de liste dans Klaviyo. Si vous rassemblez à la fois des abonnés SMS et des abonnés e-mail, choisissez une liste différente pour les SMS et pour les e-mails. Cela permet de s'assurer que le consentement est toujours attribué au bon canal. Pour collecter des abonnés SMS lors du paiement, vous aurez besoin d'autres conditions préalables, ainsi que d'un snippet de case à cocher, qui sont décrits dans une section ultérieure.
     
6. 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 d'email Klaviyo et du sélecteur de champs d'email Checkout 

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

Sélecteurs de champs d'email Klaviyo

La préférence de site Klaviyo Email Field Selectors est utilisée pour cibler tous les champs de saisie d'email et de numéro de téléphone sur le site (à l'exception du champ de saisie d'email situé dans la caisse, qui est traité 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 est acceptable, tout comme les sélecteurs pouvant cibler plusieurs éléments sur le site sur la base d'attributs partagés, par exemple, input[type=email]. 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 d'adresses électroniques dans la caisse 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 sélecteur CSS unique qui cible le champ de l'adresse e-mail dans le flux de paiement de votre site, qu'il apparaisse au début, à la fin ou au milieu du processus de paiement.

Il est essentiel de configurer avec succès cette préférence de site pour qu'elle cible le champ de collecte d'adresses électroniques dans la caisse afin de suivre correctement l'événement Started Checkout, et il est donc fortement recommandé de tester pour s'assurer que les événements Started Checkout apparaissent dans Klaviyo après qu'une adresse électronique a été saisie dans le champ de collecte d'adresses électroniques dans la caisse. 

Notez également que le champ d'email de paiement ciblé par la préférence de site Checkout Email Field Selector sera automatiquement câblé pour identifier l'utilisateur, en plus de déclencher l'événement Started Checkout - c'est-à-dire qu'il n'est pas nécessaire d'inclure le sélecteur CSS pour le champ d'email de paiement à la fois dans les préférences de site Klaviyo Email Field Selectors et Checkout 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 maintenant terminé la configuration des snippets pour votre magasin SFRA. 

Configuration des snippets de Site Genesis (SG)

1. Pour ajouter le fichier KlaviyoFooter.isml au pied de page global : Ajoutez le code suivant au bas de votre fichier footer.isml (ou tout autre modèle similaire qui est chargé vers le bas de chaque page).
   

   <isinclude template="klaviyo/klaviyoFooter"/>

2. Pour ajouter des extraits pour l'identification de l'utilisateur côté serveur : Ajoutez l'extrait suivant à vos contrôleurs Account-Show et Cart-Show, n'importe où avant l'appel au rendu de 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

3. Ensuite, vous mettrez à jour l'appel app.getView(...) pour inclure klid en tant que variable pdict.
   •  Dans votre compte, affichez le contrôleur :
     

     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') ;
             

4. Pour ajouter le snippet Added To Cart au contrôleur Cart-AddProduct : Ajoutez le snippet suivant à votre contrôleur Cart-AddProduct, n'importe où avant l'appel au rendu du 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 */

5. Les snippets Started Checkout: Lorsque vous ajoutez des snippets Klaviyo aux contrôleurs de paiement pour suivre les événements Started Checkout , il est important de garder à l'esprit ce qui suit :
   • L'objectif de l'ajout de ces snippets est de vérifier si une adresse électronique a été attachée à l'objet Panier dans le flux de paiement et, si c'est le cas, de déclencher l'événement Started Checkout . Il est important de détecter l'association d'une adresse électronique avec le panier le plus tôt possible dans le processus de paiement.
   • En raison de la personnalisation de la caisse basée sur le site, il n'est pas possible pour Klaviyo de définir exactement quel contrôleur sera le premier à recevoir un objet Panier auquel est attachée une adresse e-mail.
   • Nous vous recommandons d'ajouter les extraits de code à tous les itinéraires principaux qui sont déclenchés lors du paiement. Si vous êtes capable d'utiliser le débogueur pour identifier exactement le moment où l'adresse e-mail est attachée au panier dans votre flux de paiement, n'hésitez pas à ajouter les snippets uniquement à cette route, mais testez soigneusement pour vous assurer que tous les chemins de paiement possibles (invité, connecté, connecté au cours du processus de paiement, etc.
6. Le snippet pour la première route frappée dans le checkout (typiquement COCustomer-Start) est le suivant. Insérez-le n'importe où avant l'appel au rendu du modèle (c'est-à-dire app.getView(...)). Notez la différence essentielle dans ce snippet - passer le premier argument de la méthode KLCheckoutHelpers.startedCheckoutHelper à true au lieu de false - par rapport aux autres snippets de checkout (mis en évidence ci-dessous). Notez que dans l'extrait ci-dessous, l'élément KLCheckoutHelpers.startedCheckoutHelper est vrai au lieu de faux (comme dans les autres extraits de caisse). C'est essentiel pour indiquer au code que nous avons un nouvel événement Started Checkout à 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 */
   

7. Ensuite, mettez à jour l'appel app.getView(...) pour inclure klid en tant que variable pdict :

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

8. Les extraits suivants doivent être ajoutés à la première route qui se déclenche après qu'une adresse électronique a été attachée à l'objet Panier. Si vous n'êtes pas sûr, ou si vous voulez simplement couvrir vos besoins, nous vous recommandons d'ajouter ce snippet à tous les itinéraires suivants :
   • COShipping-Start
   • COBilling-PublicStart
   • COBilling-Save
   • COPlaceOrder-Start
   Comme pour les extraits ci-dessus, ajoutez cet extrait n'importe où avant l'appel au rendu du modèle, ou avant les appels aux contrôleurs suivants (exemple de 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 */

9. Pour les routes qui appellent directement les modèles (par exemple, COShipping-Start), mettez à jour l'appel app.getView(...) pour inclure klid en tant que variable pdict. Voici un exemple pour l'itinéraire 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') ;

10. 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 maintenant terminé la configuration des snippets pour votre boutique Site Genesis. 

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

• Activez les SMS dans Klaviyo et configurez les 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 snippets apparaissent en caisse, ils peuvent être placés dans le modèle shipmentCard.isml (app_storefront_base) dans SFRA ou dans le modèle billing.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îtra à côté de la case à cocher. 

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

• Courriel
  S'abonner aux mises à jour par courriel
• SMS
  Abonnez-vous aux mises à jour par SMS. En cochant cette case et en indiquant votre numéro de téléphone ci-dessus, vous acceptez de recevoir des messages textuels de marketing (tels que [codes promotionnels] et [rappels de panier]) de la part de [nom de l'entreprise] au numéro indiqué, y compris les messages envoyés par numérotation automatique. Le consentement n'est pas une condition d'achat. Les tarifs des messages et des données peuvent s'appliquer. La fréquence des messages varie. Vous pouvez vous désinscrire à tout moment en répondant à STOP ou en cliquant sur le lien de désinscription (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/*/variations
  Permet de synchroniser les variantes avec Klaviyo pour activer des fonctionnalités telles que Back in Stock.

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.

1. Naviguez vers 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 de support pour OCAPI.
2. Une fois le client API ajouté, naviguez vers Administration > Site Development > Open Commerce API Settings dans le SFCC Business Manager.
3. 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. 1. 1. Ajoutez le JSON suivant sous le type Shop et le contexte Global (à l'échelle de l'organisation), en remplaçant SHOP_API_VERSION par la version de votre API OCAPI Shop, puis cliquez sur Enregistrer.
            

            {
             " _v":"SHOP_API_VERSION",
             " clients":[
             {
             " client_id":"CLIENT_ID",
             " ressources":[
             {
             "resource_id":"/order_search",
             "methods":["post"],
             "read_attributes":"(**)",
             "write_attributes":"(**)"
             }
             ]
             }
             ]
             }
            

            Une fois ajoutés, les paramètres devraient ressembler à ceci :
            
         2. Ajoutez le JSON suivant sous le type Data et le contexte Global (organisation-wide), en remplaçant DATA_API_VERSION par la version de votre OCAPI Data API, puis cliquez sur Save.
            

            {
             " _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":"(**)",
             }
             ]
             }
             ]
            }

            Une fois ajoutés, les paramètres devraient ressembler à ceci :
            
4.  

Configuration du côté de Klaviyo

1. Dans Klaviyo, cliquez sur votre nom de compte dans le coin inférieur gauche et naviguez vers intégrations > Ajouter des intégrations.
2. Recherchez Salesforce Commerce Cloud et cliquez sur la carte, puis sur Installer.
3. Cliquez sur Connect to Salesforce Commerce Cloud sur le site landing page. 
4. Sur la page suivante, remplissez les informations suivantes : 
   • URL du magasin
     Le domaine de votre site web (par exemple, example.com ou dev03-na01-example.demandware.net).
   • Jeton d'authentification
     Créez un jeton d'authentification pour cette intégration qui sera utilisé pour demander un jeton de porteur. Le jeton d'authentification est généré en encodant en base-64 l'identifiant et le mot de passe du client, séparés par deux points (par exemple, xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx:password).
   • Version de l'API de données
     La version de votre API de données pour laquelle vous avez ajouté l'accès dans l'étape de configuration côté SFCC (par exemple, v19_10).
   • Version de l'API de l'atelier
     La version de l'API de votre boutique pour laquelle vous avez ajouté l'accès dans l'étape de configuration côté SFCC (par ex. v19_10).
   • ID du catalogue
     L'ID du catalogue SFCC à synchroniser avec Klaviyo (par exemple, storefront-catalog-fr).
     
5. 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.
6. 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 :

1. 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.
2. Recherchez dans votre catalogue.
3. Afficher une page de catégorie.
4. Afficher une page de produit.
5. Ajoutez un article à votre panier.
6. Passez une commande test.
7. 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 :

1. Ouvrez une fenêtre de navigateur incognito.
2. Dans la console du développeur, entrez la commande suivante et appuyez sur Entrée :
   klaviyo.isIdentified() ;
   Vous devriez obtenir le résultat suivant :
   Promesse {<fulfilled>: false}
3. Tapez une adresse électronique dans le champ ciblé et cliquez sur la touche de tabulation pour passer à un autre élément de la page.
4. Retournez dans la console du développeur et entrez klaviyo.isIdentified(); encore une fois. Vous devriez obtenir le résultat suivant :
   Promesse {<fulfilled>: true}
5. 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 :

1. Ajoutez un ou plusieurs produits au panier, puis passez à la caisse.
2. 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.
3. 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.

Ressources complémentaires 

• Référence des données de Salesforce Commerce Cloud
• Comment mettre à niveau votre cartouche Salesforce Commerce Cloud ?
• Fréquence de synchronisation de la référence des intégrations