Pierwsze kroki z Salesforce Commerce Cloud

Czego się dowiesz

Dowiedz się, jak zintegrować Salesforce Commerce Cloud z Klaviyo. Integracje Klaviyo cartridge i API umożliwiają stronom internetowym korzystającym z Salesforce Commerce Cloud (dawniej Demandware) szybkie łączenie się i wysyłanie zarówno danych w czasie rzeczywistym, jak i danych historycznych do Klaviyo. Gdy zintegrujesz Klaviyo z Salesforce Commerce Cloud (SFCC), Klaviyo zacznie śledzić działania podejmowane przez użytkowników w czasie rzeczywistym, takie jak nawigacja po witrynie, śledzenie wyszukiwania, przeglądanie produktów, przeglądanie kategorii, dodawanie produktów do koszyka, dokonywanie płatności i składanie zamówień.

Istnieją 3 główne kroki integracji SFCC z Klaviyo:

1. Instalowanie kartridża Klaviyo w SFCC.
2. Dodawanie fragmentów włączania do SFCC.
3. Włączenie integracji SFCC OCAPI w Klaviyo.

Zanim zaczniesz

Klaviyo integruje się zarówno z witrynami opartymi na SFCC Controller Site Genesis (SG), jak i Storefront Reference Architecture (SFRA). Każdy framework wymaga nieco innej konfiguracji kartridża i snippetów, opisanych poniżej.

Aby korzystać z naszego kartridża w wersji 23.7.0 (lub dowolnej wyższej wersji), zalecamy aktualizację trybu zgodności SFCC do wersji 21.7 lub wyższej.

Jeśli chcesz najpierw zintegrować swoje środowisko programistyczne, możesz utworzyć połączone konto Klaviyo przy użyciu metody opisanej w tym artykule i połączyć swoje środowisko programistyczne z tym kontem. Zalecamy dodanie słowa "Dev" lub "Staging" w nazwie firmy, której używasz podczas zakładania konta, aby lepiej rozróżnić konto podczas logowania się. 

Skonfiguruj kartridże Klaviyo

Pobierz wkłady

Możesz znaleźć naszą listę aplikacji na Salesforce AppExchange. Na AppExchange możesz dowiedzieć się więcej o Klaviyo i kliknąć Pobierz teraz, aby przejść do Github, gdzie nasze wkłady są dostępne w pliku zip do pobrania. Jeśli masz witrynę SFRA, pobierz plik zip KlaviyoSFRA, a jeśli masz witrynę Site Genesis, pobierz plik zip KlaviyoSG. 

Będziesz musiał skonfigurować 2 kartridże, które znajdują się w pobranym pliku zip. Wkłady te obejmują:

• int_klaviyo lub int_klaviyo_sfra: Wkład specyficzny dla witryny; int_klaviyo jest przeznaczony dla witryn opartych na Site Genesis, a int_klaviyo_sfra jest przeznaczony dla witryn opartych na SFRA.
• int_klaviyo_core: dla obu typów infrastruktury, zawierająca podstawowe, pokrywające się funkcje.

importuj importuj wkłady

Pierwszym krokiem jest zaimportowanie wkładów w Visual Studio Code lub Eclipse, aby były dostępne do połączenia z Twoją instancją SFCC.

W kodzie VS

1. Skopiuj i wklej wkład int_klaviyo_core.
2. Skopiuj foldery int_klaviyo (Site Genesis) lub int_klaviyo_sfra (SFRA) do bazy kodu jako rodzeństwo innych folderów kartridża.

W Eclipse

1. Przejdź do Administracja > importuj importuj > Ogólne > Istniejące projekty do obszaru roboczego.
2. importuj zaimportuj katalog int_klaviyo_core za pomocą kreatora importu .
3. Wybierz instancję SFCC, z którą chcesz połączyć kartridż.
4. Wybierz opcję Właściwości.
5. Wybierz pozycję Referencje projektu.
6. Sprawdź wkład int_klaviyo_core.
7. Powtórz kroki od 2 do 6 dla drugiego wkładu specyficznego dla twojego frameworka (int_klaviyo lub int_klaviyo_sfra).

Dodaj wkłady do ścieżki wkładu

Po zaimportowaniu wkładów należy je dodać do listy wkładów używanych w Twojej witrynie za pomocą narzędzia SFCC Business zarządca.

1. Przejdź do strony Administracja > Witryny > Zarządzaj witrynami.
2. Wybierz swoją witrynę.
3. Wybierz kartę Ustawienia.
4. Na początku wejścia ścieżki kartridża oznaczonego Cartridges dodaj nazwy zaimportowanych kartridży Klaviyo z kartridżem podstawowym na końcu (int_klaviyo:int_klaviyo_core lub int_klaviyo_sfra:int_klaviyo_core).
5. Kliknij przycisk Zastosuj.

Po kliknięciu przycisku Zastosuj powinieneś zobaczyć 2 kartridże na początku pola oznaczonego jako Efektywna ścieżka kartridża.

Dodaj usługi

Po zaimportowaniu wkładów i dodaniu ich do ścieżki wkładów w witrynie należy dodać usługę Klaviyo, aby włączyć konfigurację ustawień dla wkładu. W katalogu głównym pliku zip z kartridżami Klaviyo znajduje się inny plik zip o nazwie metadata.zip. Poniższe instrukcje będą odnosić się do tego pliku zip.

1. Przejdź do Administracja > Rozwój witryny > Importowanie witryny Importuj & Eksportuj > Usługi.
2. Prześlij, a następnie zaimportuj zaimportuj plik metadata.zip.
   
3. Gdy zostaniesz poproszony o potwierdzenie, czy chcesz zaimportować zaimportować wybrane archiwizować, wybierz OK.
4. Powinieneś teraz zobaczyć importowanie uruchomione w sekcji Status u dołu strony.
   
5. Będziesz mieć teraz dostęp do strony preferencji pod adresem Narzędzia sprzedawcy > Preferencje witryny > Preferencje niestandardowe > Klaviyo .
   
   W tym miejscu możesz zarządzać następującymi ustawieniami:
   • Klaviyo włączać
     Musi być ustawiona na "Tak", aby włączyć kasetę.
   • Klucz prywatny Klaviyo
     Prywatny klucz API Klaviyo. Upewnij się, że prywatny klucz Klaviyo API , którego używasz do tej integracji, ma pełny dostęp. 
   • Klaviyo konto
     Twój Klaviyo klucz publiczny API, lub Site ID.
   • Oznaczwydarzenia jako SFCC
     Jeśli zdecydujesz się oznaczyć wydarzenia jako SFCC, będziesz mieć dostęp do wbudowanej, wstępnie zbudowanej sekwencji w Klaviyo za pomocą danych SFCC. Obecną wadą etykietowania zdarzeń jest to, że jeśli zdecydujesz się je oznaczyć, nie będziesz mieć dostępu do rekomendacji Wyświetlony produkt lub Dodano do koszyka w kanale produktowym Klaviyo. 
     
     • Jeśli wcześniej zainstalowałeś wersję kartridża starszą niż 23.7.0, a teraz aktualizujesz do wersji 23.7.0 lub nowszej, ustaw na Nie. Integracje utworzone przed 13 lipca 2023 r. (tj. wersje kartridża wcześniejsze niż 23.7.0) generują metryki, które nie są oznaczone jako SFCC. Jeśli w przeszłości korzystałeś z wersji wcześniejszej niż 23.7.0, to ustawienie konta uwzględnia stare konwencje nazewnictwa, aby zapobiec nieciągłości metryki danych na koncie. 
   • Wyślij zdarzenie dodania do koszyka jako "Dodaj do koszyka"
     Jeśli wcześniej zainstalowałeś wersję kartridża starszą niż 23.7.0, a teraz aktualizujesz do wersji 23.7.0 lub nowszej, ustaw na Tak. W przeciwnym razie ustaw wartość Nie. To ustawienie zapobiega nieciągłości metryki danych na Twoim koncie. 
   • Klaviyo Email Selektory pól i strona płatnościkasae-mail Selektor pola
     Zapoznaj się z poniższą sekcją, aby uzyskać szczegółowe informacje na temat konfigurowania tych 2 pól.
   • Typ obrazu
     Typ obrazu produktu, który chcesz wykorzystać w danych zdarzenia wysyłanych na adres Klaviyo. Jeśli nie masz pewności, jaki typ obrazu ustawić, przejdź do narzędzi dla sprzedawców > Produkty i katalogi > Produkty, kliknij produkt i określ typ widoku, którego chcesz użyć, w oparciu o to, co jest dostępne (np. duży, średni, mały, hi-res).
   • Marketingowa lista e-mailowa ID
     Możesz zbierać subskrybentów poczty e-mail na stronie płatności kasa i synchronizować je z listą Klaviyo. To ustawienie to identyfikator listy w Klaviyo, do której chcesz dodać podskrybenta wiadomości e-mail. Dowiedz się, jak znaleźć identyfikator listy w Klaviyo. Aby zbierać wiadomości e-mail pod adresem strona płatności kasa, musisz również dodać fragment pola wyboru, który zostanie opisany w dalszej części.
   • Marketing SMS lista ID
     Możesz zbierać subskrybentów SMS na stronie płatności kasa i synchronizować je z listą Klaviyo. To ustawienie to ID Klaviyo listy, do której chcesz dodać SMS subskrybenta. Dowiedz się, jak znaleźć identyfikator listy w Klaviyo. Jeśli gromadzisz zarówno subskrybentów SMS, jak i e-mail, wybierz inną listę dla SMS niż dla e-mail. Dzięki temu masz pewność, że zgoda będzie zawsze prawidłowo przypisana do właściwego kanału. Aby zebrać SMS subskrybent na stronie płatności kasa, będziesz potrzebować kilku innych warunków wstępnych, wraz z fragmentem pola wyboru, które opisano w dalszej części.
     
6. Plik metadata.zip utworzy również nową usługę w SFCC. Przechodząc do Administracja > Operacje > Usługi, powinieneś teraz zobaczyć 2 nowe wpisy w zakładce Usługi o nazwach KlaviyoEventService i KlaviyoSubscribeProfilesService, każdy z odpowiednimi wpisami profilu i poświadczeń.

Konfiguracja selektorów pól Klaviyo Email i strony płatności kasa e-mail Selektor pola 

Preferencje te są integralną częścią Klaviyo skutecznie identyfikując i śledząc odwiedzających witrynę. Jeśli odwiedzający nie zostanie zidentyfikowany przez Klaviyo, żadne zdarzenia nie będą dla niego śledzone. Po zakończeniu integracji możesz dowiedzieć się, jak przetestować konfigurację Klaviyo Email i stronę płatności kasa e-mail w sekcji Testuj konfigurację SFCC poniżej. 

Klaviyo Email Selektory pól

Preferencja strony Klaviyo Email Field Selectors jest używana do kierowania na wszystkie pola wejściowe adresu e-mail i numeru telefonu na stronie (z wyjątkiem pola wejściowego adresu e-mail znajdującego się na stronie płatności kasa, które omówiono poniżej). Identyfikujemy te pola za pomocą standardowych selektorów CSS, a każde z nich jest dodawane indywidualnie do preferencji witryny (która jest "zestawem ciągów", umożliwiającym wprowadzanie wielu wartości ciągów jeden po drugim). Można użyć dowolnego złożonego selektora, który może być użyty w standardowym arkuszu stylów do kierowania na konkretną stronę element, np. #dwfrm_login div.username input.input-text jest akceptowalny, podobnie jak selektory, które mogą kierować na wiele elementów w całej witrynie na podstawie wspólnych atrybutów, np. input[type=e-mail]. Pamiętaj, aby unikać kierowania danych wejściowych za pomocą dynamicznie generowanych identyfikatorów - co jest bardzo częstym przypadkiem w SiteGen - ponieważ te identyfikatory będą się zmieniać w zależności od obciążenia strony, a tym samym zawiodą (np. #dwfrm_login_username_d0fignzngiyq).

Pamiętaj, że pola dodane do DOM po załadowaniu strony nadal mogą być celem. Przykładem może być pole adresu e-mail, które jest wstawiane do modalu po wywołaniu AJAX lub takie, które jest wstrzykiwane do DOM przez skrypty JavaScript innych firm.

Należy również pamiętać, że same pola numeru telefonu mogą nie w pełni identyfikować użytkownika na Klaviyo, w zależności od ustawień SMS na koncie Klaviyo (jeśli SMS jest włączone i masz numer do wysyłki powiązany z krajem wprowadzonego numeru telefonu, przeglądarka zostanie zidentyfikowana). W związku z tym dodanie selektorów CSS do docelowych pól numerów telefonów można uznać za "miło mieć" lub "w razie potrzeby", podczas gdy dodanie ich do pól e-mail powinno być uważane za niezbędne.

strona płatności kasa e-mail Field Selector

Pole zbierania wiadomości e-mail na stronie płatności kasa jest szczególnym przypadkiem i jako takie ma własne preferencje dotyczące kierowania. Zasada działania jest dokładnie taka sama, jak w przypadku preferencji strony Klaviyo Email Selektory pól: po prostu wprowadź pojedynczy selektor CSS, który jest skierowany na pole adresu e-mail na stronie płatności kasa sekwencja, niezależnie od tego, czy pojawia się na początku, na końcu, czy w środku strony płatności kasa.

Pomyślne skonfigurowanie tej preferencji witryny do kierowania na pole zbierania wiadomości e-mail na stronie płatności kasa jest niezbędne do prawidłowego śledzenia zdarzenia Rozpoczęta strona płatności kasa, dlatego zdecydowanie zaleca się przetestowanie, aby upewnić się, że zdarzenia Rozpoczęta strona płatności kasa pojawiają się w Klaviyo po wprowadzeniu adresu e-mail do pola zbierania wiadomości e-mail na stronie płatności kasa. 

Zwróć również uwagę, że pole e-mail strony płatności kasa, na które ukierunkowana jest preferencja selektora pola e-mail strony płatności kasa, zostanie automatycznie połączone w celu identyfikacji użytkownika, oprócz wyzwalania zdarzenia Rozpoczęta strona płatności kasa (tj, nie ma potrzeby dołączania selektora CSS dla pola e-mail strony płatności kasa zarówno w selektorze pola Klaviyo Email, jak i selektorze pola e-mail strony płatności kasa).

Dodaj fragmenty konfiguracji

Ostatnią częścią konfiguracji kartridża jest dodanie snippetów do plików szablonu twojej witryny, aby włączyć kartridż do komunikacji z witryną. Kroki te różnią się znacznie w przypadku infrastruktury Site Genesis (SG) i Storefront Reference Architecture (SFRA), więc upewnij się, że postępujesz zgodnie z odpowiednimi instrukcjami dla swojej konfiguracji.

Konfiguracja fragmentu architektury referencyjnej Storefront (SFRA)

Dodaj następujący kod na dole pliku pageFooter.isml:

<isinclude template="klaviyo/klaviyoFooter"/>

Ukończyłeś konfigurację snippetu dla swojego sklepu SFRA. 

Konfiguracja snippetów Site Genesis (SG)

1. Aby dodać KlaviyoFooter.isml do globalnej stopki: Dodaj następujący kod do dolnej części pliku footer.isml (lub dowolnego podobnego szablonu, który jest ładowany w pobliżu dolnej części każdej strony).
   

   <isinclude template="klaviyo/klaviyoFooter"/>

2. Aby dodać fragmenty do identyfikacji użytkownika po stronie serwera: Dodaj następujący fragment kodu do kontrolerów Konto-Show i Cart-Show w dowolnym miejscu przed wywołaniem renderowania odpowiedniego szablonu (tj. app.getView(...)).
   

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

3. Następnie zaktualizujesz wywołanie app.getView(...), aby dołączyć klid jako zmienną pdict.
   •  W kontrolerze Pokaż konto:
     

     app.getView({downloadAvailable: true, klid: klid}).render('konto/accountoverview');
     // Klaviyo: dodano "klid: klid

   • W kontrolerze Cart-Show:
     

     app.getView('Cart', {cart: app.getModel('Cart').get(),RegistrationStatus: false,klid: klid // KLAVIYO: added 'klid: klid'}).render('strona płatności
     kasa/cart/cart');
             

4. Aby dodać szablon dodawania do koszyka do kontrolera Cart-AddProduct: Dodaj poniższy fragment kodu do kontrolera Cart-AddProduct w dowolnym miejscu przed wywołaniem renderowania szablonu (tj. app.getView(...)).
   

    /* Klaviyo Zdarzenie dodania do koszyka śledzenie */
    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 Zdarzenie dodania do koszyka śledzenie */

5. Uruchomiono stronę płatności kasa snippets: Podczas dodawania fragmentów Klaviyo do kontrolerów strony płatności kasa w celu śledzenia zdarzeń Started strona płatności kasa, ważne jest, aby pamiętać o następujących kwestiach:
   • Celem dodania tych fragmentów jest sprawdzenie, czy adres e-mail został dołączony do obiektu Basket w ramach sekwencji strona płatności kasa, a gdy zostanie dołączony, wywołanie zdarzenia Rozpoczęta strona płatności kasa. Ważne jest, aby jak najwcześniej wychwycić powiązanie adresu e-mail z Basketem na stronie płatności kasa sekwencja.
   • Ze względu na dostosowanie strony płatności kasa, nie jest możliwe, aby Klaviyo dokładnie zdefiniował, który kontroler jako pierwszy otrzyma obiekt Basket z dołączonym do niego adresem e-mail.
   • Zalecamy dodanie wycinka kodu źródłowego do wszystkich głównych tras, które są uruchamiane w ramach strony płatności kasa. Jeśli jesteś w stanie użyć debuggera, aby dokładnie zidentyfikować, kiedy adres e-mail zostanie dołączony do koszyka w twojej strona płatności kasa sekwencji, możesz dodać fragmenty tylko do tej trasy, ale dokładnie przetestuj, aby upewnić się, że wszystkie możliwe strona płatności kasa ścieżki (gość, logowanie się, logowanie w strona płatności kasa itp.) uruchamiają kod.
6. Poniżej znajduje się fragment kodu dla pierwszego trafienia trasy na stronie płatności kasa (zazwyczaj COCustomer-Start). Wstaw go w dowolnym miejscu przed wywołaniem renderowania szablonu (tj. app.getView(...)). Zwróć uwagę na kluczową różnicę w tym fragmencie - przekazanie pierwszego argumentu metody KLCheckoutHelpers.startedCheckoutHelper jako true zamiast false - w porównaniu do innych fragmentów strony płatności kasa (wyróżnionych poniżej). Zwróć uwagę, że w poniższym fragmencie, KLCheckoutHelpers.startedCheckoutHelper ma wartość true zamiast false (jak w innych fragmentach strony płatności kasa. Jest to niezbędne, aby poinformować kod, że mamy nowe zdarzenie Started strona płatności kasa do śledzenia.

   /* Klaviyo Uruchomiona strona płatności
   kasa event śledzenie */
    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 Uruchomiona strona płatności
   kasa event śledzenie */
   

7. Następnie zaktualizuj wywołanie app.getView(...), aby dołączyć klid jako zmienną pdict:

   app.getView({
     ContinueURL: URLUtils.https('COCustomer-LoginForm').append('scope', 'checkout'),
   klid: KLTplVars.klid, // KLAVIYO: added 'klid: klid'
   }).render('strona płatności
   kasa/checkoutlogin');

8. Poniższe fragmenty powinny zostać dodane do pierwszej trasy uruchamianej po dołączeniu adresu e-mail do obiektu Basket. Jeśli nie masz pewności lub po prostu chcesz zabezpieczyć swoje bazy, zalecamy dodanie tego fragmentu do wszystkich poniższych tras:
   • COShipping-Start
   • COBilling-PublicStart
   • COBilling-Save
   • COPlaceOrder-Start
   Podobnie jak w przypadku powyższych fragmentów, dodaj ten fragment w dowolnym miejscu przed wywołaniem renderowania szablonu lub przed wywołaniami kolejnych kontrolerów (przykład z COBilling-Save: app.getController('COSummary').Start()). 

   /* Klaviyo Uruchomiona strona płatności
   kasa event śledzenie */
    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 Uruchomiona strona płatności
   kasa event śledzenie */

9. W przypadku tras, które wywołują szablon bezpośrednio (np. COShipping-Start), zaktualizuj wywołanie app.getView(...), aby uwzględnić klid jako zmienną pdict. Oto przykład trasy COShipping-Start:

   app.getView({
   ContinueURL: URLUtils.https('COShipping-SingleShipping'),
   Basket: cart.object,
   HomeDeliveries: homeDeliveries,
   klid: KLTplVars.klid, // KLAVIYO: added 'klid: klid'
   }).render('strona płatności
   kasa/shipping/singleshipping');

10. Aby dodać szablon potwierdzenia zamówienia do kontrolera COSummary-ShowConfirmation: Dodaj następujący fragment kodu do kontrolera COSummary-ShowConfirmation w dowolnym miejscu przed wywołaniem renderowania szablonu.

    /* Klaviyo Zdarzenie potwierdzenia zamówienia śledzenie */
     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) {
    // sprawdź, czy status jest nowy lub utworzony
     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 e-mail = order.customerEmail;
    var phone = order.defaultShipment.shippingAddress.phone;
    var e164PhoneRegex = new RegExp(/^\+[1-9]\d{1,14}$/);
    if (phone) {
     // UWAGA: Klaviyo akceptuje tylko numery telefonów, które zawierają + i kod kraju
     na początku (np. dla USA: +16465551212)
     // aby skutecznie podskrybować użytkowników na SMS listę, musisz zebrać
     kod kraju w polu numeru telefonu zamówienia!
    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 Użytkownik zażądał subskrypcji, ale podano nieprawidłowy numer telefonu
    . Numer telefonu: ${phone}`);
    }
    phone = null;
    }
    }
    if (e-mail || phone) {
    klaviyoUtils.subscribeUser(email, phone);
    }
    }
    }
    }
    /* END Klaviyo Potwierdzenie zamówienia śledzenie */

Ukończyłeś teraz konfigurację snippetu dla swojego sklepu Site Genesis. 

Dodaj zgodę na stronie płatności kasa checkbox snippets (SG i SFRA)

Aby zbierać zgody na stronie płatności kasa za wysyłkę e-mail i SMS, musisz dołączyć wycinek kodu źródłowego, aby pola wyboru zgody pojawiały się tam, gdzie jest to pożądane, oprócz skonfigurowania ustawień identyfikatora listy wymienionych w sekcji Dodaj usługi powyżej.

Na przykład, aby te fragmenty pojawiły się na stronie płatności kasa, można je umieścić w szablonie shipmentCard.isml (app_storefront_base) w SFRA lub w szablonie rozliczenie.isml (app_storefront_core) w SiteGen. 

Poniżej znajdują się fragmenty ISML zarówno dla Site Genesis, jak i SFRA, które można umieścić w dowolnym miejscu na stronie płatności kasa sekwencja, która najlepiej pasuje do Twojej witryny. Pamiętaj, że aby zgoda na stronie płatności kasa działała poprawnie w Site Genesis, musisz dołączyć fragment potwierdzenia zamówienia, o którym mowa w sekcji Dodaj fragmenty konfiguracji powyżej.

Poniższe fragmenty zakładają, że twój język opt-in dla wysyłki e-mail i SMS jest zawarty w pakiecie zasobów właściwości o nazwie "strona płatności kasa". Będziesz musiał zastąpić `your.e-mail.subskrybować.resource.string.here` i `twoj.SMS.subskrybuj.zasób.string.tutaj` z kluczami odpowiadającymi odpowiednio Twojemu językowi wysyłki e-mail i SMS opt-in. Język ten pojawi się obok pola wyboru. 

Na przykład, twój język opt-in może wyglądać następująco:

• e-mail
  podskrybuj do e-mail aktualizacja
• SMS
  podskrybuj to SMS aktualizacja. Zaznaczając to pole i wpisując swój numer telefonu powyżej, wyrażasz zgodę na otrzymywanie wiadomości marketingowych (takich jak [kody promocyjne] i [przypomnienia o koszyku]) od [nazwa firmy] na podany numer, w tym wiadomości wysyłanych przez autodialer. Zgoda nie jest warunkiem jakiegokolwiek zakupu. Mogą obowiązywać stawki za wiadomości i dane. Częstotliwość wiadomości jest różna. Możesz wycofać subskrypcję w dowolnym momencie, odpowiadając STOP lub klikając łącze do wycofania subskrypcji (jeśli jest dostępne) w jednej z naszych wiadomości. Zobacz naszą politykę prywatności [link] i warunki świadczenia usług [link].

 <"""" ${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)}

włącz integracje OCAPI w Klaviyo

Punkty końcowe

W celu integracji z SFCC dla katalogu produktów i danych historycznych/bieżących zamówień, Klaviyo wykorzystuje cztery OCAPI punkt końcowy:

• /order_search
  Synchronizuje historyczne dane zamówień z Klaviyo, synchronizując bieżące zdarzenia zamówień co 60 minut. Zdarzenia Zamówiony produkt i Złożone zamówienie synchronizują dodatkowe dane do segmentacji i filtrowania sekwencji i są idealne do rozszerzonej personalizacji niedostępnej w zdarzeniu Potwierdzenie zamówienia. W przypadku wiadomości e-mail z potwierdzeniem zamówienia w czasie rzeczywistym użyj zdarzenia Order Confirmation z kartridża.
• /sites
  Umożliwia wybranie witryny Klaviyo, z której synchronizowane są dane podczas konfiguracji integracji.
• /product_search
  Połącz swój katalog z Klaviyo, aby włączyć funkcjonalność, w tym rekomendacje produktów w wiadomościach e-mail.
• /products/*/variations
  Umożliwia synchronizację wariantów z Klaviyo w celu włączenia takich funkcji, jak powrót do stanu magazynowego, niski stan zapasów i spadek cen. 

Konfiguracja po stronie SFCC

Zanim będziemy mogli komunikować się z OCAPI SFCC, niektóre uprawnienia i ustawienia muszą zostać skonfigurowane w SFCC.

Zwróć uwagę, że chociaż integracje Klaviyo wymagają uprawnień POST dla order_search i product_search, w rzeczywistości nie wysyłamy danych do SFCC; wynika to z konstrukcji OCAPI SFCC.

1. Przejdź do strony https://account.demandware.com/dw/account/APIAdmin i dodaj klienta API dla Klaviyo. Identyfikator klienta API i hasło będą wymagane do wygenerowania tokena na okaziciela dla OCAPI.
2. Po dodaniu klienta API przejdź do Administracja > Rozwój witryny > Open Commerce API Ustawienia w SFCC Business zarządca.
3. Dodaj następujące fragmenty, zastępując wersję API i identyfikator klienta. Pomagamy API w wersjach 19.5 i nowszych, a także 18.8. Zastąp CLIENT_ID identyfikatorem klienta API wygenerowanym podczas konfiguracji klienta API w poprzednim kroku (powinno to wyglądać mniej więcej tak: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxx"). Jeśli ustawienia dla tych interfejsów API już istnieją, możesz potrzebować tylko dodać wyróżnione sekcje poniżej do istniejącej tablicy JSON klientów.
   1. Dodaj następujący JSON pod typem Shop i kontekstem Global (dla całej organizacji), zastępując SHOP_API_VERSION wersją OCAPI Shop API, a następnie kliknij Zapisz.
      

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

      Po dodaniu ustawienia powinny wyglądać podobnie do tego:
      
   2. Dodaj następujący JSON pod typem dane i kontekstem Global (dla całej organizacji), zastępując DATA_API_VERSION swoim OCAPI dane API wersja, a następnie kliknij Zapisz.
      

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

      Po dodaniu ustawienia powinny wyglądać podobnie do tego:
      

Konfiguracja po stronie Klaviyo

1. Na stronie Klaviyo wybierz integracje > Dodaj integracje.
2. Wyszukaj Salesforce Commerce Cloud i kliknij kartę, a następnie kliknij przycisk Zainstaluj.
3. Kliknij Połącz z Salesforce Commerce Cloud na stronie docelowej. 
4. Na następnej stronie wypełnij następujące informacje: 
   • sklep URL
     Domena Twojej strony internetowej (np. example.com lub dev03-na01-example.demandware.net).
   • token uwierzytelniający
     Utwórz to ken uwierzytelniający dla tej integracji, który będzie używany dożądania tokena na okaziciela. Token uwierzytelniający jest generowany przez kodowanie base-64 identyfikatora klienta i hasła połączonych dwukropkiem (np. xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxx:hasło).
   • Dane API Version
     Wersja twojego dane API, dla której dodałeś dostęp w kroku konfiguracji po stronie SFCC (np. v19_10).
   • Wersja API sklepu
     Wersja interfejsu API sklepu, dla której dodano dostęp w kroku konfiguracji po stronie SFCC (np. v19_10).
   • ID katalogu
     Identyfikator katalogu SFCC do synchronizacji z Klaviyo (np. storefront-catalog-pl). Identyfikator katalogu można znaleźć w Salesforce Business Manager w zakładce Merchant Tools > Products and Catalogs > Catalogs. 
     
5. Po wprowadzeniu tych poświadczeń kliknij łącze Pobierz listę witryn, aby pobrać listę witryn w instancji SFCC.
6. Po pobraniu witryn wybierz witryny, które chcesz zintegrować z tym kontem i kliknij przycisk Zakończ konfigurację. Twoje integracje powinny teraz rozpocząć synchronizację zamówienia, katalogu i danych klienta.

Przetestuj swoje integracje SFCC

Aby przetestować konfigurację kartridża, przejdź do swojej witryny i postępuj zgodnie z poniższymi instrukcjami:

1. samemu, dodając parametr url utm_email jako swój adres e-mail do paska adresu. Na przykład: https://www.example.com/?utm_email=your@email.com.
2. Przeszukaj swój katalog.
3. Wyświetl stronę kategorii.
4. Wyświetl stronę produktu.
5. Dodaj produkt do koszyka.
6. Złóż zamówienie testowe.
7. Nawiguj dane analityczne > metryka w Klaviyo, a następnie poszukaj metryki pochodzącej z Salesforce Commerce Cloud.

Przetestuj selektory pól Klaviyo Email

Aby sprawdzić, czy dane pole e-mail zostało prawidłowo ukierunkowane i poprawnie identyfikuje użytkownika w Klaviyo:

1. Otwórz okno przeglądarki incognito.
2. W konsoli programisty wpisz następujące polecenie i naciśnij Enter:
   Klaviyo.isIdentified();
   Powinno to skutkować następującym wynikiem:
   Promise {<fulfilled>: false}
3. Wpisz adres e-mail w polu docelowym i kliknij klawisz tabulacji, aby zmienić fokus na dowolny inny element na stronie.
4. Wróć do konsoli programisty i wpisz Klaviyo.isIdentified(); ponownie. Powinno to skutkować następującym wynikiem:
   Promise {<fulfilled>: true}
5. Możesz dokładnie sprawdzić, czy Klaviyo rzeczywiście odbiera połączenia Identify, przechodząc do danych analitycznych > metryka w Klaviyo i znajdując kanał aktywności aktywni na Site events, gdzie powinieneś zobaczyć wprowadzone adresy e-mail.

Przetestuj stronę płatności kasa e-mail Field Selector

Aby sprawdzić, czy strona płatności kasa e-mail collection field pomyślnie wyzwala zdarzenie Started strona płatności kasa:

1. Dodaj jeden lub więcej produktów do koszyka, a następnie uruchom stronę płatności kasa.
2. Na stronie płatności kasa wpisz adres e-mail w polu docelowym i kliknij klawisz tabulacji, aby zmienić fokus na dowolny inny element na stronie.
3. Możesz dokładnie sprawdzić, czy Klaviyo rzeczywiście odbiera połączenia Identify, przechodząc do danych analitycznych > metryka w Klaviyo i znajdując kanał aktywności Rozpoczętych stron płatności kasa wydarzeń, gdzie powinieneś zobaczyć, że Twoje ostatnie wydarzenie było śledzone.

Rezultat

Zintegrowałeś już Salesforce Commerce Cloud z Klaviyo i przetestowałeś swoją integrację.

Dodatkowe źródła 

• Salesforce Commerce Cloud dane referencyjne
• Jak zaktualizować swój wkład Salesforce Commerce Cloud?
• Jak często integracje synchronizują odniesienie