Komma igång med Salesforce Commerce Cloud

Du kommer att lära dig

Lär dig hur du integrerar Salesforce Commerce Cloud med Klaviyo. Med Klaviyo cartridge och API integrationer kan webbplatser som använder Salesforce Commerce Cloud (tidigare Demandware) snabbt ansluta och skicka både realtids- och historiska data till Klaviyo. När du integrerar Klaviyo med Salesforce Commerce Cloud (SFCC) kommer Klaviyo att börja spåra åtgärder som människor vidtar i realtid, till exempel webbplatsnavigering, sökspårning, visning av produkter, visning av kategorier, lägga till artiklar i en kundvagn, checka ut och beställa.

Det finns 3 huvudsteg för att integrera SFCC med Klaviyo:

1. Installera Klaviyo-kassetten i SFCC.
2. Lägga till enablement-snuttar till SFCC.
3. Aktivering av SFCC OCAPI-integreringsprogrammet i Klaviyo.

Innan du börjar

Klaviyo integreras med både SFCC Controller-baserade Site Genesis (SG) och Storefront Reference Architecture (SFRA) webbplatser. Varje ramverk kräver en något annorlunda kassettinstallation och snippets, som beskrivs nedan.

För att kunna använda vår version 23.7.0-kassett (eller någon högre version) rekommenderar vi att du uppdaterar ditt SFCC-kompatibilitetsläge till 21.7 eller högre.

Om du vill börja med att integrera din utvecklingsmiljö först kan du skapa ett länkat Klaviyo Konto med hjälp av den metod som beskrivs i den här artikeln och ansluta din utvecklingsmiljö till det Kontot. Vi rekommenderar att du inkluderar ordet "Dev" eller "Staging" i företagsnamnet som du använder när du konfigurerar kontot, för att bättre kunna skilja mellan konton när du loggar in. 

Ställ in Klaviyo-patronerna

Ladda ner kassetterna

Du kan hitta vår applista på Salesforce AppExchange. På AppExchange kan du lära dig mer om Klaviyo och klicka på Get It Now för att komma till Github, där våra cartridges finns tillgängliga i en zip-fil för nedladdning. Om du har en SFRA-webbplats laddar du ner zip-filen KlaviyoSFRA och om du har en Site Genesis-webbplats laddar du ner zip-filen KlaviyoSG. 

Du måste ställa in 2 patroner, som båda ingår i zip-filen som du laddade ner. Dessa patroner inkluderar:

• int_klaviyo eller int_klaviyo_sfra: En webbplatsspecifik kassett; int_klaviyo är för Site Genesis-baserade webbplatser och int_klaviyo_sfra är för SFRA-baserade webbplatser.
• int_klaviyo_core: för båda typerna av infrastruktur, innehåller vissa grundläggande, överlappande funktioner.

importera kassetterna

Det första steget är att importera cartridges i Visual Studio Code eller Eclipse så att de är tillgängliga för att länka till din SFCC-instans.

I VS-kod

1. Kopiera och klistra in int_klaviyo_core-kassetten.
2. Kopiera antingen mapparna int_klaviyo (Site Genesis) eller int_klaviyo_sfra (SFRA) till kodbasen som syskon till dina andra cartridge-mappar.

I Eclipse

1. Navigera till Administration > importera > Allmänt > Befintliga projekt i arbetsytan.
2. importera katalogen int_klaviyo_core med hjälp av guiden för import.
3. Välj den SFCC-instans som du vill ansluta kassetten till.
4. Välj Egenskaper.
5. Välj Projektreferenser.
6. Kolla in int_klaviyo_core-kassetten.
7. Upprepa steg 2 till 6 för den andra kassetten som är specifik för ditt ramverk (antingen int_klaviyo eller int_klaviyo_sfra).

Lägg till patronerna i patronbanan

När kassetterna har importerats måste de läggas till i listan över kassetter som används av din webbplats med hjälp av SFCC:s Business Chef.

1. Navigera till Administration > Sites > Manage Sites.
2. Välj din webbplats.
3. Välj fliken Inställningar.
4. Lägg till namnen på de importerade Klaviyo-kassetterna med kärnkassetten sist (antingen int_klaviyo:int_klaviyo_core eller int_klaviyo_sfra:int_klaviyo_core) i början av inmatningen för kassettsökvägen märkt Cartridges.
5. Klicka på Apply.

När du har klickat på Apply bör du nu se de 2 patronerna i början av fältet som är märkt Effektiv patronväg.

Lägg till tjänster

När du har importerat kassetterna och lagt till dem på platsens kassettväg måste tjänsten Klaviyo läggas till för att möjliggöra konfigurering av inställningar för kassetten. I rotkatalogen för zip-filen med Klaviyo-kassetter finns en annan zip-fil som heter metadata.zip. Följande anvisningar kommer att hänvisa till denna zip-fil.

1. Navigera till Administration > Site Development > Site importera & Export > Services.
2. Ladda upp och importera sedan filen metadata.zip.
   
3. När du uppmanas att bekräfta om du vill importera den valda arkivera, välj OK.
4. Du bör nu se att importera körs under avsnittet Status längst ner på sidan.
   
5. Du kommer nu att ha tillgång till en sida med inställningar på Merchant tools > Site Preferences > Custom Preferences > Klaviyo .
   
   Härifrån kan du hantera följande inställningar:
   • Klaviyo aktiverad
     Måste vara inställt på "Yes" för att aktivera kassetten.
   • Klaviyo Privat Nyckel
     En privat API-nyckel för Klaviyo. Se till att den Klaviyo private API-nyckel som du använder för denna integrationer har beviljats full åtkomst. 
   • Klaviyo Konto
     Ditt Klaviyo offentliga API-nyckel eller webbplats-ID.
   • Märkevenemang som SFCC
     Om du väljer att märka evenemang som SFCC får du tillgång till färdigbyggd flöde i Klaviyo med hjälp av SFCC data. En aktuell nackdel med att märka händelser är att om du väljer att märka dem kommer du inte att ha tillgång till rekommendationerna Viewed Product eller Added to Cart i Klaviyo produktfeed. 
     
     • Om du tidigare har installerat en kassettversion som är äldre än 23.7.0 och nu uppgraderar till version 23.7.0 eller högre ska du ange No. integrationer som skapats före den 13 juli 2023 (dvs. kassettversioner före 23.7.0) genererar mättal som inte är märkta som SFCC. Om du tidigare har använt en version som är äldre än 23.7.0, kommer denna inställning Konto för de gamla namnkonventionerna att förhindra att mättal data inte längre finns i ditt Konto. 
   • Send Added To Cart Event as "Add ToCart"
     Om du tidigare har installerat en kassettversion som är äldre än 23.7.0 och nu uppgraderar till version 23.7.0 eller senare ska du ange Yes. I annat fall, ställ in till Nej. Denna inställning förhindrar att mättal data avbryts på ditt Konto. 
   • Klaviyo Email Fältselektorer och kassa e-post Fältselektor
     Se avsnittet nedan för detaljerad information om hur du konfigurerar dessa 2 fält.
   • Typ av bild
     Den typ av produktbild som du vill ska användas i händelsen data skickas till Klaviyo. Om du inte är säker på vilken bildtyp du ska använda kan du navigera till Merchant tools > Products och Catalogs > Products, klicka på en produkt och bestämma vilken bildtyp du vill använda utifrån vad som finns tillgängligt (t.ex. stor, medium, liten, högupplöst).
   • Marknadsföring E-postlista ID
     Du kan samla in e-postprenumeranter i kassan och synkronisera dem till en Klaviyo lista. Denna inställning är ID för den lista i Klaviyo som du vill lägga till e-postprenumerant till. Lär dig hur du hittar ett lista-ID Klaviyo i. För att samla e-post prenumerant på kassa måste du också lägga till en checkbox snippet som beskrivs i ett senare avsnitt.
   • Marknadsföring av sms-lista ID
     Du kan samla in sms som prenumerant på kassa och synkronisera dem till en Klaviyo lista. Denna inställning är det ID Klaviyo lista som du vill lägga till sms-prenumerant till. Lär dig hur du hittar ett lista-ID Klaviyo i. Om du samlar in både sms- och e-postprenumeration, välj en annan lista för sms än för e-post. Detta säkerställer att samtycket alltid tillskrivs rätt kanal på ett korrekt sätt. För att samla in sms prenumerant på kassa, behöver du några andra förutsättningar, tillsammans med en kryssrutan snippet, som beskrivs i ett senare avsnitt.
     
6. Filen metadata.zip kommer också att skapa en ny tjänst i SFCC. Navigera till Administration > Operations > Services, du bör nu se 2 nya poster under fliken Services som heter KlaviyoEventService och KlaviyoSubscribeProfilesService, var och en med respektive profil och referenser.

Konfigurera Klaviyo Email Fältselektorer och kassa e-post Fältselektorer 

Dessa preferenser är viktiga för att Klaviyo framgångsrikt ska kunna identifiera och spåra webbplatsbesökare. Om en besökare inte identifieras till Klaviyo kommer inga händelser att spåras för den besökaren. När du är klar med integreringen kan du läsa om hur du testar inställningen för Klaviyo Email och kassa e-post field selector i avsnittet Testa din SFCC-inställning nedan. 

Klaviyo Email Fältväljare

Webbplatspreferensen Klaviyo Email Field Selectors används för att rikta in sig på alla e-post- och telefonnummer som finns på webbplatsen (med undantag för e-postinmatningen i kassa, som behandlas nedan). Vi identifierar dessa fält via standard CSS-selektorer, där varje fält läggs till individuellt i webbplatsens preferenser (som är en "uppsättning strängar", vilket gör det möjligt att ange flera strängvärden ett efter ett). Alla komplexa väljare som kan användas i en standardformatmall för att rikta in sig på en specifik element kan användas, t.ex. #dwfrm_login div.username input.input-text är acceptabelt, liksom väljare som kan rikta in sig på flera element på webbplatsen baserat på delade attribut, t.ex. input[type=e-post]. Var noga med att undvika att rikta inmatningar via dynamiskt genererade ID:n - ett mycket vanligt fall i SiteGen - eftersom dessa ID:n kommer att ändras baserat på sidladdning och därmed misslyckas (t.ex. #dwfrm_login_username_d0fignzngiyq).

Observera att fält som läggs till i DOM efter sidladdning fortfarande kan riktas. Exempel på detta är ett e-postadressfält som infogas i en modal efter ett AJAX-anrop, eller ett fält som injiceras i DOM av JavaScripts från tredje part.

Observera också att enbart telefonnummerfält kanske inte helt identifierar användaren till Klaviyo, beroende på dina sms-inställningar på ditt Klaviyo Konto (om sms är aktiverat och du har ett sändningsnummer som är kopplat till landet för det inmatade telefonnumret kommer webbläsaren att identifieras). Att lägga till CSS-selektorer för att rikta in sig på telefonnummerfält kan därför betraktas som "trevligt att ha" eller "behövs", medan det bör betraktas som nödvändigt att lägga till dem för e-postfält.

kassa e-post Fältväljare

E-postinsamlingsfältet i kassa är ett specialfall och har som sådant en egen sitepreferens för inriktning. Principen fungerar exakt på samma sätt som Klaviyo Email Field Selectors site preference: ange helt enkelt en enda CSS-väljare som riktar sig till fältet för e-postadress i webbplatsens kassaflöde, oavsett om det visas i början, slutet eller mitt i kassan.

En lyckad konfiguration av denna platspreferens för att rikta in sig på e-postinsamlingsfältet i kassa är avgörande för att korrekt spåra Started kass a-händelsen, och därför rekommenderas det starkt att du testar för att säkerställa att Started kassa-händelser visas i Klaviyo efter att en e-postadress har angetts i e-postinsamlingsfältet i kassa. 

Observera också att det kassa e-post-fält som omfattas av webbplatsinställningen kassa e-post Field Selector automatiskt kommer att kopplas för att identifiera användaren, utöver att utlösa händelsen Started kassa (dvs. det finns inget behov av att inkludera CSS-väljaren för kassa e-post-fältet i både webbplatsinställningarna Klaviyo Email Field Selectors och kassa e-post Field Selector).

Lägg till installationssnuttar

Den sista delen av cartridge-konfigurationen är att lägga till snippets i webbplatsens mall-filer för att göra det möjligt för cartridgen att kommunicera med webbplatsen. Dessa steg skiljer sig mycket åt för infrastrukturerna Site Genesis (SG) och Storefront Reference Architecture (SFRA), så se till att du följer rätt instruktioner för din installation.

Konfiguration av utdrag för Storefront Reference Architecture (SFRA)

Lägg till följande kod längst ner i filen pageFooter.isml:

<isinclude template="klaviyo/klaviyoFooter"/>

Du har nu slutfört konfigurationen av snippets för din SFRA-butik. 

Installation av Site Genesis (SG)-snippet

1. Så här lägger du till KlaviyoFooter.isml i den globala sidfoten: Lägg till följande kod längst ner i din footer.isml-fil (eller någon liknande mall som laddas längst ner på varje sida).
   

   <isinclude template="klaviyo/klaviyoFooter"/>

2. Så här lägger du till snippets för användaridentifiering på serversidan: Lägg till följande snutt i Konto-Show- och Cart-Show-kontrollerna någonstans före anropet för att rendera deras respektive mall (dvs. app.getView(...)).
   

      // Klaviyo
       var klaviyoUtils = require('*/cartridge/scripts/Klaviyo/utils'), klid;
    if(klaviyoUtils.klaviyoEnabled && 
       !klaviyoUtils.getKlaviyoExchangeID())  // END{
       klid = klaviyoUtils.getProfileInfo();
       }
       Klaviyo

3. Sedan uppdaterar du app.getView(...)-anropet för att inkludera klid som en pdict-variabel.
   •  I din Konto-Show-kontroller:
     

     app.getView({downloadAvailable: true, klid: klid}).render('Konto/accountoverview');
     // Klaviyo: tillagt 'klid: klid'

   • I din Cart-Show controller:
     

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

4. Så här lägger du till snippet Added To Cart i styrenheten Cart-AddProduct: Lägg till följande snutt i din Cart-AddProduct-kontroller någonstans före anropet för att rendera köpcentret (dvs. app.getView(...)).
   

    /* Klaviyo Added to Cart event spårning */
    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"
    id="siteGenServiceCallData" value="${serviceCallData}" />`;
    response.writer.print(siteGenKlDebutData);
       response.writer.print(siteGenServiceCallData);
       }
      }
      }
      }
      /* END Klaviyo Added to Cart event spårning */

5. Startade kass a-snuttar: När du lägger till Klaviyo snippets i kassakontrollers för att spåra Started kass a-händelser är det viktigt att tänka på följande:
   • Målet med att lägga till dessa snippets är att kontrollera om en e-postadress har bifogats till Basket-objektet inom kassaflödet, och när den är bifogad, utlösa händelsen Started kass a. Det är viktigt att fånga upp kopplingen mellan en e-postadress och Korgen så tidigt som möjligt i kassaflödet.
   • På grund av platsbaserad kassaanpassning är det inte möjligt för Klaviyo att definiera exakt vilken controller som kommer att vara den första att få ett Basket-objekt med en e-postadress kopplad till sig.
   • Vi rekommenderar att kodsnippet läggs till i alla större rutter som utlöses inom kassa. Om du kan använda felsökaren för att identifiera exakt när e-postadressen kopplas till korgen i ditt kassaflöde, lägg gärna till snuttarna endast på den rutten, men testa noggrant för att säkerställa att alla möjliga kassastigar (gäst, logga in, logga in inom kassa, etc.) utlöser koden.
6. Snippet för den första rutten i kassan (vanligtvis COCustomer-Start) följer nedan. Infoga den någonstans före anropet för att rendera köpcentret (dvs. app.getView(...)). Observera den viktigaste skillnaden i det här utdraget - att skicka det första argumentet KLCheckoutHelpers.startedCheckoutHelper-metoden som true istället för false - jämfört med de andra kassa-utdragen (markerade nedan). Observera att i utdraget nedan är KLCheckoutHelpers.startedCheckoutHelper metoden är sann istället för falsk (som i de andra kassautdragen). Detta är viktigt för att koden ska veta att vi har en ny Started kassa-händelse att spåra.

   /* Klaviyo Startade kassa event spårning */
    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 Startade kassa event spårning */
   

7. Uppdatera sedan app.getView(...)-anropet för att inkludera klid som en pdict-variabel:

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

8. Följande snuttar ska läggas till i den första rutten som startas efter att en e-postadress har kopplats till Basket-objektet. Om du är osäker, eller bara vill vara på den säkra sidan, rekommenderar vi att du lägger till den här snippeten på alla följande rutter:
   • COShipping-Start
   • COBilling-PublicStart
   • COBilling-spara
   • COPlaceOrder-Start
   Som med ovanstående utdrag, lägg till detta utdrag var som helst före anropet för att rendera köpcentret, eller före anrop till efterföljande styrenheter (exempel från COBilling-Save: app.getController('COSummary').Start()). 

   /* Klaviyo Startade kassa event spårning */
    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 Startade kassa event spårning */

9. För rutter som anropar mall direkt (t.ex. COShipping-Start), uppdatera app.getView(...)-anropet för att inkludera klid som en pdict-variabel. Här är ett exempel på rutten COShipping-Start:

   app.getView({
   ContinueURL: URLUtils.https('COShipping-SingleShipping'),
   Basket: cart.object,
   HomeDeliveries: homeDeliveries,
   klid: KLTplVars.klid, // KLAVIYO: added 'klid: klid'
   }).render('kassa/shipping/singleshipping');

10. Så här lägger du till Order Confirmation-snippet i COSummary-ShowConfirmation-styrenheten: Lägg till följande snippet i din COSummary-ShowConfirmation-kontroller någonstans före anropet för att rendera köpcentret.

    /* Klaviyo Order Confirmation event spårning */
     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) {
    // kontrollera om statusen är ny eller skapad
     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' i session.custom || 'KLSmsSubscribe' i session.custom)
      {
    var e-post = order.customerEmail;
    var phone = order.defaultShipment.shippingAddress.phone;
    var e164PhoneRegex = new RegExp(/^\+[1-9]\d{1,14}$/);
    if (phone) {
     // OBS: Klaviyo accepterar endast telefonnummer som innehåller + och landskoden
     i början (ex för US: +16465551212)
     // för att framgångsrikt få användarnas prenumerera till sms-listan måste du samla
     landskoden i ditt beställnings telefonnummerfält!
    phone = '+' + phone.replace(/[^a-z0-9]/gi, '');
    if(!e164PhoneRegex.test(phone)) {
    if (session.custom.KLSmsSubscribe) {
     var logger = Logger.getLogger('Klaviyo', "Klaviyo.core: Orderbekräftelse');
     logger.error(`sms Prenumeration begärd av användaren, men ett ogiltigt telefonnummer
     angavs. Phone number: ${phone}`);
    }
    phone = null;
    }
    }
    if (e-post || phone) {
    klaviyoUtils.subscribeUser(email, phone);
    }
    }
    }
    }
    /* END Klaviyo Order Confirmation event spårning */

Du har nu slutfört installationen av snippets för din Site Genesis-butik. 

Lägg till samtycke vid kassa checkbox snippets (SG och SFRA)

För att samla in samtycke vid kassa för e-post och sms måste du inkludera kodsnippet för att kryssrutorna för samtycke ska visas där så önskas, förutom att konfigurera inställningarna för lista-ID som anges i avsnittet Lägg till tjänster ovan.

För att dessa snippets ska visas i kassa kan de till exempel placeras i mailet shipmentCard.isml (app_storefront_base) inom SFRA eller placeras i mailet fakturering.isml (app_storefront_core) inom SiteGen. 

Nedan finns ISML-snippets för både Site Genesis och SFRA, och de kan placeras var som helst i kassaflödet som bäst passar din specifika webbplats. Observera att för att samtycke på kassa ska fungera korrekt på Site Genesis måste du ha inkluderat Orderbekräftelse-snippet som hänvisas till i avsnittet Lägg till installations-snippets ovan.

Snuttarna nedan förutsätter att ditt opt-in-språk för e-post och sms finns i en resurspaket för egenskaper som heter "kassa". Du måste ersätta `din.e-post.prenumerera.resurs.sträng.här`. och "din.sms.prenumerera.resource.string.here med de tangenter som motsvarar ditt e-post- respektive sms-opt-in-språk. Detta språk kommer att visas bredvid kryssrutan. 

Till exempel kan ditt opt-in-språk se ut så här:

• e-post
  prenumerera till e-post uppdatera
• sms
  prenumerera till sms uppdatera. Genom att kryssa i denna ruta och ange ditt telefonnummer ovan samtycker du till att få marknadsförings-sms (såsom [kampanjkoder] och [påminnelser om kundvagn]) från [företagsnamn] på det angivna numret, inklusive meddelanden som skickas via autodialer. Samtycke är inte ett villkor för något köp. Priser för meddelanden och data kan tillkomma. Meddelandefrekvensen varierar. Du kan när som helst avsluta prenumerationen genom att svara STOP eller klicka på avregistreringslänk (där sådan finns) i något av våra meddelanden. Se vår sekretesspolicy [länk] och våra tjänstevillkor [länk].

 <"""" ${KLSmsSubscribed} > 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= xml-ph-0031@deepl.inter ${Resource.msg('your.sms.subscribe.resource.string.here',
  'checkout', null)}

Aktivera OCAPI-integreringsverktyget i Klaviyo

Slutpunkter

För att integrera med SFCC för produktkatalog och historisk/pågående order data använder Klaviyo sig av fyra OCAPI slutpunkt:

• /order_search
  Synkroniserar historiska order data till Klaviyo synkroniserar pågående orderhändelser var 60:e minut. Händelserna Ordered Product och Placed Order synkroniserar ytterligare data för segmentering och flödesfilter och är idealiska för utökad personalisering som inte är tillgänglig via orderbekräftelsehändelsen. För e-post med orderbekräftelse i realtid använder du orderbekräftelsehändelsen från kassetten.
• /webbplatser
  Gör att du kan välja vilken webbplats Klaviyo synkroniserar data från under din integrationskonfiguration.
• /produkt_search
  Kopplar din katalog till Klaviyo för att möjliggöra funktioner som produktrekommendationer i e-post.
• /products/*/variation
  Möjliggör synkronisering av variation till Klaviyo för att möjliggöra funktionalitet såsom tillbaka i lager, låg lagerhållning och prisfall flöde. 

Inställning på SFCC-sidan

Innan vi kan kommunicera med SFCC:s OCAPI måste vissa behörigheter och inställningar sättas upp i SFCC.

Observera att även om Klaviyo integrationer kräver POST-behörigheter för order_search och product_search, skickar vi faktiskt inte data till SFCC; detta beror på utformningen av SFCC: s OCAPI.

1. Navigera till https://account.demandware.com/dw/account/APIAdmin och lägga till en API-klient för Klaviyo. API-klientens ID och lösenord kommer att krävas för att generera en bearer token för OCAPI.
2. När klienten API är tillagd, navigera till Administration > Site Development > Open Commerce API Settings i SFCC Business Chef.
3. Lägg till följande snuttar och byt ut API-versionen och klient-ID. Vi support API versioner 19.5 och senare samt 18.8. Ersätt CLIENT_ID med API-klient-ID:t som genererades från API-klientinstallationen i föregående steg (detta bör se ut ungefär som "xxxxxxxx-xxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"). Om inställningarna redan finns för dessa API:er behöver du kanske bara lägga till de markerade avsnitten nedan i den befintliga JSON-arrayen för klienter.
   1. Lägg till följande JSON under typen Shop och kontexten Global (organisationsomfattande), ersätt SHOP_API_VERSION med din OCAPI Shop API-version och klicka sedan på Spara.
      

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

      När du har lagt till inställningarna bör de se ut ungefär så här:
      
   2. Lägg till följande JSON under typen data och kontexten Global (organisationsomfattande), ersätt DATA_API_VERSION med dina OCAPI-data API version och klicka sedan på Spara.
      

      {
       " _v":"DATA_API_VERSION",
       " clients":[
       {
       " client_id":"CLIENT_ID",
       " resources":[
       {
       "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":"(**)",
       }
       ]
       }
       ]
      }

      När du har lagt till inställningarna bör de se ut ungefär så här:
      

Klaviyo-side setup

1. I Klaviyo, välj integrationer > Lägg till integrationer.
2. Sök efter Salesforce Commerce Cloud och klicka på kortet, klicka sedan på Installera.
3. Klicka på Connect för att komma till Salesforce Commerce Cloud på målsidan. 
4. På nästa sida fyller du i följande information: 
   • butik URL
     Domänen för din webbplats (t.ex. example.com eller dev03-na01-example.demandware.net).
   • autentiseringstoken
     Skapa en autentiseringstoken för denna integrationer som kommer att användas för att begära en bearer-token. Autentiseringstoken genereras genom att bas-64-koda klient-ID och lösenord tillsammans med ett kolon (t.ex. xxxxxxxx-xxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx:password).
   • data API Version
     Den version av dina data API som du lade till åtkomst för i steget SFCC-side Setup (t.ex. v19_10).
   • Shop API-version
     Den version av ditt Shop API som du lade till åtkomst för i steget Inställningar på SFCC-sidan (t.ex. v19_10).
   • Katalog-ID
     ID för den SFCC-katalog som ska synkroniseras med Klaviyo (t.ex. storefront-catalog-en). Du kan hitta ditt katalog-ID i Salesforce Business Manager under Merchant Tools > Products and Catalogs > Catalogs. 
     
5. När du har angett dessa autentiseringsuppgifter klickar du på länken Hämta lista över webbplatser för att hämta en lista över webbplatser på din SFCC-instans.
6. När webbplatserna har hämtats väljer du den eller de webbplatser som ska integreras med detta Konto och klickar på Slutför installationen. Din integrationstjänst bör nu börja synkronisera din order, katalog och kunddata.

Testa din SFCC-integrerare

För att testa din kassettinstallation, gå till din webbplats och följ dessa instruktioner:

1. kaka dig själv genom att lägga till url-parametern utm_email som din e-postadress i adressfältet. Till exempel: https://www.example.com/?utm_email=your@email.com.
2. Sök i din katalog.
3. Visa en kategorisida.
4. Visa en produktsida.
5. Lägg till en vara i din kundvagn.
6. Lägg en testorder.
7. Navigera och analysera > mättal i Klaviyo, leta sedan efter mättal som kommer från Salesforce Commerce Cloud.

Test Klaviyo Email Fältväljare

För att testa att ett visst e-postfält har riktats på rätt sätt och identifierar användaren på rätt sätt till Klaviyo:

1. Öppna ett inkognito-fönster i webbläsaren.
2. I Developer Console skriver du in följande kommando och trycker på Enter:
   Klaviyo.isIdentified();
   Detta bör resultera i följande utdata:
   Löfte {<fulfilled>: false}
3. Skriv in en e-postadress i målfältet och klicka på tabbtangenten för att ändra fokus till någon annan element på sidan.
4. Gå tillbaka till Developer Console och ange Klaviyo.isIdentified(); ...igen. Detta bör resultera i följande utdata:
   Löfte {<fulfilled>: true}
5. Du kan dubbelkolla att Klaviyo verkligen tar emot Identify calls genom att gå till analys > mättal i Klaviyo och hitta Aktiv on Site events aktivitetsflöde, där du bör se de e-postadresser som du har angett listade.

Test kassa e-post Field Selector

För att testa att insamlingsfältet för kassa e-post framgångsrikt utlöser händelsen Startad kassa :

1. Lägg till en eller flera produkter i varukorgen och starta sedan kassan.
2. I kassan skriver du in en e-postadress i målfältet och klickar på tabbtangenten för att ändra fokus till någon annan element på sidan.
3. Du kan dubbelkolla att Klaviyo verkligen tar emot Identify calls genom att gå till analys > mättal i Klaviyo och hitta aktivitetsflödet för Started kassa events, där du bör se att ditt senaste event har spårats.

Utfall

Du har nu integrerat Salesforce Commerce Cloud med Klaviyo och testat din integrationer.

Ytterligare resurser 

• Salesforce Commerce Cloud data referens
• Så här uppgraderar du din Salesforce Commerce Cloud-kassett
• Hur ofta integrationer synkroniserar referens