학습 내용
클라비요의 품절 기능을 스토어에 설치하는 방법을 알아보세요. 이 기능은 웹사이트의 흐름과 버튼이라는 두 가지 주요 구성 요소로 이루어져 있습니다.
- 재입고 흐름: 누군가 재입고 알림을 구독하면 "재입고 알림 구독" 이벤트가 클라비요 프로필에서 추적됩니다. 이 이벤트는 재고 소진 흐름을 트리거하는 데 사용할 이벤트입니다. 쇼핑객은 재입고 알림을 구독하고 관심 품목이 재입고될 때까지 "재입고 지연" 에서 기다립니다.
- 웹사이트 버튼: 상품 품절 시 "사용 가능 시 알림" 버튼을 자동으로 표시하는 스니펫을 BigCommerce 테마에 추가해야 합니다. 쇼핑객이 이 버튼을 클릭하면 양식을 작성하고 재입고 알림을 구독하게 됩니다.
시작하기 전 안내 사항
이 가이드는 쇼핑객이 재입고 알림을 구독할 수 있도록 BigCommerce 스크립트 매니저에 Klaviyo의 재고 있음 스니펫을 설치하는 데 중점을 둡니다. 시작하기 전에 이러한 구독자를 캡처하고 품절 알림 프로세스를 자동화하기 위해 계정에 품절 알림 플로우를 이미 설정해 두어야 합니다.
컬렉션 페이지에서 액세스하는 빠른 보기 모달에서는 재고 있음 버튼이 지원되지 않는다는 점에 유의하세요. 버튼은 제품 페이지에만 배치해야 합니다.
스니펫은 어떻게 작동하나요?스니펫은 어떻게 작동하나요?
아래에 제공된 스니펫을 설치하는 즉시 다음이 수행됩니다:
- 쇼핑객이 제품을 검색하다가 품절된 경우, 일반적으로 표시되는 "품절" 버튼이 있는 곳에 "품절 시 알림" 버튼이 바로 표시됩니다.
- 누군가 "알림..." 버튼을 클릭하면 구매자가 상품 재입고 시 알림을 받도록 등록할 수 있는 양식이 나타납니다.
- 양식이 제출되는 즉시 "재고 있음 구독" 이벤트가 클라비요 내 해당 쇼핑객의 프로필에 추적됩니다.
- 그러면 이미 설정한 재고 있음 흐름에서 쇼핑객이 구독한 품목의 재고 가 다시 입고되면 알림이 전송됩니다.
클라비요는 클라비요 계정 내에서 재고를 추적하고 3시간마다 제품을 새로 고치고, 매 시간마다 이형 상품을 업데이트합니다. 이러한 지연으로 인해 스토어에서 품절된 제품이 아직 클라비요에 반영되지 않은 경우가 있을 수 있습니다. 스토어에 재입고된 제품이 클라비요에 반영되지 않은 경우도 있을 수 있습니다.
클라비요는 또한 이형 상품 수준에서 재고를 모니터링합니다. 즉, 쇼핑객은 특정 제품 이형 상품에 대한 알림을 수신하도록 구독할 수 있습니다. 예를 들어, 고객이 좋아하는 핑크 티셔츠의 미디엄 사이즈가 품절된 것을 발견하면 이 특정 상품을 구독할 수 있으며, 클라비요는 해당 사이즈와 색상이 재입고된 경우에만 고객에게 알림을 보냅니다.
스니펫 설치
클라비요 백스톡 스니펫을 설치하려면 스크립트 관리자에서 새 스크립트에 추가하면 됩니다.
- BigCommerce 관리자에서 스토어 첫 화면 > 스크립트 관리자로 이동합니다.
-
스크립트 만들기를 클릭합니다. 다음 설정을 사용합니다:
- 스크립트 이름입니다: 클라비요 재입고
- 페이지 내 위치: 바닥글
- 스크립트를 추가할 페이지 선택: 페이지 저장
- 스크립트 유형: 스크립트
- 스크립트 카테고리: 기능적
- 그런 다음 클라비요 퍼블릭 API 키를 사용하여 아래 스크립트를 업데이트하고 업데이트된 스크립트를 스크립트 상자에 붙여넣습니다.
- 클라비요에서 6자리의 공개 API 키를 복사할 수 있습니다. 이를 찾으려면 왼쪽 하단에서 계정 이름을 클릭한 다음 설정 > API 키로 이동합니다. 스크립트에서
퍼블릭API는 PUBLIC_API_KEY라는 텍스트를 대체해야 합니다.
<스크립트 src="https://a.klaviyo.com/media/js/onsite/onsite.js"></script> <script> var 클라비요 = 클라비요 || []; klaviyo.init({ account: 'PUBLIC_API_KEY', platform: 'bigcommerce' }); klaviyo.enable("백인스톡",{ 트리거: { product_page_text: "Notify Me When Available", product_page_class: "button", product_page_text_align: "center", product_page_margin: "0px", replace_anchor: false }, 모달: { headline: "{product_name}", body_content: "이 상품이 재입고되면 알림을 받으려면 등록하세요.", 이메일_필드_라벨: "이메일", button_label: "사용 가능하면 알려주세요", 구독_성공_라벨: "가입했습니다! 다시 돌아오면 알려드리겠습니다.", footer_content: '', additional_styles: "@import url('https://fonts.googleapis.com/css?family=Helvetica+Neue');", drop_background_color: "#000", background_color: "#fff", text_color: "#222", button_text_color: "#fff", button_background_color: "#4787ed", close_button_color: "#ccc", error_background_color: "#fcd6d7", error_text_color: "#C72E2F", 성공_배경_색: "#d3efcd", 성공_텍스트_색: "#1B9500" } }); </script> - 클라비요에서 6자리의 공개 API 키를 복사할 수 있습니다. 이를 찾으려면 왼쪽 하단에서 계정 이름을 클릭한 다음 설정 > API 키로 이동합니다. 스크립트에서
-
저장을 클릭합니다. 이제 클라비요 재입고 버튼을 스토어에 추가했습니다.
양식 및 버튼 사용자 지정
클라비요 "사용 가능 시 알림" 버튼과 양식은 다양하게 구성할 수 있습니다. 디자인 기본 설정에 따라 색상, 글꼴, 텍스트 및 기타 요소를 변경할 수 있습니다.
위의 스니펫에 포함된 기본값은 아래에 나열되어 있고 설명되어 있습니다. 업데이트하는 경우 레이블 자체가 아닌 값만 업데이트해야 합니다.
트리거 설정트리거 설정
트리거는 품목이 품절되었을 때 표시되는 버튼입니다. 이 버튼은 기본적으로 "사용 가능하면 알려주세요" 라고 표시되지만 원하는 대로 설정할 수 있습니다. 트리거의 기본 코드는 다음과 같습니다:
트리거: {
product_page_text: "Notify Me When Available",
product_page_class: 'button',
product_page_text_align: 'center',
product_page_margin: '0px',
alternate_anchor: "AddToCart",
replace_anchor: false
},
-
product_page_text
품목 품절 시 팝업되는 버튼 안에 표시되는 텍스트입니다. -
제품_페이지_클래스
이 "클래스" 는 버튼의 모양을 결정합니다. 기본값 'button' 은 이 버튼이 테마의 다른 기본 버튼과 일치하도록 합니다. -
product_page_text_align
재고 있음 버튼 내부의 텍스트 정렬(예 가운데, 오른쪽 또는 왼쪽). -
product_page_margin
버튼 주변, 텍스트와 버튼 사이에 추가되는 여백입니다. -
대체_앵커
테마에서 "장바구니에 추가" 버튼 이외의 요소를 사용하는 경우 이 텍스트를 해당 요소의 ID로 바꿉니다. -
replace_anchor
이 값을 false로 설정하면 "매진" 및 "사용 가능 시 알림" 버튼이 모두 표시됩니다. 이 옵션을 true로 설정하면 "사용 가능 시 알림" 버튼이 "품절" 버튼으로 바뀝니다.
모달 설정
모달은 상품이 재입고되면 알림을 받기 위해 버튼을 클릭하면 팝업되는 메시지 상자입니다. 다음은 조정할 수 있는 기본 설정입니다:
-
headline
팝업 상단에 표시되는 헤드라인으로, 기본적으로 BigCommerce의 {product_name} 변수를 사용하여 헤드라인을 제품 이름으로 동적으로 채웁니다. -
body_content
고객에게 해야 할 일을 안내하는 팝업 내부에 표시되는 텍스트입니다. -
이메일_필드_라벨
이메일 필드 안의 자리 표시자 텍스트입니다. -
button_label
이 팝업 양식의 "제출" 버튼 내의 텍스트입니다. -
구독_성공_라벨
누군가 팝업 양식을 성공적으로 제출하면 녹색으로 표시되는 "성공" 메시지입니다. -
footer_content
(선택 사항) 제출 버튼 닫기_레이블 아래 바닥글 에 표시할 텍스트입니다: "닫기". -
background_color
팝업 양식의 배경색, 기본값은 흰색입니다. -
text_color
팝업 양식의 텍스트 색상(기본값은 검정색)입니다. -
button_text_color
팝업 양식에 표시되는 버튼의 텍스트 색상(기본값은 흰색)입니다. -
button_background_color
양식 제출 버튼의 배경색(기본값은 파란색)입니다. -
오류_배경_색
양식 제출에 오류가 있을 때 표시되는 오류 상자의 배경색(기본값은 옅은 빨간색)입니다. -
error_text_color
양식 제출에 오류가 있을 때 표시되는 오류 메시지의 텍스트 색상(기본값은 빨간색)입니다. -
성공_배경_색
누군가 양식을 성공적으로 제출한 후 표시되는 성공 상자의 배경색(기본값은 연한 녹색)입니다. -
성공_텍스트_색
누군가 양식을 성공적으로 제출한 후 표시되는 성공 메시지의 텍스트 색상(기본값은 녹색)입니다.
고객이 마케팅에 동의하도록 유도
재고 품절 알림을 구독한다고 해서 반드시 기본 뉴스레터 목록에 등록된다는 의미는 아닙니다.
쇼핑객이 상품 재입고 시 알림을 받도록 요청했지만 정기적인 마케팅 콘텐츠를 받기 시작하면 구독을 취소할 가능성이 높습니다. 이 시나리오에서는 원하지 않는 이메일을 받은 후 조기에 수신 거부하기 때문에 이러한 쇼핑객을 충성 고객으로 육성할 수 있는 기회를 잃게 됩니다.
마케팅 이메일 수신에 동의한 회원을 확보하려면 재고 있음 양식에 이와 같은 확인란을 추가하면 됩니다:
이를 구현하려면 "klaviyo.init" 에서 목록 ID를 추가하여 스니펫에 한 가지 기본 사항을 추가해야 합니다. 섹션에 계정 ID를 입력합니다.
- "klaviyo.init" 섹션은 다음과 같이 표시됩니다:
klaviyo.init({ account: 'KLAVIYO_PUBLIC_API_KEY', list: 'YOUR_LIST_ID', platform: 'bigcommerce' }); - 이 구독자를 추가할 클라비요 목록의 6자리 ID를 YOUR_LIST_ID로 바꿉니다. 일반적으로 이 목록이 기본 뉴스레터 목록이 되어야 합니다.
- 이 추가 코드 조각(5줄 참조)은 다음과 같이 표시됩니다:
<script> var 클라비요 = 클라비요 || []; klaviyo.init({ account: 'KLAVIYO_PUBLIC_API_KEY', list: 'YOUR_LIST_ID', platform: 'bigcommerce' }); klaviyo.enable('backinstock',{ 트리거: { ... }, 모달: { ... } }); </script> - 확인란에 표시되는 내용을 사용자 지정하려면 "모달" 섹션에 표시하려는 텍스트를 추가하면 됩니다.
모달: { newsletter_subscribe_label: "Add me to your email list." ... }기본적으로 이 확인란은 "이메일 목록에 추가(" )라고 표시됩니다. 옵트인한 사람들이 마케팅 이메일을 받게 된다는 사실을 알 수 있도록 이 문구를 매우 명확하게 작성해야 합니다.
-
이 상자의 선택 또는 선택 해제 여부를 제어하려면 "모달" 섹션에 "subscribe_checked" 를 매개변수로 추가하면 됩니다. 참은 기본적으로 확인란이 선택되어 있고, 거짓은 선택되지 않은 상태로 사용자가 수동으로 선택해야 합니다.
모달: { subscribe_checked: true ... }
결과
이제 클라비요의 재고 있음 기능을 BigCommerce 스토어에 설치했습니다.
추가 리소스추가 리소스