Komma igång med Salesforce Commerce Cloud

Du kommer att lära dig

Lär dig hur du integrerar Salesforce Commerce Cloud med Klaviyo. Klaviyo-cartridgen och API-integrationen gör att webbplatser som använder Salesforce Commerce Cloud (tidigare Demandware) snabbt kan ansluta och skicka både realtids- och historiska data till Klaviyo. När du integrerar Klaviyo med Salesforce Commerce Cloud (SFCC) börjar Klaviyo spåra åtgärder som personer utför i realtid, till exempel webbplatsnavigering, spårning av sökningar, visning av produkter, visning av kategorier, att lägga till varor i en varukorg, att gå till kassan och att lägga en beställning.

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

1. Installera Klaviyo-cartridgen i SFCC.
2. Lägga till enablement-snippets i SFCC.
3. Aktivera SFCC OCAPI-integrationen 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 cartridge-konfiguration och kodavsnitt som beskrivs nedan.

För att använda vår cartridge version 23.7.0 (eller senare version) rekommenderar vi att du uppdaterar ditt SFCC-kompatibilitetsläge till 21.7 eller senare.

Om du vill börja med att integrera din utvecklingsmiljö först kan du skapa ett länkat Klaviyo-konto med hjälp av metoden 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 du använder när du skapar kontot, för att enklare kunna skilja mellan konton när du är inloggad.

Det rekommenderas också att du lägger till Klaviyo IP-adresser i din brandväggsleverantörs godkännandelista för att minimera problem med autentisering och konfiguration. För ytterligare information, se Så lägger du till IP-adresser för Klaviyo-integrationstrafik i godkännandelistan.

Konfigurera Klaviyo-kassetterna

Ladda ner cartridgepaketen

Du kan hitta vår applistning på Salesforce AppExchange. På AppExchange kan du läsa mer om Klaviyo och klicka på Hämta nu 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 konfigurera 2 cartridges, som båda ingår i zip-filen du laddade ner. Dessa cartridges inkluderar:

• int_klaviyo eller int_klaviyo_sfra: En platsspecifik cartridge; int_klaviyo är för webbplatser som baseras på Site Genesis och int_klaviyo_sfra är för webbplatser som baseras på SFRA.
• int_klaviyo_core: för båda typerna av infrastrukturer, som innehåller viss grundläggande, överlappande funktionalitet.

Importera cartridges

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

I VS Code

1. Kopiera och klistra in int_klaviyo_core-cartridgen.
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. Gå till Administration > Import > General > Existing Projects into Workspace.
2. Importera katalogen int_klaviyo_core med hjälp av importguiden.
3. Välj den SFCC-instans som du vill ansluta kassetten till.
4. Välj Egenskaper.
5. Välj Projektreferenser.
6. Kontrollera i int_klaviyo_core-kassetten.
7. Upprepa steg 2 till 6 för den andra cartridgen som är specifik för ditt ramverk (antingen int_klaviyo eller int_klaviyo_sfra).

Lägg till patronerna i patrongången

När patronerna har importerats måste de läggas till i listan över patroner som används av din webbplats via SFCC:s Business Manager.

1. Gå till Administration > Webbplatser > Hantera webbplatser.
2. Välj din webbplats.
3. Välj fliken Inställningar.
4. I början av inmatningsfältet för kassettens sökväg med etiketten Cartridges lägger du till namnen på de importerade Klaviyo-kassetterna, med core-kassetten sist (antingen int_klaviyo:int_klaviyo_core eller int_klaviyo_sfra:int_klaviyo_core).
5. Klicka på Tillämpa.

När du har klickat på Använd ska du nu se de 2 cartridges i början av fältet med etiketten Effective Cartridge Path.

Lägg till tjänster

När du har importerat cartridges och lagt till dem i webbplatsens cartridge-sökväg måste Klaviyo Service läggas till för att aktivera inställningskonfiguration för cartridgen. I rotkatalogen för zip-filen med Klaviyo-cartridges finns en annan zip-fil som heter metadata.zip. Följande anvisningar kommer att hänvisa till den här zip-filen.

1. Navigera till Administration > Site Development > Site Import & Export > Services.
2. Ladda upp och importera sedan filen metadata.zip.
   

3. När du uppmanas att bekräfta om du vill importera det valda arkivet väljer du OK.
4. Du bör nu se att importen körs under avsnittet Status nära längst ned på sidan.
   

5. Du får nu åtkomst till en inställningssida på Merchant tools > Site Preferences > Custom Preferences > klaviyo.
   
   Här kan du hantera följande inställningar:

• Klaviyo aktiverat
  Måste vara inställt på "Ja" för att aktivera cartridgen.
• Klaviyo Private Key
  En privat Klaviyo API-nyckel. Se till att den privata Klaviyo API-nyckel du använder för den här integrationen har beviljats fullständig åtkomst.
• Klaviyo-konto
  Din offentliga API-nyckel för Klaviyo, eller webbplats-ID.
• Märk händelser som SFCC
  Om du väljer att märka händelser som SFCC får du tillgång till färdiga flöden i Klaviyo som använder SFCC-data. En aktuell nackdel med att märka händelser är att om du väljer att märka dem får du inte tillgång till rekommendationer för Viewed Product eller Added to Cart i Klaviyos produktfeed.
  
  • Om du tidigare installerade en cartridge-version som är äldre än 23.7.0 och nu uppgraderar till version 23.7.0 eller senare, ställ in på Nej. Integrationer som skapades före 13 juli 2023 (dvs. cartridge-versioner före 23.7.0) genererar mättal som inte är märkta som SFCC. Om du tidigare använde en version före 23.7.0 tar den här inställningen hänsyn till de gamla namngivningskonventionerna för att förhindra ett avbrott i mättalsdata i ditt Konto.
• Skicka Added To Cart-händelse som ”Add To Cart”
  Om du tidigare installerade en cartridge-version äldre än 23.7.0 och nu uppgraderar till version 23.7.0 eller senare ska du ställa in till Ja. Annars ställer du in till Nej. Den här inställningen förhindrar avbrott i mättalsdata i ditt konto.
• Väljare för fältet Klaviyo Email och Väljare för e-postfältet i kassan
  Se avsnittet nedan för detaljerad information om hur du konfigurerar dessa 2 fält.
• Bildtyp
  Den typ av produktbild du vill använda i händelsedata som skickas till Klaviyo. Om du inte är säker på vilken bildtyp du ska ställa in går du till Merchant tools > Products and Catalogs > Products, klickar på en produkt och avgör vilken vytyp du vill använda baserat på vad som är tillgängligt (t.ex. large, medium, small, hi-res).
• ID för e-postlista för marknadsföring
  Du kan samla in e-postprenumeranter i kassan och synka dem till en Klaviyo-lista. Den här inställningen är ID:t för listan i Klaviyo som du vill lägga till e-postprenumeranter i. Läs hur du hittar ett list-ID i Klaviyo. För att samla in e-postprenumeranter i kassan behöver du också lägga till en kryssrutekodsnutt, som beskrivs i ett senare avsnitt.
• Id för sms-lista för marknadsföring
  Du kan samla in sms-prenumeranter i kassan och synka dem till en Klaviyo-lista. Den här inställningen är ID:t för Klaviyo-listan som du vill lägga till sms-prenumeranter i. Lär dig hur du hittar ett list-ID i Klaviyo. Om du samlar in både sms- och e-postprenumeranter ska du välja en annan lista för sms än för e-post. Detta säkerställer att samtycke alltid tilldelas korrekt till rätt kanal. För att samla in sms-prenumeranter i kassan behöver du även några andra förutsättningar, tillsammans med ett snippet för en kryssruta, som beskrivs i ett senare avsnitt.
  

6. Filen metadata.zip skapar också en ny tjänst i SFCC. Gå till Administration > Operations > Services. Nu ska du se 2 nya poster under fliken Services som heter KlaviyoEventService och KlaviyoSubscribeProfilesService, var och en med respektive profil- och autentiseringsuppgifter.

Konfigurera fältväljare för Klaviyo Email och fältväljare för e-postadress i kassan

Dessa inställningar är avgörande för att Klaviyo ska kunna identifiera och spåra webbplatsbesökare. Om en besökare inte identifieras i 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 din Klaviyo Email och konfigurationen av fältväljaren för e-post i kassan i avsnittet Testa din SFCC-konfiguration nedan.

Fältväljare för Klaviyo Email

Webbplatsinställningen Klaviyo Email Field Selectors används för att rikta in sig på alla e-post- och telefonnummerindatafält på webbplatsen (med undantag för e-postindatafältet i kassan, som hanteras nedan). Vi identifierar dessa fält via standard-CSS-selektorer, där var och en läggs till individuellt i webbplatsinställningen (som är en ”uppsättning strängar” och gör att flera strängvärden kan anges ett i taget). Alla komplexa selektorer som kan användas i ett standardformatmall för att rikta in sig på ett specifikt element kan användas, t.ex. #dwfrm_login div.username input.input-text är godtagbart, liksom selektorer som kan rikta in sig på flera element på webbplatsen baserat på delade attribut, t.ex. input[type=email]. Se till att undvika att rikta in dig på indataval via dynamiskt genererade ID:n – ett mycket vanligt fall i SiteGen – eftersom dessa ID:n ändras vid sidinläsning och därför misslyckas (t.ex. #dwfrm_login_username_d0fignzngiyq).

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

Observera också att fält för enbart telefonnummer kanske inte fullt ut identifierar användaren för Klaviyo, beroende på dina sms-inställningar i ditt Klaviyo-konto (om sms är aktiverat och du har ett sändningsnummer kopplat till landet för det angivna telefonnumret identifieras webbläsaren). Därför kan det ses som ”bra att ha” eller ”vid behov” att lägga till CSS-selektorer för att rikta in sig på fält för telefonnummer, medan det bör ses som nödvändigt att lägga till dem för e-postfält.

Väljare för e-postfältsindikator i kassan

Fältet för insamling av e-postadress i kassan är ett specialfall och har därför en egen webbplatspreferens för inriktning. Principen fungerar på exakt samma sätt som webbplatspreferensen Klaviyo Email Field Selectors: ange helt enkelt en enskild CSS-selektor som riktar in sig på e-postadressfältet i webbplatsens kassaflöde, oavsett om det visas i början, i slutet eller mitt i kassan.

Att konfigurera den här webbplatsinställningen så att den pekar på fältet för insamling av e-postadress i kassan är avgörande för att korrekt spåra händelsen Started Checkout. Därför rekommenderar vi starkt att du testar och ser till att Started Checkout -händelser visas i Klaviyo efter att en e-postadress har angetts i fältet för insamling av e-postadress i kassan.

Observera också att fältet för e-postadress i kassan som riktas in av webbplatspreferensen Checkout Email Field Selector automatiskt kopplas för att identifiera användaren, utöver att utlösa händelsen Started Checkout (dvs. du behöver inte inkludera CSS-selektorn för fältet för e-postadress i kassan i både webbplatspreferenserna Klaviyo Email Field Selectors och Checkout Email Field Selector).

Lägg till konfigurationskodavsnitt

Den sista delen av cartridge-konfigurationen är att lägga till kodsnuttarna i dina webbplatsmallfiler för att göra det möjligt för cartridgen att kommunicera med webbplatsen. De här stegen skiljer sig mycket mellan infrastrukturerna Site Genesis (SG) och Storefront Reference Architecture (SFRA), så se till att följa rätt instruktioner för din konfiguration.

Konfiguration av Storefront Reference Architecture (SFRA)-kodsnutt

Lägg till följande kod längst ned i din pageFooter.isml-fil:

<isinclude template="klaviyo/klaviyoFooter"/>

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

Konfiguration av Site Genesis (SG)-snippeten

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

<isinclude template="klaviyo/klaviyoFooter"/>

1. Så här lägger du till snippets för användaridentifiering på serversidan: Lägg till följande snippet i dina Konto-Show- och Cart-Show-kontroller var som helst före anropet för att rendera respektive mall (dvs. app.getView(...)).
   

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

1. Sedan uppdaterar du app.getView(...) anropet så att det inkluderar klid som en pdict-variabel.
   • I din Konto-Show-kontroller:
     

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

• I din Cart-Show-kontroller:
  

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

1. För att lägga till kodavsnittet Added To Cart i Cart-AddProduct-kontrollern: Lägg till följande kodavsnitt i din Cart-AddProduct-kontroller var som helst före anropet för att rendera mallen (dvs. 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"
    id="siteGenServiceCallData" value="${serviceCallData}"/>`;
    response.writer.print(siteGenKlDebutData);
    response.writer.print(siteGenServiceCallData);
    }
    }
    }
    }
    /* END Klaviyo Added to Cart event tracking */

1. Started Checkout -snippets: När du lägger till Klaviyo-snippets i checkout controllers för att spåra Started Checkout -händelser är det viktigt att tänka på följande:
   • Målet med att lägga till dessa kodsnuttar är att kontrollera om en e-postadress har kopplats till Basket-objektet i checkout-flödet och när den har kopplats ska händelsen Started Checkout utlösas. Det är viktigt att fånga kopplingen mellan en e-postadress och Basket så tidigt som möjligt i checkout-flödet.
   • På grund av webbplatsbaserad anpassning av kassan är det inte möjligt för Klaviyo att exakt definiera vilken controller som först tar emot ett Basket-objekt med en e-postadress kopplad till det.
   • Vi rekommenderar att du lägger till kodsnippen i alla större rutter som triggas i kassan. Om du kan använda felsökaren för att identifiera exakt när e-postadressen kopplas till kundkorgen i ditt kassaflöde kan du lägga till snippen bara i den rutten, men testa noggrant för att säkerställa att alla möjliga kassavägar (gäst, inloggad, loggar in i kassan osv.) triggar koden.
2. Kodsnutten för den första rutten som träffas i kassan (vanligtvis COCustomer-Start) följer. Infoga den var som helst innan anropet för att rendera mallen (dvs. app.getView(...)). Observera den viktigaste skillnaden i det här kodavsnittet – att du skickar det första argumentet till metoden KLCheckoutHelpers.startedCheckoutHelper som true i stället för false – jämfört med de andra kodavsnitten för checkout (markerade nedan). Observera att i kodavsnittet nedan är KLCheckoutHelpers.startedCheckoutHelper -metoden true i stället för false (som i de andra kodavsnitten för checkout). Det här är avgörande för att koden ska veta att vi har en ny Started Checkout -händelse att spåra.

/* Klaviyo Started Checkout event tracking */
   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 */

1. Uppdatera sedan anropet app.getView(...) så att det inkluderar klid som en pdict-variabel:

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

1. Följande kodsnuttar ska läggas till i den första routen som körs efter att en e-postadress har kopplats till Basket-objektet. Om du är osäker, eller bara vill ha en extra säkerhetsmarginal, rekommenderar vi att du lägger till den här kodsnutten i alla följande routes:Precis som med kodsnuttarna ovan kan du lägga till den här kodsnutten var som helst före anropet för att rendera mallen, eller före anrop till efterföljande controllers (exempel från COBilling-Save: app.getController(‘COSummary’).Start()).
   • COShipping-start
   • COBilling-PublicStart
   • COBilling-Save
   • COPlaceOrder-Start

/* Klaviyo Started Checkout event tracking */
  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 */

1. För rutter som anropar mallar direkt (t.ex. COShipping-Start) uppdaterar du anropet app.getView(...) så att det inkluderar klid som en pdict-variabel. Här är ett exempel för rutten 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');

1. För att lägga till Order Confirmation -snippeten i styrenheten COSummary-ShowConfirmation: Lägg till följande snippet i din COSummary-ShowConfirmation-styrenhet var som helst före anropet för att rendera mallen.

/* 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) {
// check to see if the status is new or created
  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 only accepts phone numbers that include + and the country code
  at the start (ex for US: +16465551212)
  // in order to successfully get users subscribed to SMS list you must collect
  the country code in your order phone number field!
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 Subscription requested by user, but an invalid phone number
  was provided. Phone number: ${phone}`);
}
phone = null;
}
}
if (email || phone) {
klaviyoUtils.subscribeUser(email, phone);
}
}
}
}
/* END Klaviyo Order Confirmation event tracking */

Du har nu slutfört konfigurationen av kodsnutten för din Site Genesis-butik.

Lägg till kodavsnitt för samtyckeskryssruta i kassan (SG och SFRA)

För att samla in samtycke i kassan för e-post och sms behöver du inkludera kodsnippet för att samtyckeskryssrutorna ska visas där du vill, utöver att konfigurera inställningarna för List ID som nämns i avsnittet Lägg till tjänster ovan.

För att dessa kodsnuttar till exempel ska visas i kassan kan de placeras i mallen shipmentCard.isml (app_storefront_base) i SFRA eller i mallen billing.isml (app_storefront_core) i SiteGen.

Nedan finns ISML-kodsnuttar för både Site Genesis och SFRA, och de kan placeras var som helst i kassaflödet som passar bäst för just din webbplats. Observera att för att samtycke i kassan ska fungera korrekt i Site Genesis måste du ha inkluderat kodsnutten Order Confirmation som nämns i avsnittet Lägg till konfigurationskodsnuttar ovan.

Kodsnuttarna nedan utgår från att ditt språk för prenumeration för e-post och sms finns i en properties-resurspaketpaket med namnet ”checkout”. Du måste ersätta `your.email.prenumerera.resource.string.here` och `your.sms.subscribe.resource.string.here` med nycklarna som motsvarar din prenumerationsfras för e-post respektive sms. Det här språket visas bredvid kryssrutan.

Din opt-in-text kan till exempel se ut så här:

• E-post
  Prenumerera på uppdateringar via e-post
• SMS
  Prenumerera på sms-uppdateringar. Genom att kryssa i denna ruta och ange ditt telefonnummer ovan samtycker du till att ta emot marknadsföringsmeddelanden (t.ex. [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å länken för att avsluta prenumerationen (om sådan finns) i något av våra meddelanden. Se vår sekretesspolicy [link] och våra tjänstevillkor [link].

 <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)}

Aktivera OCAPI-integrationen i Klaviyo

Slutpunkter

För att integrera med SFCC för produktkatalogen och historiska/löpande orderdata använder Klaviyo fyra OCAPI-slutpunkter:

• /order_search
  Synkroniserar historiska orderdata till Klaviyo och 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 förbättrad personalisering som inte är tillgänglig från händelsen Order Confirmation. För e-postmeddelanden med orderbekräftelse i realtid använder du händelsen Order Confirmation från kassan.
• /sites
  Gör att du kan välja vilken webbplats Klaviyo synkroniserar data från under konfigurationen av din integration.
• /product_search
  Ansluter din katalog till Klaviyo för att aktivera funktioner, inklusive produktrekommendationer i e-postmeddelanden.
• /products/*/variations
  Aktiverar synkronisering av variationer till Klaviyo för att aktivera funktioner som flöden för tillbaka i lager, låg lagernivå och prisfall.

SFCC-sidekonfiguration

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

Observera att även om Klaviyo-integrationen 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ägg till en API-klient för Klaviyo. API-klient-ID och lösenord krävs för att generera bearer-token för OCAPI.
2. När API-klienten har lagts till går du till Administration > Site Development > Open Commerce API Settings i SFCC Business Manager.
3. Lägg till följande kodsnuttar och ersätt API-versionen och klient-ID:t. Vi har stöd för API-version 19.5 och senare samt 18.8. Ersätt CLIENT_ID med API-klient-ID:t som genererades i föregående steg när du konfigurerade API-klienten (det ska se ut ungefär som "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"). Om inställningarna redan finns för dessa API:er kan du kanske bara behöva lägga till de markerade avsnitten nedan i den befintliga JSON-matrisen för klienter.
   1. Lägg till följande JSON under typen Shop och kontexten Global (organization-wide), ersätt SHOP_API_VERSION med din OCAPI Shop API-version och klicka sedan på Spara.
      När det har lagts till bör inställningarna se ut ungefär så här:
      

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

1. Lägg till följande JSON under typen Data och kontexten Global (organization-wide), ersätt DATA_API_VERSION med din OCAPI Data API-version och klicka sedan på Spara.
   När du har lagt till den ska inställningarna se ut ungefär så här:
   

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

Konfiguration på Klaviyo-sidan

1. I Klaviyo väljer du integrationer > Lägg till integrationer.
2. Sök efter Salesforce Commerce Cloud och klicka på kortet, klicka sedan på Installera.
3. Klicka på Anslut till Salesforce Commerce Cloud på målsidan.
4. På nästa sida fyller du i följande information:
   • Butiks-URL
     Din webbplats domän (t.ex. example.com eller dev03-na01-example.demandware.net).
   • Autentiseringstoken
     Skapa en autentiseringstoken för den här integrationen som kommer att användas för att begära en bearer-token. Autentiseringstoken genereras genom bas-64-kodning av klient-ID och lösenord som kopplas ihop med ett kolon (t.ex. xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx:password).
   • Data API Version
     Den version av din Data API som du lade till åtkomst till i steget SFCC-side Setup (t.ex. v19_10).
   • Shop API Version
     Den version av Shop API som du lade till åtkomst till i steget SFCC-side Setup (t.ex. v19_10).
   • Katalog-ID
     ID:t för den SFCC-katalog som ska synkroniseras med Klaviyo (t.ex. storefront-catalog-en). Du hittar ditt katalog-ID i Salesforce Business Manager under Merchant Tools > Products and Catalogs > Catalogs.
     

5. När du har angett dessa inloggningsuppgifter 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/de webbplats(er) som du vill integrera med det här kontot och klickar på Slutför konfigurationen. Din integration bör nu börja synkronisera dina beställnings-, katalog- och kunddata.

Testa din SFCC-integration

För att testa din cartridge-konfiguration går du till din webbplats och följer de här instruktionerna:

1. Lägg till URL-parametern utm_email med din e-postadress i adressfältet för att "kaka" dig själv. 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 varukorg.
6. Lägg en testorder.
7. Navigera till Analys > Mättal i Klaviyo och leta sedan efter mättal som kommer från Salesforce Commerce Cloud.

Testa fältväljare för Klaviyo Email

Så här testar du att ett visst e-postfält har riktats korrekt och identifierar användaren korrekt för Klaviyo:

1. Öppna ett inkognitofönster i webbläsaren.
2. I Developer Console anger du följande kommando och trycker på Enter:
   klaviyo.isIdentified();
   Detta bör resultera i följande utdata:
   Promise {<fulfilled>: false}
3. Skriv en e-postadress i det aktuella fältet och tryck på Tab-tangenten för att flytta fokus till ett annat element på sidan.
4. Gå tillbaka till Developer Console och ange klaviyo.isIdentified(); igen. Det här bör resultera i följande utdata:
   Promise {<fulfilled>: true}
5. Du kan dubbelkolla att Klaviyo faktiskt tar emot Identify-anrop genom att gå till Analytics > mättal i Klaviyo och hitta aktivitetsflödet för Aktiv på webbplatsen -händelser, där du ska se e-postadressen/-adresserna som du har angett listade.

Testa väljaren för e-postfältet i kassan

Så här testar du att e-postinsamlingsfältet i kassan lyckas utlösa händelsen Started Checkout :

1. Lägg till en eller flera produkter i varukorgen och starta sedan kassan.
2. I kassan skriver du in en e-postadress i det avsedda fältet och trycker på tabbtangenten för att flytta fokus till ett annat element på sidan.
3. Du kan dubbelkolla att Klaviyo faktiskt tar emot Identify-anrop genom att gå till Analys > mättal i Klaviyo och hitta aktivitetsflödet för Påbörjad kassa -händelser, där du ska se att din senaste händelse spårades.

Utfall

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

Ytterligare resurser