학습 내용
Salesforce Commerce Cloud와 클라비요를 통합하는 방법을 알아보세요. 클라비요 카트리지와 API 통합을 통해 Salesforce Commerce Cloud(구 Demandware)를 사용하는 웹사이트는 실시간 및 기록 데이터를 모두 클라비요에 빠르게 연결하고 전송할 수 있습니다. Klaviyo를 Salesforce Commerce Cloud(SFCC)와 통합하면 웹사이트 탐색, 검색 추적, 제품 보기, 카테고리 보기, 장바구니에 항목 추가, 결제 및 주문과 같은 사람들이 실시간으로 수행하는 작업을 추적하기 시작합니다.
이 가이드에서 다루는 SFCC와 클라비요를 통합하는 세 가지 주요 단계는 다음과 같습니다:
- SFCC에 클라비요 카트리지 설치하기.
- SFCC에 활성화 스니펫을 추가합니다.
- 클라비요에서 SFCC OCAPI 통합을 활성화합니다.
시작하기 전 안내 사항
클라비요는 SFCC 컨트롤러 기반 사이트 제네시스(SG) 및 스토어프론트 참조 아키텍처(SFRA) 사이트와 모두 통합됩니다. 각 프레임워크마다 약간씩 다른 카트리지 설정과 스니펫이 필요하며, 아래에 설명되어 있습니다.
23.7.0 버전(또는 그 이상 버전)의 카트리지를 사용하려면 SFCC 호환 모드를 21.7 이상으로 업데이트하는 것이 좋습니다.
개발 환경을 먼저 통합하여 시작하려면 이 문서에 설명된 방법을 사용하여 연결된 클라비요 계정을 만들고 개발 환경을 해당 계정과 연결할 수 있습니다. 로그인할 때 계정을 더 잘 구분할 수 있도록 계정을 설정할 때 사용하는 회사 이름에 "Dev" 또는 "Staging" 이라는 단어를 포함하는 것이 좋습니다.
클라비요 카트리지 설정클라비요 카트리지 설정
카트리지 다운로드카트리지 다운로드
앱 목록은 Salesforce 앱익스체인지에서 찾을 수 있습니다. 앱익스체인지에서 클라비요에 대해 자세히 알아보고 지금 받기를 클릭하면 깃허브로 이동하여 카트리지를 zip 파일로 다운로드할 수 있습니다. SFRA 사이트가 있는 경우 KlaviyoSFRA zip 파일을 다운로드하고, Site Genesis 사이트가 있는 경우 KlaviyoSG zip 파일을 다운로드하세요.
다운로드한 zip 파일에 포함된 두 개의 카트리지를 설정해야 합니다. 이러한 카트리지에는 다음이 포함됩니다:
- int_kㅡㄹ라비요 또는 int_kㅡㄹ라비요_sfra: 사이트별 카트리지; int_klaviyo는 Site Genesis 기반 웹사이트용, int_klaviyo_sfra는 SFRA 기반 웹사이트용입니다.
- int_klaviyo_core: 두 가지 유형의 인프라에 대해 일부 기본적이고 중복되는 기능을 포함합니다.
카트리지 가져오기
첫 번째 단계는 Visual Studio Code 또는 Eclipse에서 카트리지를 가져와서 SFCC 인스턴스와 연결할 수 있도록 하는 것입니다.
VS 코드에서
- int_klaviyo_core 카트리지를 복사하여 붙여넣습니다.
- 다른 카트리지 폴더의 형제 폴더로 int_klaviyo(Site Genesis) 또는 int_klaviyo_sfra(SFRA) 폴더를 코드베이스에 복사합니다.
이클립스
- 관리로 이동 > > 일반 > 기존 프로젝트를 워크스페이스로 가져오기.
- 가져오기 마법사를 사용하여 int_klaviyo_core 디렉터리를 가져옵니다.
- 카트리지를 연결할 SFCC 인스턴스를 선택합니다.
- 속성을 선택합니다.
- 프로젝트 참조를 선택합니다.
- int_klaviyo_core 카트리지를 체크인합니다.
- 프레임워크에 맞는 다른 카트리지(int_klaviyo 또는 int_klaviyo_sfra)에 대해 2~6단계를 반복합니다.
카트리지 경로에 카트리지를 추가합니다.
카트리지를 가져온 후에는 SFCC의 비즈니스 관리자를 사용하여 사이트에서 사용하는 카트리지 목록에 카트리지를 추가해야 합니다.
- 관리 > 사이트 > 사이트 관리로 이동합니다.
- 사이트를 선택합니다.
- 설정 탭을 선택합니다.
- 카트리지라고 표시된 카트리지 경로 입력의 시작 부분에 코어 카트리지가 마지막에 있는 가져온 클라비요 카트리지의 이름을 추가합니다(int_klaviyo:int_klaviyo_core 또는 int_klaviyo_sfra:int_klaviyo_core 중 하나).
- 적용을 클릭합니다.
적용을 클릭하면 이제 유효 카트리지 경로라고 표시된 필드의 시작 부분에 두 개의 카트리지가 표시됩니다.
서비스 추가
카트리지를 가져와 사이트 카트리지 경로에 추가한 후 카트리지에 대한 설정 구성을 사용하려면 클라비요 서비스를 추가해야 합니다. 클라비요 카트리지 zip 파일의 루트 디렉터리에는 메타데이터.zip이라는 또 다른 zip 파일이 있습니다. 다음 지침은 이 zip 파일을 참조합니다.
- 관리로 이동 > 사이트 개발 > 사이트 가져오기 & 내보내기 > 서비스.
- 메타데이터.zip 파일을 업로드한 다음 가져옵니다.
- 선택한 아카이브를 가져올 것인지 확인하라는 메시지가 표시되면 확인을 선택합니다.
- 이제 페이지 하단의 상태 섹션에서 가져오기가 실행 중인 것을 볼 수 있습니다.
- 이제 판매자 도구 > 사이트 기본 설정 > 사용자 지정 기본 설정 > klaviyo에서 기본 설정 페이지에 액세스할 수 있습니다.
여기에서 다음 설정을 관리할 수 있습니다:-
클라비요 사용
카트리지를 사용하려면 "예" 로 설정해야 합니다. -
클라비요 개인 키
클라비요 비공개 API 키입니다. 이 통합에 사용하는 클라비요 비공개 API 키에 전체 액세스 권한이 부여되었는지 확인하세요. -
클라비요 계정
클라비요 공개 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 이전 카트리지 버전을 설치했고 현재 23.7.0 이상으로 업그레이드하는 경우 예로 설정합니다. 그렇지 않으면 아니요로 설정합니다. 이 설정은 계정의 지표 데이터가 중단되는 것을 방지합니다. -
클라비요 이메일 필드 선택기 및 결제 이메일 필드 선택기
이 두 필드를 구성하는 방법에 대한 자세한 내용은 아래 섹션을 참조하세요. -
이미지 유형
클라비요로 전송되는 이벤트 데이터에 사용할 제품 이미지 유형입니다. 어떤 이미지 유형을 설정할지 잘 모르겠다면 판매자 도구 > 제품 및 카탈로그 > 제품으로 이동하여 제품을 클릭하고 사용 가능한 항목(예: 대형, 중형, 소형, 고해상도)에 따라 사용할 보기 유형을 결정합니다. -
마케팅 이메일 목록 ID
결제 시 이메일 구독자를 수집하여 클라비요 목록에 동기화할 수 있습니다. 이 설정은 이메일 구독자를 추가할 클라비요 목록의 ID입니다. 클라비요에서 리스트 ID를 찾는 방법을 알아보세요. 결제 시 이메일 구독자를 수집하려면 이후 섹션에서 설명하는 확인란 스니펫도 추가해야 합니다. -
마케팅 SMS 목록 ID
결제 시 SMS 구독자를 수집하여 클라비요 목록에 동기화할 수 있습니다. 이 설정은 SMS 구독자를 추가할 ID 클라비요 목록입니다. 클라비요에서 리스트 ID를 찾는 방법을 알아보세요. SMS와 이메일 구독자를 모두 수집하는 경우 이메일과 다른 SMS 목록을 선택하세요. 이렇게 하면 동의가 항상 올바른 채널에 올바르게 귀속됩니다. 결제 시 SMS 가입자를 수집하려면 이후 섹션에서 설명하는 확인란 스니펫과 함께 몇 가지 다른 전제 조건이 필요합니다.
-
클라비요 사용
- 메타데이터.zip 파일은 SFCC에 새 서비스도 생성합니다. 관리 > 운영 > 서비스로 이동하면 이제 서비스 탭 아래에 각각 프로필 및 자격 증명 항목이 있는 2개의 새 항목(KlaviyoEventService 및 KlaviyoSubscribeProfilesService)이 표시됩니다.
클라비요 이메일 필드 선택기 및 결제 이메일 필드 선택기 구성하기
이러한 기본 설정은 클라비요가 사이트 방문자를 성공적으로 식별하고 추적하는 데 필수적인 요소입니다. 방문자가 클라비요로 식별되지 않으면 해당 방문자에 대한 이벤트가 추적되지 않습니다. 통합이 완료되면 아래의 SFCC 설정 테스트 섹션에서 클라비요 이메일 및 결제 이메일 필드 선택기 설정을 테스트하는 방법을 알아볼 수 있습니다.
클라비요 이메일 필드 선택기
클라비요 이메일 필드 선택기 사이트 기본 설정은 사이트의 모든 이메일 및 전화번호 입력 필드를 타겟팅하는 데 사용됩니다(아래에서 다루는 결제 시 이메일 입력은 제외). 표준 CSS 선택기를 통해 이러한 필드를 식별하며, 각 필드는 사이트 기본 설정에 개별적으로 추가됩니다('문자열 집합'으로 여러 문자열 값을 하나씩 입력할 수 있음). 표준 스타일시트에서 특정 요소를 타깃팅하는 데 사용할 수 있는 복잡한 선택기(예: #dwfrm_login div.username input.input-text)는 물론, 공유 속성을 기반으로 사이트 전체에서 여러 요소를 타깃팅하는 선택기(예: input[type=email])도 사용할 수 있습니다. 동적으로 생성된 ID는 페이지 로드에 따라 변경되어 실패할 수 있으므로(예: #dwfrm_login_username_d0fignzngiyq) SiteGen에서 매우 일반적인 경우인 동적 ID를 통한 입력 타겟팅은 피해야 합니다.
DOM 포스트 페이지 로드에 추가된 필드는 여전히 타깃팅할 수 있습니다. 예를 들어 AJAX 호출 후 모달에 삽입되는 이메일 주소 필드나 타사 자바스크립트에 의해 DOM에 삽입되는 이메일 주소 필드가 이에 해당합니다.
또한 클라비요 계정 내 SMS 설정에 따라 전화번호 필드만으로는 클라비요에서 사용자를 완전히 식별하지 못할 수도 있습니다(SMS가 활성화되어 있고 입력한 전화번호의 국가와 연결된 발신 번호가 있는 경우 브라우저에서 식별됩니다). 따라서 타겟 전화번호 필드에 CSS 선택기를 추가하는 것은 '있으면 좋은' 또는 '필요에 따라' 추가하는 것으로 간주할 수 있지만 이메일 필드에 추가하는 것은 필수적인 것으로 간주해야 합니다.
결제 이메일 필드 선택기
결제 시 이메일 수집 필드는 특별한 경우이므로 타겟팅에 대한 자체 사이트 기본 설정이 있습니다. 이 원칙은 클라비요 이메일 필드 선택기 사이트 기본 설정과 완전히 동일하게 작동합니다. 결제 시작, 종료 또는 결제 중간에 표시되는지 여부에 관계없이 사이트의 결제 흐름에서 이메일 주소 필드를 대상으로 하는 단일 CSS 선택기를 입력하기만 하면 됩니다.
결제 시 이메일 수집 필드를 대상으로 이 사이트 기본 설정을 성공적으로 구성하는 것은 결제 시작 이벤트를 올바르게 추적하는 데 필수적이므로 결제 시 이메일 수집 필드에 이메일 주소를 입력한 후 클라비요에 결제 시작 이벤트가 표시되는지 테스트하는 것을 적극 권장합니다.
또한 결제 이메일 필드 선택기 사이트 기본 설정이 타겟팅하는 결제 이메일 필드는 결제 시작 이벤트를 트리거할 뿐만 아니라 사용자를 식별하기 위해 자동으로 연결되므로 클라비요 이메일 필드 선택기와 결제 이메일 필드 선택기 사이트 기본 설정 모두에 결제 이메일 필드에 대한 CSS 선택기를 포함할 필요가 없습니다.
설정 스니펫 추가설정 스니펫 추가
카트리지 설정의 마지막 단계는 카트리지가 사이트와 통신할 수 있도록 사이트 템플릿 파일에 스니펫을 추가하는 것입니다. 이러한 단계는 사이트 제네시스(SG) 및 SFRA(스토어 참조 아키텍처) 인프라에 따라 크게 다르므로 설정에 맞는 올바른 지침을 따라야 합니다.
SFRA(상점 참조 아키텍처) 스니펫 설정
페이지Footer.isml 파일 하단에 다음 코드를 추가합니다:
<isinclude template="klaviyo/klaviyoFooter"/>이제 SFRA 스토어에 대한 스니펫 설정을 완료했습니다.
사이트 제네시스(SG) 스니펫 설정
- 글로벌 푸터에 KlaviyoFooter.isml을 추가하려면 다음과 같이 하세요: footer.isml 파일(또는 모든 페이지 하단에 로드되는 유사한 템플릿)의 하단에 다음 코드를 추가합니다.
<isinclude template="klaviyo/klaviyoFooter"/> - 서버 측 사용자 식별을 위한 스니펫 추가하기: 각 템플릿을 렌더링하는 호출(즉, app.getView(...)) 전에 계정 표시 및 장바구니 표시 컨트롤러에 다음 스니펫을 추가합니다.
// 클라비요 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: 'klid: klid' 추가 - 장바구니 표시 컨트롤러에서:
app.getView('장바구니', {cart: app.getModel('Cart').get(),RegistrationStatus: false,klid: klid // KLAVIYO: added 'klid: klid'}).render('체크아웃/카트/카트');
- 계정 표시 컨트롤러에서:
- 장바구니에 추가 코드 조각을 Cart-AddProduct 컨트롤러에 추가하려면 다음과 같이 하세요: 템플릿을 렌더링하는 호출(즉, app.getView(...)) 전의 아무 곳에나 Cart-AddProduct 컨트롤러에 다음 스니펫을 추가합니다.
/* 클라비요 장바구니에 추가됨 이벤트 추적 */ 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 : 거짓; if (exchangeID) { currentBasket = BasketMgr.getCurrentBasket(); if (currentBasket && currentBasket.getProductLineItems().toArray().length) { dataObj = addedToCartData.getData(currentBasket); 서비스 호출 결과 = klaviyoUtils.trackEvent(exchangeID, 데이터 오브젝트, 클라비요유틸스.EVENT_NAMES.추가된카트, false); if (isKlDebugOn) { var klDebugData = klaviyoUtils.prepareDebugData(dataObj); var serviceCallData = klaviyoUtils.prepareDebugData(serviceCallResult); var siteGenKlDebutData = `<입력 유형="hidden" name="siteGenKlDebutData" id="siteGenKlDebutData" value="${klDebugData}"/>`; var siteGenServiceCallData = `<입력 유형="hidden" name="siteGenServiceCallData" id="siteGenServiceCallData" value="${serviceCallData}"/>`; response.writer.print(siteGenKlDebutData); 응답.writer.print(siteGenServiceCallData); } } } } /* END 클라비요 장바구니에 추가 이벤트 추적 */ -
결제 시작 코드 조각: 결제 컨트롤러에 클라비요 코드 조각을 추가하여 결제 시작 이벤트를 추적할 때는 다음 사항을 염두에 두어야 합니다:
- 이러한 코드 조각을 추가하는 목적은 결제 흐름 내에서 장바구니 개체에 이메일 주소가 첨부되었는지 확인하고, 첨부된 경우 결제 시작 이벤트를 실행하는 것입니다. 결제 흐름에서 가능한 한 빨리 이메일 주소와 바스켓의 연관성을 파악하는 것이 중요합니다.
- 사이트 기반 결제 사용자 지정으로 인해 클라비요는 이메일 주소가 첨부된 바스켓 객체를 가장 먼저 수신할 컨트롤러를 정확히 정의할 수 없습니다.
- 결제 시 트리거되는 모든 주요 경로에 코드 스니펫을 추가하는 것이 좋습니다. 디버거를 사용하여 결제 흐름에서 이메일 주소가 장바구니에 첨부되는 시점을 정확히 식별할 수 있다면 해당 경로에만 스니펫을 추가하되, 가능한 모든 결제 경로(게스트, 로그인, 결제 중 로그인 등)에서 코드가 트리거되는지 철저히 테스트하세요.
- 결제 시 첫 번째 경로에 대한 스니펫(일반적으로 COCustomer-Start)은 다음과 같습니다. 템플릿을 렌더링하는 호출(즉, app.getView(...)) 전 아무 곳에나 삽입합니다. 이 코드조각은 다른 결제 코드조각(아래 강조 표시)과 비교했을 때 첫 번째 인수 KLCheckoutHelpers.startedCheckoutHelper 메서드를 거짓이 아닌 참으로 전달한다는 주요 차이점에 주목하세요. 아래 코드 스니펫에서 KLCheckoutHelpers.startedCheckoutHelper 메서드는 다른 결제 스니펫에서처럼 거짓이 아닌 참입니다. 이는 추적할 새 결제 시작 이벤트가 있음을 코드에 알리는 데 필수적입니다.
/* 클라비요가 결제 이벤트 추적을 시작했습니다 */. 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 클라비요 체크아웃 이벤트 추적 시작 */ - 그런 다음 app.getView(...) 호출을 업데이트하여 klid를 pdict 변수로 포함시킵니다:
app.getView({ ContinueURL: URLUtils.https('COCustomer-LoginForm').append('scope', 'checkout'), klid: KLTplVars.klid, // KLAVIYO: added 'klid: klid' }).render('체크아웃/체크아웃로그인'); - 이메일 주소가 바구니 개체에 첨부된 후 실행되는 첫 번째 경로에 다음 코드 조각을 추가해야 합니다. 확실하지 않거나 단순히 기초를 다지고 싶다면 다음 모든 경로에 이 스니펫을 추가하는 것이 좋습니다:
- 배송 시작
- COBilling-PublicStart
- COBilling-Save
- COPlaceOrder-Start
/* 클라비요가 결제 이벤트 추적을 시작했습니다 */. 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 클라비요 체크아웃 이벤트 추적 시작 */ - 템플릿을 직접 호출하는 경로(예: 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/배송/싱글배송'); -
주문 확인 스니펫을 COSummary-ShowConfirmation 컨트롤러에 추가하려면 다음과 같이 하세요: 템플릿을 렌더링하기 위해 호출하기 전에 COSummary-ShowConfirmation 컨트롤러에 다음 스니펫을 추가합니다.
/* 클라비요 주문 확인 이벤트 추적 */. 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.customerEmail) { // 상태가 신규인지 생성되었는지 확인 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 (전화) { // 참고: 클라비요는 시작 부분에 +와 국가 코드가 포함된 전화번호만 허용합니다. (예: 미국의 경우: +16465551212)가 포함된 전화번호만 허용합니다. // 사용자를 성공적으로 SMS 목록에 가입시키려면 다음을 수집해야 합니다. 국가 코드를 주문 전화번호 필드에 입력해야 합니다! 전화 = '+' + phone.replace(/[^a-z0-9]/gi, ''); if(!e164PhoneRegex.test(phone)) { if (session.custom.KLSmsSubscribe) { var logger = Logger.getLogger('Klaviyo', 'Klaviyo.core: 주문-확인'); logger.error(`SMS 사용자가 구독을 요청했지만 잘못된 전화번호를 이 제공되었습니다. 전화 번호: ${phone}`); } 전화 = null; } } if (이메일 || 전화) { klaviyoUtils.subscribeUser(email, phone); } } } } /* END Klaviyo 주문 확인 이벤트 추적 */.
이제 Site Genesis 스토어에 대한 스니펫 설정을 완료했습니다.
결제 시 동의 확인란 스니펫 추가(SG 및 SFRA)결제 시 동의 확인란 스니펫 추가(SG 및 SFRA)
- 클라비요에서 SMS를 활성화하고 발신 번호를 설정합니다.
- 결제 양식의 전화번호 필드에 국가 코드가 지원되어야 합니다.
결제 시 이메일 및 SMS에 대한 동의를 수집하려면 위의 서비스 추가 섹션에서 설명한 목록 ID 설정을 구성하는 것 외에도 원하는 위치에 동의 확인란이 표시되도록 코드 스니펫을 포함해야 합니다.
예를 들어, 결제 시 이러한 스니펫이 표시되도록 하려면 SFRA 내의 shipmentCard.isml 템플릿(앱_스토어프론트_베이스)에 배치하거나 SiteGen 내의 billing.isml 템플릿(앱_스토어프론트_코어)에 배치할 수 있습니다.
아래는 Site Genesis 및 SFRA용 ISML 스니펫이며, 특정 사이트에 가장 적합한 결제 흐름의 어느 곳에나 배치할 수 있습니다. 결제 시 동의가 Site Genesis에서 올바르게 작동하려면 위의 설정 스니펫 추가 섹션에서 참조한 주문 확인 스니펫을 포함해야 합니다.
아래 스니펫은 이메일 및 SMS에 대한 옵트인 언어가 '체크아웃'이라는 속성 리소스 번들에 포함되어 있다고 가정합니다. your.email.subscribe.resource.string.here`를 다음과 같이 바꿔야 합니다. 및 `your.sms.subscribe.resource.string.here`입니다. 를 이메일 및 SMS 옵트인 언어에 해당하는 키로 각각 입력합니다. 이 언어가 확인란 옆에 표시됩니다.
예를 들어 옵트인 언어는 다음과 같이 표시할 수 있습니다:
-
이메일
이메일 업데이트 구독 -
SMS
SMS 업데이트를 구독하세요. 이 확인란을 선택하고 위에 휴대폰 번호를 입력하면 자동 다이얼러가 보내는 메시지를 포함하여 [회사명]에서 제공한 번호로 [회사명]으로부터 마케팅 문자 메시지([프로모션 코드] 및 [장바구니 알림] 등)를 수신하는 데 동의하는 것입니다. 동의는 구매의 조건이 아닙니다. 메시지 및 데이터 요금이 적용될 수 있습니다. 메시지 빈 도는 다양합니다. 언제든지 STOP이라고 답장하거나 메시지 중 하나에 있는 수신 거부 링크(사용 가능한 경우)를 클릭하여 구독을 취소할 수 있습니다. 개인정보처리방침[링크] 및 서비스 이용약관[링크]을 확인하세요.
<isset name="KLEmailSubscribed" value="${(session.custom.KLEmailSubscribe
== true) ? 'checked' : ''}" scope="page" />
<isset name="KLSmsSubscribed" value="${(session.custom.KLSmsSubscribe == true)
? 'checked' : ''}" scope="페이지" />
<입력 유형="체크박스" id="KLEmailSubscribe" ${KLEmailSubscribed} /> ${Resource.msg('your.email.subscribe.resource.string.here',
'checkout', null)} <br />
<입력 유형="체크박스" id="KLSmsSubscribe" ${KLSmsSubscribed} /> ${Resource.msg('your.sms.subscribe.resource.string.here',
'checkout', null)}
클라비요에서 OCAPI 통합 활성화하기
엔드포인트엔드포인트
제품 카탈로그 및 과거/진행 중인 주문 데이터를 위해 SFCC와 통합하기 위해 Klaviyo는 4개의 OCAPI 엔드포인트를 사용합니다:
-
/order_search
과거 주문 데이터를 클라비요의 진행 중인 주문 이벤트와 60분마다 동기화합니다. 주문한 제품 및 주문 완료 이벤트는 세분화 및 흐름 필터링을 위한 추가 데이터를 동기화하며, 주문 확인 이벤트에서는 사용할 수 없는 향상된 개인화에 이상적입니다. 실시간 주문 확인 이메일을 받으려면 카트리지에서 주문 확인 이벤트를 사용하세요. -
/사이트
통합 설정 중에 클라비요가 데이터를 동기화할 사이트를 선택할 수 있습니다. -
/product_search
카탈로그를 클라비요에 연결하여 이메일에서 제품 추천 등의 기능을 사용할 수 있도록 합니다. -
/products/*/variations
이형 상품을 클라비요에 동기화하여 재입고 등의 기능을 사용할 수 있도록 합니다.
SFCC 측 설정
SFCC의 OCAPI와 통신하려면 먼저 SFCC에서 몇 가지 권한과 설정을 설정해야 합니다.
- https://account.demandware.com/dw/account/APIAdmin 으로 이동합니다. 를 클릭하고 클라비요용 API 클라이언트를 추가합니다. OCAPI용 무기명 토큰을 생성하려면 API 클라이언트 ID와 비밀번호가 필요합니다.
- API 클라이언트가 추가되면 관리 > 사이트 개발 > SFCC 비즈니스 관리자에서 오픈 커머스 API 설정으로 이동합니다.
- 다음 스니펫을 추가하여 API 버전과 클라이언트 ID를 교체합니다. API 버전 19.5 이상과 18.8을 지원합니다. CLIENT_ID를 이전 단계의 API 클라이언트 설정에서 생성된 API 클라이언트 ID로 바꿉니다( "xxxxxxxx-xxxx-xxxx-xxxx-xxxx-xxxxxxxx")와 같이 표시되어야 합니다. 이러한 API에 대한 설정이 이미 존재하는 경우 아래 강조 표시된 섹션만 기존 클라이언트 JSON 배열에 추가하면 됩니다.
-
-
-
Shop 유형 및 컨텍스트 Global(조직 전체) 아래에 다음 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 데이터 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":"(**)", } ] } ] }
-
Shop 유형 및 컨텍스트 Global(조직 전체) 아래에 다음 JSON을 추가하고 SHOP_API_VERSION을 OCAPI Shop API 버전으로 바꾼 다음 저장을 클릭합니다.
-
-
클라비요 측 설정
- Klaviyo 에서 왼쪽 하단에 있는 계정 이름을 클릭하고 연동 > 연동 추가로 이동합니다.
- Salesforce Commerce Cloud를 검색하고 카드를 클릭한 다음 설치를 클릭합니다.
- 랜딩 페이지에서 Salesforce Commerce Cloud에 연결을 클릭합니다.
- 다음 페이지에서 다음 정보를 입력합니다:
-
스토어 URL
웹사이트 도메인(예: example.com 또는 dev03-na01-example.demandware.net). -
인증 토큰
무기명 토큰을 요청하는 데 사용할 이 통합을 위한인증 토큰을 만듭니다. 인증 토큰은 클라이언트 ID와 비밀번호를 콜론으로 결합한 base-64 인코딩으로 생성됩니다(예: xxxxxxxx-xxxx-xxxx-xxxx-xxxx-xxxx:password). -
데이터 API 버전
SFCC 측 설정 단계에서 액세스 권한을 추가한 데이터 API 버전(예: v19_10)입니다. -
Shop API 버전
SFCC 측 설정 단계에서 액세스 권한을 추가한 Shop API 버전입니다(예 v19_10). -
카탈로그 ID
클라비요와 동기화할 SFCC 카탈로그의 ID입니다(예: storefront-catalog-en).
-
스토어 URL
- 이러한 자격 증명을 입력한 후 사이트 목록 검색 링크를 클릭하여 SFCC 인스턴스에서 사이트 목록을 검색합니다.
- 사이트가 검색된 후 이 계정과 통합할 사이트를 선택하고 설정 완료를 클릭합니다. 이제 통합에서 주문, 카탈로그 및 고객 데이터 동기화가 시작됩니다.
SFCC 통합 테스트
카트리지 설정을 테스트하려면 사이트로 이동하여 다음 지침을 따르세요:
- 주소 표시줄에 이메일 주소로 URL 매개변수 utm_email을 추가하여 직접 쿠키를 설정합니다. 예: https://www.example.com/?utm_email=your@email.com.
- 카탈로그를 검색합니다.
- 카테고리 페이지를 봅니다.
- 제품 페이지를 봅니다.
- 장바구니에 상품을 추가합니다.
- 테스트 주문을 합니다.
- 클라비요에서 애널리틱스 > 메트릭으로 이동한 다음 Salesforce 상거래 클라우드에서 제공되는 메트릭을 찾습니다.
클라비요 이메일 필드 선택기 테스트
지정된 이메일 필드가 제대로 타겟팅되었는지, 클라비요에 사용자를 올바르게 식별하고 있는지 테스트합니다:
- 시크릿 브라우저 창을 엽니다.
- 개발자 콘솔에서 다음 명령을 입력하고 Enter 키를 누릅니다:
klaviyo.isIdentified();
그러면 다음과 같은 결과가 출력됩니다:Promise {<fulfilled>: false} - 대상 필드에 이메일 주소를 입력하고 탭 키를 클릭하여 페이지의 다른 요소로 초점을 변경합니다.
- 개발자 콘솔로 돌아가서
klaviyo.isIdentified()를입력합니다; 를 다시 클릭합니다. 그러면 다음과 같은 결과가 출력됩니다:Promise {<fulfilled>: true} - 클라비요에서 애널리틱스 > 메트릭으로 이동하여 사이트 내 활성 이벤트의 활동 피드를 찾으면 입력한 이메일 주소가 나열되어 있는 것을 확인하여 클라비요가 실제로 식별 호출을 수신하고 있는지 다시 확인할 수 있습니다.
결제 이메일 필드 선택기 테스트
결제 이메일 수집 필드에서 결제 시작 이벤트가 성공적으로 트리거되는지 테스트합니다:
- 카트에 제품을 하나 이상 추가한 다음 결제를 시작합니다.
- 결제 내에서 대상 필드에 이메일 주소를 입력하고 탭 키를 클릭하여 페이지의 다른 요소로 초점을 변경합니다.
- 클라비요에서 애널리틱스 > 메트릭으로 이동하여 결제 시작 이벤트의 활동 피드를 찾으면 최근 이벤트가 추적된 것을 확인할 수 있으므로 클라비요가 실제로 식별 호출을 수신하고 있는지 다시 확인할 수 있습니다.
결과
이제 Salesforce Commerce Cloud와 클라비요를 통합하고 통합을 테스트했습니다.
추가 자료