Pierwsze kroki z Salesforce Commerce Cloud

Czego się dowiesz?

Dowiedz się, jak zintegrować Salesforce Commerce Cloud z Klaviyo. Integracja za pomocą cartridge'a Klaviyo i interfejsu API umożliwia witrynom korzystającym z Salesforce Commerce Cloud (dawniej Demandware) szybkie połączenie i wysyłanie do Klaviyo danych zarówno w czasie rzeczywistym, jak i historycznych. Gdy zintegrujesz Klaviyo z Salesforce Commerce Cloud (SFCC), Klaviyo zacznie śledzić w czasie rzeczywistym działania podejmowane przez osoby, takie jak nawigacja w witrynie, śledzenie wyszukiwania, wyświetlanie produktów, wyświetlanie kategorii, dodawanie produktów do koszyka, finalizacja zakupu i składanie zamówień.

Integracja SFCC z Klaviyo obejmuje 3 główne kroki:

1. Instalowanie cartridge Klaviyo w SFCC.
2. Dodawanie fragmentów kodu umożliwiających do SFCC.
3. Włączanie integracji SFCC OCAPI w Klaviyo.

Kilka słów na początek

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

Aby korzystać z naszej wtyczki w wersji 23.7.0 (lub dowolnej nowszej), zalecamy zaktualizowanie trybu zgodności SFCC do wersji 21.7 lub nowszej.

Jeśli chcesz zacząć od zintegrowania najpierw środowiska deweloperskiego, możesz utworzyć połączone konto Klaviyo, korzystając z metody opisanej w tym artykule, a następnie połączyć środowisko deweloperskie z tym kontem. Zalecamy uwzględnienie słowa "Dev" lub "Staging" w nazwie firmy używanej podczas zakładania konta, aby łatwiej odróżniać konta po zalogowaniu.

Zaleca się także dodanie adresów IP Klaviyo do białej listy dostawcy zapory sieciowej, aby zminimalizować problemy z uwierzytelnianiem i konfiguracją. Więcej informacji na ten temat znajdziesz w artykule na temat umieszczania adresów IP ruchu integracji Klaviyo na białej liście.

Skonfiguruj kartridże Klaviyo

Pobierz wkładki

Naszą aplikację znajdziesz na liście w Salesforce AppExchange. W AppExchange możesz dowiedzieć się więcej o Klaviyo i kliknąć Pobierz teraz, aby przejść do GitHub, gdzie nasze cartridge’e są dostępne do pobrania w pliku ZIP. Jeśli masz witrynę SFRA, pobierz plik ZIP KlaviyoSFRA, a jeśli masz witrynę Site Genesis, pobierz plik ZIP KlaviyoSG.

Musisz skonfigurować 2 cartridge’e, które znajdują się w pobranym pliku zip. Te cartridge’e obejmują:

• int_klaviyo lub int_klaviyo_sfra: kartridż specyficzny dla witryny; int_klaviyo jest przeznaczony dla witryn opartych na Site Genesis, a int_klaviyo_sfra — dla witryn opartych na SFRA.
• int_klaviyo_core: dla obu typów infrastruktur, zawierające podstawowe, nakładające się funkcje.

Zaimportuj cartridges

Pierwszym krokiem jest zaimportowanie cartridge’y w Visual Studio Code lub Eclipse, aby były dostępne do powiązania z instancją SFCC.

W VS Code

1. Skopiuj i wklej cartridge int_klaviyo_core.
2. Skopiuj do bazy kodu folder int_klaviyo (Site Genesis) lub int_klaviyo_sfra (SFRA) jako elementy równorzędne względem pozostałych folderów cartridge.

W Eclipse

1. Przejdź do Administracja > Import > Ogólne > Istniejące projekty do obszaru roboczego.
2. Zaimportuj katalog int_klaviyo_core za pomocą kreatora importu.
3. Wybierz instancję SFCC, z którą chcesz połączyć kartridż.
4. Wybierz Właściwości.
5. Wybierz Odwołania do projektów.
6. Sprawdź w kartridżu int_klaviyo_core.
7. Powtórz kroki od 2 do 6 dla drugiego cartridge’a specyficznego dla Twojego frameworka (int_klaviyo lub int_klaviyo_sfra).

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

Po zaimportowaniu cartridge’ów trzeba dodać je do listy cartridge’ów używanych przez witrynę w SFCC Business Manager.

1. Przejdź do Administracja > Witryny > Zarządzaj witrynami.
2. Wybierz swoją witrynę.
3. Wybierz kartę Ustawienia.
4. Na początku ścieżki cartridge w polu wejściowym o etykiecie Cartridges dodaj nazwy zaimportowanych cartridge Klaviyo, umieszczając cartridge core na końcu (int_klaviyo:int_klaviyo_core lub int_klaviyo_sfra:int_klaviyo_core).
5. Kliknij Zastosuj.

Po kliknięciu Zastosuj na początku pola oznaczonego Efektywna ścieżka kartridża powinny być teraz widoczne 2 kartridże.

Dodaj usługi

Po zaimportowaniu kartridży i dodaniu ich do ścieżki kartridży witryny należy dodać Klaviyo Service, aby włączyć konfigurację ustawień dla kartridża. W katalogu głównym pliku zip kartridży Klaviyo znajduje się inny plik zip o nazwie metadata.zip. Poniższe instrukcje będą odwoływać się do tego pliku zip.

1. Przejdź do Administracja > Site Development > Site Import & Export > Services.
2. Prześlij, a następnie zaimportuj plik metadata.zip.
   

3. Gdy pojawi się monit o potwierdzenie, czy chcesz zaimportować wybrane archiwum, wybierz OK.
4. W sekcji Status w dolnej części strony powinien być teraz widoczny uruchomiony import.
   

5. Od teraz masz dostęp do strony preferencji w Narzędzia sprzedawcy > Preferencje witryny > Preferencje niestandardowe > klaviyo.
   
   W tym miejscu można zarządzać następującymi ustawieniami:

• Włączono Klaviyo
  Aby włączyć cartridge, musisz ustawić wartość na "Tak".
• Prywatny klucz Klaviyo
  Prywatny klucz API Klaviyo. Upewnij się, że prywatny klucz API Klaviyo używany do tej integracji ma przyznany pełny dostęp.
• Konto Klaviyo
  Twój klucz API Klaviyo lub identyfikator witryny.
• Oznaczaj zdarzenia jako SFCC
  Jeśli zdecydujesz się oznaczać zdarzenia jako SFCC, uzyskasz dostęp do gotowych sekwencji w Klaviyo korzystających z danych SFCC. Obecnie wadą oznaczania zdarzeń jest to, że jeśli zdecydujesz się je oznaczać, nie będziesz mieć dostępu do rekomendacji Viewed Product ani Added to Cart w feedach produktowych Klaviyo.
  
  • Jeśli wcześniej zainstalowano wersję cartridge starszą niż 23.7.0, a teraz przeprowadzasz uaktualnienie do wersji 23.7.0 lub nowszej, ustaw na Nie. Integracje utworzone przed 13 lipca 2023 r. (tj. wersje cartridge sprzed 23.7.0) generują metryki, które nie są oznaczone jako SFCC. Jeśli w przeszłości używano wersji sprzed 23.7.0, to ustawienie uwzględnia dawne konwencje nazewnictwa, aby zapobiec przerwaniu ciągłości danych metryki na koncie.
• Wyślij zdarzenie Added To Cart jako „Add To Cart”
  Jeśli wcześniej zainstalowano wersję cartridge starszą niż 23.7.0, a teraz trwa uaktualnianie do wersji 23.7.0 lub nowszej, ustaw na Tak. W przeciwnym razie ustaw na Nie. To ustawienie zapobiega nieciągłości danych metryk na koncie.
• Selektory pól Klaviyo Email i selektor pola e-mail w realizacji zakupu
  Zapoznaj się z poniższą sekcją, aby uzyskać szczegółowe informacje o tym, jak skonfigurować te 2 pola.
• Typ obrazu
  Typ obrazu produktu, którego chcesz użyć w danych zdarzeń wysyłanych do Klaviyo. Jeśli nie wiesz, jaki typ obrazu ustawić, przejdź do Narzędzia sprzedawcy > Produkty i katalogi > Produkty, kliknij produkt i określ, którego typu widoku chcesz użyć na podstawie dostępnych opcji (np. duży, średni, mały, hi-res).
• ID listy e-mailowej do marketingu
  Możesz zbierać subskrybentów e-mail podczas realizacji zakupu i synchronizować ich z listą Klaviyo. To ustawienie to identyfikator listy w Klaviyo, do której chcesz dodać subskrybentów e-mail. Dowiedz się jak znaleźć identyfikator listy w Klaviyo. Aby zbierać subskrybentów e-mail podczas realizacji zakupu, musisz też dodać fragment kodu pola wyboru, który jest opisany w dalszej części.
• ID listy marketingowej SMS
  Możesz zbierać subskrybentów SMS podczas finalizacji zakupu i synchronizować ich z listą Klaviyo. To ustawienie jest identyfikatorem listy Klaviyo, do której chcesz dodać subskrybentów SMS. Dowiedz się, jak znaleźć ID listy w Klaviyo. Jeśli zbierasz subskrybentów SMS i e-mail, wybierz inną listę dla SMS niż dla e-maila. Dzięki temu zgoda będzie zawsze prawidłowo przypisywana do właściwego kanału. Aby zbierać subskrybentów SMS podczas finalizacji zakupu, potrzebujesz kilku innych wymagań wstępnych oraz fragmentu kodu pola wyboru, które opisano w późniejszej sekcji.
  

6. Plik metadata.zip utworzy również nową usługę w SFCC. Po przejściu do Administracja > Operacje > Usługi powinna być teraz widoczna w zakładce Usługi 2 nowa pozycje: KlaviyoEventService i KlaviyoSubscribeProfilesService, każda z odpowiednimi wpisami dotyczącymi profilu i danych logowania.

Konfigurowanie selektorów pól e-mail w Klaviyo oraz selektora pola e-mail w realizacji zakupu

Te preferencje są kluczowe, aby Klaviyo mogło skutecznie identyfikować odwiedzających witrynę i prowadzić ich śledzenie. Jeśli odwiedzający nie zostanie zidentyfikowany w Klaviyo, żadne zdarzenia nie będą śledzone dla tego odwiedzającego. Po zakończeniu integracji możesz dowiedzieć się, jak przetestować konfigurację selektora pola e-maila Klaviyo Email i pola e-maila w procesie realizacji zakupu w sekcji Test your SFCC setup poniżej.

Klaviyo Email Field Selectors

Preferencja witryny Klaviyo Email Field Selectors służy do targetowania wszystkich pól wejściowych e-maila i numeru telefonu w witrynie (z wyjątkiem pola wejściowego e-maila w procesie realizacji zakupu, o czym mowa poniżej). Identyfikujemy te pola za pomocą standardowych selektorów CSS, a każde z nich jest dodawane osobno do preferencji witryny (czyli „Zestawu ciągów”, co pozwala wprowadzać wiele wartości ciągów po kolei). Można użyć dowolnego złożonego selektora, którego można użyć w standardowym arkuszu stylów, aby wskazać konkretny element, np. #dwfrm_login div.username input.input-text jest akceptowalne, podobnie jak selektory, które mogą targetować wiele elementów w całej witrynie na podstawie współdzielonych atrybutów, np. input[type=email]. Unikaj wybierania pól wejściowych za pomocą dynamicznie generowanych identyfikatorów — to bardzo częsty przypadek w SiteGen — ponieważ te identyfikatory zmieniają się w zależności od wczytania strony, a przez to przestaną działać (np. #dwfrm_login_username_d0fignzngiyq).

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

Pamiętaj też, że same pola numeru telefonu mogą nie w pełni identyfikować użytkownika w Klaviyo — w zależności od ustawień SMS na Twoim koncie Klaviyo (jeśli SMS jest włączony 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 kierowania na pola numeru telefonu można uznać za „mile widziane” lub „w razie potrzeby”, natomiast dodanie ich dla pól e-mail należy uznać za niezbędne.

Selektor pola e-mail w procesie finalizacji zakupu

Pole zbierania adresu e-mail podczas realizacji zakupu jest przypadkiem szczególnym, dlatego ma własne ustawienie preferencji witryny dotyczące targetowania. Zasada działa dokładnie tak samo jak w przypadku preferencji witryny Klaviyo Email Field Selectors: wystarczy wprowadzić pojedynczy selektor CSS, który wskazuje pole adresu e-mail w sekwencji realizacji zakupu w Twojej witrynie — niezależnie od tego, czy pojawia się na początku, na końcu czy w środku realizacji zakupu.

Prawidłowe skonfigurowanie tego ustawienia preferencji witryny, aby kierować je na pole zbierania adresu e-mail w procesie realizacji zakupu, jest niezbędne do poprawnego śledzenia zdarzenia Started Checkout. Dlatego zdecydowanie zaleca się wykonanie testu, aby upewnić się, że zdarzenia Started Checkout pojawiają się w Klaviyo po wpisaniu adresu e-mail w polu zbierania adresu e-mail w procesie realizacji zakupu.

Pamiętaj też, że pole e-mail w procesie realizacji zakupu wskazane przez preferencję witryny Selektor pola e-mail w procesie realizacji zakupu zostanie automatycznie podłączone do identyfikowania użytkownika, a także wywoła zdarzenie Rozpoczęto realizację zakupu (tzn. nie trzeba uwzględniać selektora CSS dla pola e-mail w procesie realizacji zakupu zarówno w preferencjach witryny Selektory pola e-mail Klaviyo, jak i Selektor pola e-mail w procesie realizacji zakupu).

Dodaj fragmenty kodu konfiguracji

Ostatnim etapem konfiguracji kartridża jest dodanie fragmentów kodu do plików szablonu witryny, aby umożliwić kartridżowi komunikowanie się z witryną. Te kroki znacznie się różnią w przypadku infrastruktur Site Genesis (SG) i Storefront Reference Architecture (SFRA), więc upewnij się, że postępujesz zgodnie z prawidłowymi instrukcjami dla swojej konfiguracji.

Konfiguracja fragmentu Storefront Reference Architecture (SFRA)

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

<isinclude template="klaviyo/klaviyoFooter"/>

Ukończono konfigurację snippet dla Twojego sklepu SFRA.

Konfiguracja fragmentu kodu Site Genesis (SG)

1. Aby dodać KlaviyoFooter.isml do globalnej stopki: Dodaj poniższy kod na końcu pliku footer.isml (lub innego podobnego szablonu, który ładuje się w pobliżu dołu każdej strony).
   

<isinclude template="klaviyo/klaviyoFooter"/>

1. Aby dodać snippety do identyfikacji użytkowników po stronie serwera: dodaj poniższy snippet do kontrolerów Kont-Show i Cart-Show w dowolnym miejscu przed wywołaniem renderowania odpowiednich szablonów (tj. app.getView(...)).
   

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

1. Następnie zaktualizujesz wywołanie app.getView(...) tak, aby uwzględniało klid jako zmienną pdict.
   • W kontrolerze Account-Show:
     

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

• W kontrolerze Cart-Show:
  

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

1. Aby dodać fragment kodu Added To Cart do kontrolera Cart-AddProduct: dodaj poniższy fragment do kontrolera Cart-AddProduct w dowolnym miejscu przed wywołaniem renderowania szablonu (tj. 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. Fragmenty kodu Started Checkout: Podczas dodawania fragmentów kodu Klaviyo do kontrolerów realizacji zakupu w celu śledzenia zdarzeń Started Checkout warto 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 sekwencji realizacji zakupu, a gdy zostanie dołączony, wywołanie zdarzenia Started Checkout . Ważne jest, aby wychwycić powiązanie adresu e-mail z Basket jak najwcześniej w sekwencji realizacji zakupu.
   • Ze względu na dostosowanie procesu realizacji zakupu po stronie witryny Klaviyo nie jest w stanie dokładnie określić, który kontroler jako pierwszy otrzyma obiekt Basket z dołączonym adresem e-mail.
   • Zalecamy dodanie wycinków kodu źródłowego do wszystkich głównych ścieżek, które są uruchamiane w ramach realizacji zakupu. Jeśli potrafisz użyć debuggera, aby dokładnie zidentyfikować moment, w którym adres e-mail zostaje dołączony do koszyka w sekwencji realizacji zakupu, możesz dodać wycinki kodu źródłowego tylko do tej ścieżki, ale dokładnie przetestuj, aby upewnić się, że wszystkie możliwe ścieżki realizacji zakupu (gość, zalogowany, logowanie w trakcie realizacji zakupu itp.) uruchamiają kod.
2. Poniżej znajduje się fragment kodu dla pierwszego trafienia trasy w procesie realizacji zakupu (zwykle COCustomer-Start). Wstaw go w dowolnym miejscu przed wywołaniem renderowania szablonu (tj. app.getView(...)). Zwróć uwagę na kluczową różnicę w tym fragmencie kodu — przekazanie pierwszego argumentu do metody KLCheckoutHelpers.startedCheckoutHelper jako true zamiast false — w porównaniu z innymi fragmentami kodu dla realizacji zakupu (wyróżnionymi poniżej). Pamiętaj, że w poniższym fragmencie kodu metoda KLCheckoutHelpers.startedCheckoutHelper ma wartość true zamiast false (jak w innych fragmentach kodu dla realizacji zakupu). To kluczowe, aby kod wiedział, że mamy nowe zdarzenie Rozpoczęto realizację zakupu do śledzenia.

/* 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. Następnie zaktualizuj wywołanie app.getView(...), aby uwzględnić klid jako zmienną pdict:

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

1. Poniższe fragmenty kodu należy dodać do pierwszej ścieżki, która uruchamia się po dołączeniu adresu e-mail do obiektu Basket. Jeśli nie masz pewności lub po prostu chcesz się zabezpieczyć, zalecamy dodanie tego fragmentu do wszystkich poniższych ścieżek:Podobnie jak w przypadku powyższych fragmentów kodu 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()).
   • 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. W przypadku tras, które wywołują szablony bezpośrednio (np. COShipping-Start), zaktualizuj wywołanie app.getView(...) tak, aby zawierało klid jako zmienną pdict. Oto przykład dla trasy 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. Aby dodać fragment kodu Order Confirmation do kontrolera COSummary-ShowConfirmation: Dodaj poniższy fragment kodu do kontrolera COSummary-ShowConfirmation w dowolnym miejscu przed wywołaniem renderowania szablonu.

/* 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 */

Ukończono konfigurację snippetu dla sklepu Site Genesis.

Dodaj fragmenty kodu pola wyboru zgody podczas finalizacji zakupu (SG i SFRA)

Aby zbierać zgodę na e-mail i SMS na stronie realizacji zakupu, trzeba dodać wycinek kodu źródłowego, aby pola wyboru zgody wyświetlały się w wybranym miejscu, a także skonfigurować ustawienia identyfikatora listy wymienione w sekcji Dodaj usługi powyżej.

Na przykład, aby te fragmenty kodu pojawiały się w procesie realizacji zakupu, można je umieścić w szablonie shipmentCard.isml (app_storefront_base) w SFRA lub w szablonie billing.isml (app_storefront_core) w SiteGen.

Poniżej znajdują się fragmenty ISML zarówno dla Site Genesis, jak i SFRA, i można je umieścić w dowolnym miejscu sekwencji realizacji zakupu, które najlepiej pasuje do konkretnej witryny. Pamiętaj, że aby zgoda podczas realizacji zakupu działała poprawnie w Site Genesis, musisz uwzględnić fragment Order Confirmation, do którego odwołano się w powyższej sekcji Add setup snippets.

Poniższe fragmenty zakładają, że język zgody na otrzymywanie e-maili i SMS-ów znajduje się w pakiecie zasobów właściwości o nazwie „checkout”. Trzeba będzie zastąpić `your.email.subscribe.resource.string.here` oraz `your.sms.subscribe.resource.string.here` kluczami odpowiadającymi odpowiednio językowi zgody na e-mail i SMS. Ten tekst pojawi się obok pola wyboru.

Na przykład język zgody może wyglądać tak:

• E-mail
  Subskrybuj aktualizacje e-mail
• SMS
  Subskrybuj aktualizacje SMS. Zaznaczając to pole i wprowadzając numer telefonu powyżej, wyrażasz zgodę na otrzymywanie marketingowych wiadomości tekstowych (takich jak [kody promocyjne] i [przypomnienia o porzuconym koszyku] od [nazwa firmy] pod podany numer, w tym wiadomości wysyłanych przez automat wybierający. Zgoda nie jest warunkiem zakupu. Mogą obowiązywać opłaty za wiadomości i transmisję danych. Częstotliwość otrzymywania wiadomości jest różna. Możesz wypisać się w dowolnym momencie, odpowiadając STOP lub klikając łącze do rezygnacji z subskrypcji (jeśli jest dostępne) w jednej z naszych wiadomości. Zapoznaj się z naszą polityką prywatności [link] i warunkami świadczenia usług [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)}

Włącz integracje OCAPI w Klaviyo

Punkty końcowe

Aby zintegrować się z SFCC na potrzeby katalogu produktów oraz historycznych i bieżących danych o zamówieniach, Klaviyo korzysta z czterech punktów końcowych OCAPI:

• /order_search
  Synchronizuje historyczne dane o zamówieniach z Klaviyo i synchronizuje bieżące zdarzenia zamówień co 60 minut. Zdarzenia Ordered Product i Placed Order zsynchronizują dodatkowe dane do segmentacji i filtru sekwencji oraz idealnie nadają się do ulepszonej personalizacji, która nie jest dostępna w zdarzeniu Order Confirmation. Aby wysyłać e-maile z potwierdzeniem zamówienia w czasie rzeczywistym, użyj zdarzenia Order Confirmation z cartridge.
• /sites
  Umożliwia wybór witryny, z której Klaviyo synchronizuje dane podczas konfiguracji integracji.
• /product_search
  Łączy katalog z Klaviyo, aby umożliwić funkcje, w tym rekomendacje produktów w e-mailach.
• /products/*/variations
  Umożliwia synchronizację wariantów z Klaviyo, aby zapewnić działanie funkcji takich jak sekwencje „ZNÓW DOSTĘPNE”, „NISKI STAN ZAPASÓW” i „OBNIŻKA CEN”.

Konfiguracja po stronie SFCC

Zanim będzie można komunikować się z OCAPI SFCC, w SFCC trzeba skonfigurować pewne uprawnienia i ustawienia.

Pamiętaj, że chociaż integracja Klaviyo wymaga uprawnień POST dla order_search i product_search, w rzeczywistości nie publikujemy danych w SFCC; wynika to z konstrukcji OCAPI w SFCC.

1. Przejdź do https://account.demandware.com/dw/account/APIAdmin i dodaj klienta API dla Klaviyo. Identyfikator i hasło klienta API będą wymagane do wygenerowania tokena Bearer dla OCAPI.
2. Po dodaniu klienta API przejdź do Administracja > Rozwój witryny > Ustawienia Open Commerce API w zarządcy biznesowym SFCC.
3. Dodaj poniższe fragmenty kodu, zastępując wersję API i identyfikator klienta. Obsługujemy wersje API 19.5 i nowsze, a także 18.8. Zastąp CLIENT_ID identyfikatorem klienta API wygenerowanym podczas konfigurowania klienta API w poprzednim kroku (powinno to wyglądać mniej więcej tak: „xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx”). Jeśli ustawienia dla tych interfejsów API już istnieją, być może wystarczy dodać wyróżnione sekcje poniżej do istniejącej tablicy JSON klientów.
   1. Dodaj następujący kod JSON w typie Sklep i kontekście Globalnym (dla całej organizacji), zastępując SHOP_API_VERSION wersją Shop API OCAPI, a następnie kliknij Zapisz.
      Po dodaniu ustawienia powinny wyglądać podobnie jak tutaj:
      

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

1. Dodaj poniższy kod JSON w sekcji typu Dane i kontekstu Globalny (dla całej organizacji), zastępując DATA_API_VERSION wersją interfejsu API danych OCAPI, a następnie kliknij Zapisz.
   Po dodaniu ustawienia powinny wyglądać podobnie jak tutaj:
   

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

Konfiguracja po stronie Klaviyo

1. W Klaviyo wybierz Integracje > Dodaj integracje.
2. Wyszukaj Salesforce Commerce Cloud i kliknij kartę, a następnie kliknij Zainstaluj.
3. Na stronie docelowej kliknij Połącz z Salesforce Commerce Cloud.
4. Na następnej stronie wypełnij następujące informacje:
   • URL sklepu
     Domena witryny (np. example.com lub dev03-na01-example.demandware.net).
   • token uwierzytelniający
     Utwórz token uwierzytelniający dla tej integracji, który będzie używany do żądania tokenu okaziciela. Token uwierzytelniający jest generowany przez kodowanie base-64 identyfikatora klienta i hasła połączonych dwukropkiem (np. xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx:password).
   • Wersja API danych
     Wersja interfejsu API danych, do której dodano dostęp w kroku konfiguracji po stronie SFCC (np. v19_10).
   • Wersja API sklepu
     Wersja API sklepu, do której dodano dostęp w kroku konfiguracji po stronie SFCC (np. v19_10).
   • ID katalogu
     Identyfikator katalogu SFCC do zsynchronizowania z Klaviyo (np. storefront-catalog-en). ID katalogu znajdziesz w Salesforce Business Manager w sekcji Narzędzia sprzedawcy > Produkty i katalogi > Katalogi.
     

5. Po wprowadzeniu tych danych uwierzytelniających kliknij link Pobierz listę witryn, aby pobrać listę witryn w instancji SFCC.
6. Po pobraniu witryn wybierz witrynę(-y), które chcesz zintegrować z tym kontem, a następnie kliknij Zakończ konfigurację. Integracja powinna teraz rozpocząć synchronizację danych o zamówieniach, katalogu i klientach.

Przetestuj integracje SFCC

Aby przetestować konfigurację cartridge, przejdź do swojej witryny i wykonaj te instrukcje:

1. Dodaj plik cookie, dodając parametr adresu URL utm_email z adresem e-mail do paska adresu. Na przykład: https://www.example.com/?utm_email=your@email.com.
2. Przeszukaj katalog.
3. Wyświetl stronę kategorii.
4. Wyświetl stronę produktu.
5. Dodaj element do koszyka.
6. Złóż zamówienie testowe.
7. Przejdź do Analytics > Metrics w Klaviyo, a następnie poszukaj metryk pochodzących z Salesforce Commerce Cloud.

Przetestuj selektory pola e-mail Klaviyo Email

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

1. Otwórz okno przeglądarki w trybie incognito.
2. W konsoli deweloperskiej wprowadź poniższe polecenie i naciśnij Enter:
   klaviyo.isIdentified();
   Powinno to skutkować następującymi danymi wyjściowymi:
   Promise {<fulfilled>: false}
3. Wpisz adres e-mail w docelowym polu i naciśnij klawisz Tab, aby przenieść fokus na dowolny inny element na stronie.
4. Wróć do konsoli deweloperskiej i ponownie wpisz klaviyo.isIdentified();. Powinno to skutkować następującym wynikiem:
   Promise {<fulfilled>: true}
5. Możesz też sprawdzić, czy Klaviyo rzeczywiście otrzymuje wywołania Identify, przechodząc do Analityka > Metryki w Klaviyo i wyszukując kanał aktywności zdarzeń Aktywni w witrynie, gdzie powinny być widoczne wprowadzone adresy e-mail.

Przetestuj selektor pola e-mail w procesie realizacji zakupu

Aby sprawdzić, czy pole zbierania adresu e-mail w procesie realizacji zakupu prawidłowo wywołuje zdarzenie Started Checkout :

1. Dodaj do koszyka co najmniej jeden produkt, a następnie rozpocznij finalizację zakupu.
2. W obszarze finalizacji zakupu wpisz adres e-mail w docelowym polu i naciśnij klawisz Tab, aby przenieść fokus na dowolny inny element na stronie.
3. Możesz ponownie sprawdzić, czy Klaviyo rzeczywiście odbiera wywołania Identify, przechodząc do Analityka > Metryka w Klaviyo i znajdując kanał aktywności zdarzeń Started Checkout, gdzie powinno być widać, że Twoje ostatnie zdarzenie zostało zarejestrowane.

Rezultat

Integracja Salesforce Commerce Cloud z Klaviyo została już skonfigurowana i przetestowana.