Salesforce Commerce Cloud 시작하기

예상 11분 읽기

업데이트 2025년 7월 9일 AM 12:00 EST

학습 내용

Salesforce Commerce Cloud를 Klaviyo에 연동하는 방법을 알아보세요. Klaviyo 카트리지 및 API 연동을 사용하면 Salesforce Commerce Cloud(이전 명칭: Demandware)를 사용하는 웹사이트를 빠르게 연결하고 실시간 및 과거 데이터를 모두 Klaviyo로 전송할 수 있어요. Klaviyo를 Salesforce Commerce Cloud(SFCC)와 연동하면 Klaviyo에서 웹사이트 탐색, 검색 트래킹, 제품 보기, 카테고리 보기, 장바구니에 품목 추가, 결제 및 주문 등의 사용자 작업을 실시간으로 트래킹하기 시작합니다.

SFCC를 Klaviyo와 통합하는 다음 3가지 주요 단계가 있습니다.

SFCC에서 Klaviyo 카트리지를 설치하는 방법이에요.
SFCC에 사용 설정 스니펫을 추가하기.
Klaviyo에서 SFCC OCAPI 연동 기능을 활성화하기.

시작하기 전에 알아야 할 것

Klaviyo는 SFCC Controller 기반 Site Genesis(SG) 사이트와 Storefront Reference Architecture(SFRA) 사이트 모두와 통합돼요. 각 프레임워크에는 약간 다른 카트리지 설정과 스니펫이 필요하며, 아래에서 설명해 드릴게요.

버전 23.7.0 미만의 Klaviyo SFCC 카트리지를 사용 중인가요? 23.7.0 이상 버전에는 여러 추가 기능, 더 완성도 높은 기본 설치, 개발자 경험과 관련된 개선 사항이 포함되어 있어요. 업그레이드하려면 Salesforce Commerce Cloud 카트리지 업그레이드 방법을(를) 읽어 보세요.

버전 23.7.0 카트리지(또는 그 이상 버전)를 사용하려면 SFCC 호환 모드를 21.7 이상으로 업데이트하는 것을 권장해요.

개발 환경을 먼저 통합하는 것부터 시작하고 싶다면, 이 문서에 설명된 방법을 사용해 연결된 Klaviyo 계정을 만들고 해당 계정으로 개발 환경을 연결할 수 있어요. 로그인한 상태에서 계정을 더 잘 구분할 수 있도록, 계정 설정 시 사용하는 회사 이름에 "Dev" 또는 "Staging"라는 단어를 포함하는 것을 권장해요.

인증 및 구성 문제를 최소화하려면 방화벽 제공업체의 허용 목록에 Klaviyo IP를 추가하는 것도 권장됩니다. 자세한 내용은 Klaviyo 연동 트래픽 IP 주소 허용 방법을 참조하세요.

Klaviyo 카트리지 설정

카트리지 다운로드

Salesforce AppExchange에서 앱 목록을 확인할 수 있어요. AppExchange에서 Klaviyo에 대해 자세히 알아보고 지금 받기를 클릭하면 Github로 이동하며, 여기에서 카트리지를 다운로드할 수 있는 zip 파일로 이용할 수 있어요. SFRA 사이트가 있다면 KlaviyoSFRA zip 파일을 다운로드하고, Site Genesis 사이트가 있다면 KlaviyoSG zip 파일을 다운로드하세요.

다운로드한 zip 파일에 포함된 2개의 카트리지를 모두 설정해야 해요. 이 카트리지는 다음을 포함해요:

int_klaviyo 또는 int_klaviyo_sfra: 사이트별 카트리지로, int_klaviyo는 Site Genesis 기반 웹사이트용이고 int_klaviyo_sfra는 SFRA 기반 웹사이트용입니다.
int_klaviyo_core: 두 가지 인프라 유형 모두에 해당하며, 기본적인 공통 기능이 일부 포함되어 있어요.

카트리지를 가져오세요.

첫 단계는 Visual Studio Code 또는 Eclipse에서 카트리지를 가져와 SFCC 인스턴스에 연결할 수 있도록 준비하는 거예요.

VS Code에서

int_klaviyo_core 카트리지를 복사해 붙여넣으세요.
int_klaviyo(Site Genesis) 또는 int_klaviyo_sfra(SFRA) 폴더를 코드베이스에, 다른 cartridge 폴더와 같은 레벨의 형제 폴더로 복사해 주세요.

Eclipse에서

관리 > 가져오기 > 일반 > 워크스페이스로 기존 프로젝트로 이동하세요.
가져오기 마법사를 사용해 int_klaviyo_core 디렉터리를 가져오세요.
카트리지를 연결할 SFCC 인스턴스를 선택하세요.
속성을 선택해 주세요.
프로젝트 참조를 선택해 주세요.
int_klaviyo_core 카트리지를 확인하세요.
사용 중인 프레임워크에 맞는 다른 카트리지(int_klaviyo 또는 int_klaviyo_sfra)에 대해 2~6단계를 반복해 주세요.

카트리지를 카트리지 경로에 추가하세요.

카트리지를 가져온 후에는 SFCC의 Business 매니저를 사용해 사이트에서 사용하는 카트리지 목록에 추가해야 해요.

관리 > 사이트 > 사이트 관리로 이동하세요.
사이트를 선택해 주세요.
설정 탭을 선택합니다.
카트리지 경로 입력의 Cartridges 레이블 필드 시작 부분에 가져온 Klaviyo 카트리지 이름을 추가하고, 코어 카트리지는 마지막에 두세요(즉, int_klaviyo:int_klaviyo_core 또는 int_klaviyo_sfra:int_klaviyo_core).
적용을 클릭하세요.

적용을 클릭하면 이제 Effective Cartridge Path로 라벨이 지정된 필드 시작 부분에 있는 2개의 카트리지가 표시될 거예요.

서비스 추가

카트리지를 가져오고 사이트 카트리지 경로에 추가한 후에는 카트리지에 대한 설정 구성을 활성화하기 위해 Klaviyo 서비스를 추가해야 해요. Klaviyo 카트리지 zip 파일의 루트 디렉터리에 metadata.zip이라는 다른 zip 파일이 있어요. 아래 지침에서는 이 zip 파일을 참조합니다.

관리 > 사이트 개발 > 사이트 가져오기 및 내보내기 > 서비스로 이동해 주세요.
업로드한 다음 metadata.zip 파일을 가져오세요.

선택한 아카이브를 가져올지 확인하라는 메시지가 표시되면 확인을 선택하세요.
이제 페이지 하단 근처의 상태 섹션에서 가져오기가 실행 중인 것을 확인할 수 있어요.

이제 Merchant tools > Site Preferences > Custom Preferences > klaviyo에서 환경설정 페이지에 액세스할 수 있어요.

여기에서 다음 설정을 관리할 수 있어요:

Klaviyo 활성화됨
카트리지를 활성화하려면 "예"로 설정해야 해요.
Klaviyo Private Key
Klaviyo 비공개 API 키입니다. 이 연동에 사용하는 Klaviyo 비공개 API 키에 전체 액세스 권한이 부여되었는지 확인해 주세요.
Klaviyo 계정
Klaviyo 공개 API 키 또는 사이트 ID입니다.
이벤트를 SFCC로 레이블 지정
이벤트를 SFCC로 레이블 지정하면 SFCC 데이터를 사용하여 Klaviyo의 사전 구축된 플로우에 액세스할 수 있습니다. 현재 이벤트에 레이블을 지정할 때의 단점은, 레이블을 지정하도록 선택하면 Klaviyo 제품 피드의 조회한 제품 또는 장바구니에 추가됨 추천에 액세스할 수 없다는 점입니다.
- 이전에 23.7.0보다 낮은 버전의 카트리지를 설치했고 현재 23.7.0 이상 버전으로 업그레이드하는 경우 아니요로 설정하세요. 2023년 7월 13일 이전에 생성된 연동(즉, 23.7.0 이전 카트리지 버전)은 SFCC로 라벨이 지정되지 않은 지표를 생성해요. 과거에 23.7.0 이전 버전을 사용한 경우 이 설정은 기존 명명 규칙을 반영하여 계정의 지표 데이터가 불연속적으로 보이지 않도록 해요.
장바구니에 추가 이벤트를 “장바구니에 추가”로 전송
이전에 23.7.0보다 이전 버전의 cartridge를 설치했고, 현재 23.7.0 이상 버전으로 업그레이드하는 경우 예로 설정해 주세요. 그 외에는 아니요로 설정해 주세요. 이 설정을 사용하면 계정의 지표 데이터가 불연속적으로 끊기는 것을 방지할 수 있어요.
Klaviyo 이메일 필드 선택기 및 결제 이메일 필드 선택기
이 2개 필드를 구성하는 방법에 대한 자세한 내용은 아래 섹션을 확인해 주세요.
이미지 유형
Klaviyo로 전송되는 이벤트 데이터에 사용할 제품 이미지 유형입니다. 어떤 이미지 유형을 설정해야 할지 확실하지 않다면 판매자 도구 > 제품 및 카탈로그 > 제품으로 이동한 다음, 제품을 클릭하고 사용 가능한 보기 유형(예: 대형, 중형, 소형, 고해상도) 중에서 사용할 유형을 선택하세요.
마케팅 이메일 리스트 ID
결제 시점에 이메일 구독자를 수집하고 이를 Klaviyo 리스트로 동기화할 수 있어요. 이 설정은 이메일 구독자를 추가하려는 Klaviyo 내 리스트의 ID예요. Klaviyo에서 리스트 ID를 찾는 방법을 알아보세요. 결제 시점에 이메일 구독자를 수집하려면, 이후 섹션에 설명된 체크박스 스니펫도 추가해야 해요.
마케팅 SMS 목록 ID
결제 시 SMS 구독자를 수집하고 Klaviyo 목록으로 동기화할 수 있어요. 이 설정은 SMS 구독자를 추가하려는 Klaviyo 목록의 ID예요. Klaviyo에서 목록 ID를 찾는 방법을 알아보세요. SMS 구독자와 이메일 구독자를 모두 수집하는 경우, 이메일용 목록과는 다른 SMS용 목록을 선택해 주세요. 이렇게 하면 동의가 항상 올바른 채널에 제대로 귀속돼요. 결제 시 SMS 구독자를 수집하려면, 이후 섹션에 설명된 체크박스 스니펫과 함께 다른 사전 요구사항도 필요해요.

metadata.zip 파일은 SFCC에 새 서비스도 생성해요. 관리 > 운영 > 서비스로 이동하면, 이제 서비스 탭 아래에 KlaviyoEventService와 KlaviyoSubscribeProfilesService라는 새 항목 2개가 표시될 거예요. 각 항목에는 해당 프로필 및 자격 증명 항목이 있어요.

Klaviyo 이메일 필드 선택기 및 결제 이메일 필드 선택기 구성

이러한 환경설정은 Klaviyo에서 사이트 방문자를 성공적으로 식별하고 트래킹하는 데 필수적이에요. 방문자가 Klaviyo에서 식별되지 않으면, 해당 방문자에 대해서는 어떤 이벤트도 트래킹되지 않아요. 연동이 끝나면, 아래의 SFCC 설정 테스트 섹션에서 Klaviyo 이메일과 결제 페이지 이메일 필드 선택기 설정을 테스트하는 방법을 확인할 수 있어요.

Klaviyo 이메일 필드 선택기

Klaviyo 이메일 필드 선택기 사이트 환경설정은 사이트의 모든 이메일 및 전화번호 입력란을 타겟팅하는 데 사용돼요(아래에서 다루는 결제 시 이메일 입력란은 제외). 각 필드는 표준 CSS 선택자를 통해 식별되며, 사이트 환경설정(여러 문자열 값을 하나씩 입력할 수 있는 “문자열 세트”)에 각각 개별적으로 추가돼요. 표준 스타일시트에서 특정 요소를 대상으로 지정하는 데 사용할 수 있는 모든 복잡한 선택자를 사용할 수 있어요. 예를 들어 #dwfrm_login div.username input.input-text는 허용되며, input[type=email]처럼 공유 속성을 기반으로 사이트 전반의 여러 요소를 대상으로 지정할 수 있는 선택자도 허용돼요. 동적으로 생성된 ID를 통해 input을 대상으로 지정하는 것은 피해야 해요. 이는 SiteGen에서 매우 흔한 경우인데, 이러한 ID는 페이지 로드에 따라 변경되므로 실패하게 돼요(예: #dwfrm_login_username_d0fignzngiyq).

페이지 로드 후에 DOM에 추가된 필드도 타겟팅할 수 있어요. 예를 들어 AJAX 호출 후 모달에 삽입되는 이메일 주소 필드나, 서드파티 JavaScript가 DOM에 주입하는 필드가 여기에 해당해요.

또한 Klaviyo 계정 내 SMS 설정에 따라 전화번호 필드만으로는 Klaviyo가 사용자를 완전히 식별하지 못할 수도 있어요(SMS가 활성화되어 있고 입력한 전화번호 국가와 연결된 발신 번호가 있는 경우, 브라우저가 식별돼요). 따라서 전화번호 필드를 대상으로 CSS 선택기를 추가하는 것은 “있으면 좋은” 또는 “필요 시” 항목으로 볼 수 있지만, 이메일 필드에 대해서는 필수로 간주해야 해요.

결제 이메일 필드 선택기

체크아웃의 이메일 수집 필드는 특수한 경우이므로, 타겟팅을 위한 자체 사이트 기본 설정이 있어요. 원리는 Klaviyo 이메일 필드 선택기 사이트 기본 설정과 완전히 동일해요. 체크아웃의 시작, 끝 또는 중간에 표시되는지와 관계없이 사이트의 체크아웃 플로우에서 이메일 주소 필드를 타겟팅하는 단일 CSS 선택기를 입력하기만 하면 돼요.

결제에서 이메일 수집 필드를 대상으로 이 사이트 환경설정을 성공적으로 구성하는 것은 결제 시작 이벤트를 올바르게 추적하는 데 필수적이며, 따라서 결제의 이메일 수집 필드에 이메일 주소를 입력한 후 Klaviyo에 결제 시작 이벤트가 표시되는지 확인할 수 있도록 테스트해 보는 것을 적극 권장해요.

또한 Checkout Email Field Selector 사이트 기본 설정에서 대상으로 지정한 결제 이메일 필드는 Started Checkout 이벤트를 트리거하는 것 외에도 사용자를 식별하도록 자동으로 연결됩니다(즉, Klaviyo 이메일 Field Selectors와 Checkout Email Field Selector 사이트 기본 설정 모두에 결제 이메일 필드의 CSS 선택기를 포함할 필요가 없습니다).

설정 스니펫 추가

카트리지 설정의 마지막 단계는 카트리지가 사이트와 통신할 수 있도록 사이트 템플릿 파일에 스니펫을 추가하는 거예요. 이 단계는 Site Genesis(SG)와 Storefront Reference Architecture(SFRA) 인프라에 따라 크게 달라지므로, 설정에 맞는 올바른 지침을 따라 주세요.

Storefront Reference Architecture(SFRA) 스니펫 설정

다음 코드를 pageFooter.isml 파일 하단에 추가하세요:

<isinclude template="klaviyo/klaviyoFooter"/>

이제 SFRA 스토어의 스니펫 설정을 완료했어요.

Site Genesis(SG) 스니펫 설정

전역 푸터에 KlaviyoFooter.isml을 추가하려면 다음을 수행해 주세요. 모든 페이지의 하단 근처에서 로드되는 footer.isml 파일(또는 유사한 템플릿) 하단에 다음 코드를 추가해 주세요.

<isinclude template="klaviyo/klaviyoFooter"/>

서버 측 사용자 식별을 위한 스니펫을 추가하려면 다음을 수행해 주세요. 각 템플릿을 렌더링하는 호출(즉, app.getView(...)) 이전의 아무 위치에나 계정-Show 및 Cart-Show 컨트롤러에 다음 스니펫을 추가해 주세요.

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

그런 다음 app.getView(...) 호출을 업데이트해 klid를 pdict 변수로 포함해 주세요.
- 계정-표시 컨트롤러에서:

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

Cart-Show 컨트롤러에서:

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

Cart-AddProduct 컨트롤러에 Added To Cart 스니펫을 추가하려면: 템플릿을 렌더링하기 위한 호출(예: app.getView(...)) 전에, Cart-AddProduct 컨트롤러의 어느 위치에든 다음 스니펫을 추가해 주세요.

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

결제 시작 스니펫: 결제 시작 이벤트를 추적하기 위해 결제 컨트롤러에 Klaviyo 스니펫을 추가할 때는 다음 사항을 염두에 두는 것이 중요합니다.
- 이 스니펫을 추가하는 목적은 결제 플로우 내에서 Basket 객체에 이메일 주소가 연결되었는지 확인하고, 연결되면 Started Checkout 이벤트를 실행하는 거예요. 결제 플로우에서 Basket에 이메일 주소가 연결되는 시점을 가능한 한 빨리 포착하는 것이 중요해요.
- 사이트 기반 체크아웃 커스터마이징 때문에, 이메일 주소가 연결된 Basket 객체를 처음으로 받게 될 컨트롤러가 무엇인지 Klaviyo가 정확히 정의하는 것은 불가능해요.
- 결제에서 트리거되는 모든 주요 경로에 코드 조각을 추가하는 것을 권장해요. 디버거를 사용해 결제 플로우에서 이메일 주소가 정확히 언제 장바구니에 연결되는지 식별할 수 있다면 해당 경로에만 코드 조각을 추가해도 되지만, 가능한 모든 결제 경로(게스트, 로그인됨, 결제 중 로그인 등)에서 코드가 트리거되는지 철저히 테스트해 주세요.
결제에서 첫 번째로 히트하는 경로(일반적으로 COCustomer-Start)에 대한 스니펫은 다음과 같아요. 템플릿을 렌더링하는 호출(예: app.getView(...)) 전에 어디에든 삽입해 주세요. 아래 스니펫에서 핵심 차이점은 다른 결제 스니펫(아래에서 강조 표시됨)과 비교했을 때 KLCheckoutHelpers.startedCheckoutHelper 메서드의 첫 번째 인수를 false가 아니라 true로 전달한다는 점이에요. 아래 스니펫에서 KLCheckoutHelpers.startedCheckoutHelper는 다른 결제 스니펫과 달리 method가 false가 아니라 true예요. 이는 코드가 트래킹할 새 Started Checkout 이벤트가 있다는 것을 알 수 있도록 하는 데 필수예요.

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

그런 다음 app.getView(...) 호출을 업데이트하여 klid를 pdict 변수로 포함해 주세요:

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

다음 스니펫은 Basket 객체에 이메일 주소가 연결된 후 처음 실행되는 라우트에 추가해야 해요. 어떤 라우트인지 확실하지 않거나 모든 경우를 대비하고 싶다면, 다음 모든 라우트에 이 스니펫을 추가하는 것을 권장해요. 위의 스니펫과 마찬가지로, 템플릿을 렌더링하는 호출 전에 또는 이후 컨트롤러를 호출하기 전에 이 스니펫을 어디든 추가해 주세요(예: 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 */

템플릿을 직접 호출하는 라우트(예: COShipping-Start)의 경우, app.getView(...) 호출을 업데이트하여 klid를 pdict 변수로 포함해 주세요. 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');

COSummary-ShowConfirmation 컨트롤러에 Order Confirmation 스니펫을 추가하려면: 템플릿을 렌더링하는 호출 전에, COSummary-ShowConfirmation 컨트롤러의 아무 위치에나 다음 스니펫을 추가하세요.

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

이제 Site Genesis 스토어의 스니펫 설정을 완료했어요.

결제 시 동의 체크박스 스니펫(SG 및 SFRA)을 추가하세요.

결제 시점의 SMS 동의를 Klaviyo에 동기화하기 위한 다음 사전 요구 사항을 확인해 주세요:

Klaviyo에서 SMS를 활성화하고 발신 번호를 설정하세요.
결제 양식의 전화번호 필드는 국가 코드를 지원해야 해요.

체크아웃에서 이메일 및 SMS에 대한 동의를 수집하려면, 위의 서비스 추가 섹션에 안내된 목록 ID 설정을 구성하는 것 외에도, 원하는 위치에 동의 체크박스가 표시되도록 동의 체크박스용 코드 조각을 포함해야 해요.

예를 들어, 이러한 스니펫이 결제에 표시되도록 하려면 SFRA 내 shipmentCard.isml 템플릿(app_storefront_base)에 배치하거나 SiteGen 내 billing.isml 템플릿(app_storefront_core)에 배치할 수 있어요.

아래는 Site Genesis와 SFRA 모두에 대한 ISML 스니펫이며, 사이트에 가장 적합한 결제 플로우의 어느 위치에나 배치할 수 있어요. Site Genesis에서 결제 시 동의가 올바르게 작동하려면, 위의 설정 스니펫 추가 섹션에서 참조된 주문 확인 스니펫을 포함해야 해요.

아래 스니펫은 이메일과 SMS의 옵트인 문구가 'checkout'이라는 속성 리소스 번들에 포함되어 있다고 가정해요. `your.email.subscribe.resource.string.here`를 `your.sms.subscribe.resource.string.here`를 각각 이메일 및 SMS 옵트인 문구에 해당하는 키로 바꿔야 해요. 이 문구는 확인란 옆에 표시돼요.

예를 들어, 옵트인 문구는 다음과 같을 수 있어요:

이메일
이메일 업데이트를 구독하다
SMS
SMS 업데이트를 구독하세요. 이 확인란을 선택하고 위에 휴대폰 번호를 입력하면, 제공하신 번호로 자동 다이얼러가 보내는 메시지를 포함하여 [회사명]에서 보내는 마케팅 문자 메시지([프로모션 코드] 및 [장바구니 알림] 등)를 수신하는 데 동의하는 것입니다. 동의는 구매의 조건이 아닙니다. 메시지 및 데이터 요금이 적용될 수 있습니다. 메시지 빈도는 다양합니다. 언제든지 STOP이라고 답장하거나 메시지 중 하나에 있는 수신 거부 링크(사용 가능한 경우)를 클릭하여 수신을 거부할 수 있습니다. 개인정보 보호정책[link] 및 서비스 이용 약관[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)}

Klaviyo에서 OCAPI 연동 활성화

엔드포인트

제품 카탈로그 및 과거/진행 중인 주문 데이터에 대해 SFCC와 통합하기 위해 Klaviyo는 4개의 OCAPI 엔드포인트를 사용해요:

/order_search
Klaviyo로 과거 주문 데이터를 동기화하고, 60분마다 진행 중인 주문 이벤트를 동기화해요. Ordered Product 및 Placed Order 이벤트는 세분화 및 플로우 필터를 위한 추가 데이터를 동기화하며, Order Confirmation 이벤트로는 사용할 수 없는 고급 개인화에 적합해요. 실시간 주문 확인 이메일을 보내려면 카트리지의 Order Confirmation 이벤트를 사용하세요.
/sites
연동 설정 중에 Klaviyo가 데이터를 동기화할 사이트를 선택할 수 있어요.
/product_search
카탈로그를 Klaviyo에 연결해 이메일의 제품 추천을 포함한 기능을 사용할 수 있게 해요.
/products/*/variations
재입고, 재고 부족, 가격 인하 플로우 같은 기능을 사용할 수 있도록 Klaviyo에 같은 이메일의 다른 버전을 동기화할 수 있어요.

SFCC 측 설정

SFCC의 OCAPI와 통신하려면, SFCC에서 일부 권한과 설정을 먼저 구성해야 해요.

Klaviyo 연동에는 order_search 및 product_search에 대한 POST 권한이 필요하지만, 실제로는 SFCC에 데이터를 POST하지는 않습니다. 이는 SFCC의 OCAPI 설계 때문입니다.

https://account.demandware.com/dw/account/APIAdmin (으)로 이동하세요. 그리고 Klaviyo에 대한 API 클라이언트를 추가하세요. API 클라이언트 ID와 비밀번호는 OCAPI용 베어러 토큰을 생성하는 데 필요해요.
API 클라이언트가 추가되면 SFCC Business Manager에서 관리 > 사이트 개발 > Open Commerce API 설정으로 이동해 주세요.
다음 코드 조각을 추가하고, API 버전과 클라이언트 ID를 바꾸세요. 19.5 이상 및 18.8 API 버전을 지원해요. CLIENT_ID를 이전 단계의 API 클라이언트 설정에서 생성된 API 클라이언트 ID로 바꿔 주세요(예: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"처럼 표시돼요). 이러한 API에 대한 설정이 이미 있는 경우, 기존 clients JSON 배열에 아래에서 강조 표시된 섹션만 추가하면 될 수도 있어요.
1. Shop 유형과 Global (organization-wide) 컨텍스트 아래에 다음 JSON을 추가하고 SHOP_API_VERSION을 OCAPI Shop API 버전으로 바꾼 다음 저장을 클릭하세요.
  추가하면 설정이 다음과 비슷하게 표시되어야 해요:

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

데이터 유형과 전역(조직 전체) 컨텍스트 아래에 다음 JSON을 추가하고, DATA_API_VERSION을 OCAPI Data API 버전으로 바꾼 다음 저장을 클릭해 주세요.
추가하면 설정이 다음과 비슷하게 표시돼야 해요:

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

Klaviyo 측 설정

Klaviyo에서 연동 > 연동 추가를 선택해 주세요.
Salesforce Commerce Cloud를 검색하고 카드를 클릭한 다음 설치를 클릭하세요.
랜딩 페이지에서 Salesforce Commerce Cloud 연결을 클릭하세요.
다음 페이지에서 다음 정보를 입력해 주세요:
- 스토어 URL
  웹사이트 도메인(예: example.com 또는 dev03-na01-example.demandware.net)입니다.
- 인증 토큰
  이 연동에서 무기명 토큰을 요청하는 데 사용할인증 토큰을 생성하세요. 인증 토큰은 콜론(:)으로 연결된 클라이언트 ID와 비밀번호를 base-64 인코딩하여 생성됩니다(예: xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx:password).
- 데이터 API 버전
  SFCC 측 설정 단계에서 액세스 권한을 추가한 데이터 API 버전(예: v19_10)입니다.
- Shop API Version
  SFCC 측 설정 단계에서 액세스 권한을 추가한 Shop API 버전(예: v19_10).
- 카탈로그 ID
  Klaviyo와 동기화할 SFCC 카탈로그의 ID(예: storefront-catalog-en)입니다. Salesforce Business 매니저에서 Merchant Tools > Products and Catalogs > Catalogs로 이동해 카탈로그 ID를 찾을 수 있어요.

이 자격 증명을 입력한 후 사이트 목록 가져오기 링크를 클릭하여 SFCC 인스턴스의 사이트 목록을 가져오세요.
사이트를 가져온 후 이 계정과 통합할 사이트를 선택하고 설정 완료를 클릭해 주세요. 이제 연동에서 주문, 카탈로그, 고객 데이터 동기화를 시작할 거예요.

SFCC 연동을 테스트해 보세요

카트리지 설정을 테스트하려면 사이트로 이동한 다음 다음 지침을 따르세요:

주소 표시줄에 URL 매개변수 utm_email을 이메일 주소로 추가해 스스로를 쿠키 처리하세요. 예: https://www.example.com/?utm_email=your@email.com.
카탈로그를 검색하세요.
카테고리 페이지를 봅니다.
제품 페이지를 확인하세요.
장바구니에 상품을 추가해 주세요.
테스트 주문을 진행해 보세요.
Klaviyo에서 분석 > 지표로 이동한 다음 Salesforce Commerce Cloud에서 가져오는 지표를 찾으세요.

Klaviyo 이메일 필드 선택기 테스트

특정 이메일 필드가 올바르게 타기팅되었고 Klaviyo에 사용자를 정확히 식별하고 있는지 테스트하려면 다음을 수행해 주세요:

시크릿 브라우저 창을 여세요.
Developer Console에 다음 명령을 입력하고 Enter를 누르세요:
klaviyo.isIdentified();
그러면 다음과 같은 출력이 표시돼야 해요:
Promise {<fulfilled>: false}
대상 필드에 이메일 주소를 입력한 다음 Tab 키를 클릭해 페이지의 다른 요소로 포커스를 이동해 주세요.
Developer Console로 돌아가서 klaviyo.isIdentified();을(를) 다시 입력해 주세요. 다음과 같은 출력이 표시되어야 해요:
Promise {<fulfilled>: true}
Klaviyo가 실제로 Identify 호출을 수신하고 있는지 다시 확인하려면 Klaviyo에서 분석 > 지표 로 이동한 다음 사이트에서 활성 이벤트의 활동 피드를 찾으세요. 그러면 입력한 이메일 주소가 목록에 표시되는 것을 확인할 수 있어요.

테스트 결제 이메일 필드 선택기

결제 이메일 수집 필드가 Started Checkout 이벤트를 성공적으로 트리거하는지 테스트하려면:

장바구니에 하나 이상의 제품을 추가한 다음, 결제를 시작해 주세요.
결제 과정에서 대상 필드에 이메일 주소를 입력한 다음 Tab 키를 클릭해 페이지의 다른 요소로 포커스를 이동하세요.
Klaviyo가 Identify 호출을 실제로 수신하고 있는지 다시 확인하려면 Klaviyo에서 분석 > 지표 로 이동한 다음 결제 시작 이벤트의 활동 피드를 찾으세요. 여기에서 최근 이벤트가 추적된 것을 확인할 수 있어요.

결과

이제 Salesforce Commerce Cloud를 Klaviyo와 연동하고 연동을 테스트했어요.

이 도움말 문서가 유용했나요?

이 형식은 도움말 문서 피드백 용도로만 사용하세요. 지원 팀에 문의하는 방법.

Klaviyo에서 자세히 살펴보기

커뮤니티

동료, 파트너, Klaviyo 전문가와 연결되어 영감을 받고 인사이트를 공유하며, 모든 궁금한 사항에 대해 답을 얻으세요.

커뮤니티 방문

파트너

특정 작업을 도와주거나 지속적인 마케팅 관리를 위해 Klaviyo 인증 전문가를 고용하세요.

파트너 고용하기

지원

계정을 통해 지원에 액세스하세요.

이메일 지원 (무료 체험 및 유료 계정) 연중무휴 24시간 사용 가능

채팅/가상 비서
사용 가능 여부는 위치 및 요금제 유형에 따라 다름

로그인