BigCommerce 주문 확인 페이지에 가입 양식을 삽입하는 방법

학습 내용

결제 프로세스를 완료한 후 고객으로부터 추가 정보를 수집할 수 있도록 BigCommerce 확인 페이지에 가입 양식을 삽입하는 방법을 알아보세요. 이러한 최근 고객은 이미 브랜드에 관심이 있으므로, 확인 페이지는 이들과 더 깊이 소통할 수 있는 좋은 기회예요.

시작하기 전에 알아야 할 것

BigCommerce와 연동 하고 Klaviyo 온사이트 JavaScript 자동 추가 설정을 선택했는지 확인해 주세요.

양식 만들기

가입 양식을 만들고 확인 페이지에 임베드하여 결제 후 고객에게 관련 질문을 할 수 있어요. 예를 들어, 고객이 제품을 얼마나 자주 사용하는지, 또는 구매에 관심이 있을 만한 잠재적 신제품이 무엇인지 알아보기 위한 질문을 할 수 있어요.

가입 양식을 만들려면:

1. Klaviyo에서 Sign-up forms(가입 양식) > Create Sign-up form(가입 양식 만들기) > Build from scratch(처음부터 만들기)로 이동해 주세요.
2. 표시되는 메뉴에서 양식 이름을 지정하고, 새 구독자가 제출할 리스트를 선택하세요.
3. 양식 유형으로 임베드를 선택해 주세요.
   

4. 저장 및 디자인을 클릭합니다.
5. 그러면 양식 편집기로 이동하며, 다음 스타일을 편집할 수 있어요:
   • 스타일: 양식 또는 입력란 스타일, 글꼴 유형 등 브랜드에 맞게 양식의 모양을 편집하세요. 텍스트를 클릭한 다음 기본 언어를 자체 문구로 바꿔서 어떤 텍스트든 편집할 수도 있어요.
   • 블록 추가: 여기에서 질문을 위한 텍스트 상자나 생일을 위한 날짜 필드 등, 정보를 수집하기 위해 양식에 콘텐츠를 추가할 수 있어요. 추가하는 각 필드에 프로필 속성을 설정하고, 너무 많은 질문으로 고객에게 부담을 주지 않도록 해 주세요.
   • 타겟팅 및 행동: 데스크톱, 모바일 또는 둘 다에서 양식이 표시되도록 할지 선택해 주세요. 양식을 모든 방문자에게 표시 또는 기존 Klaviyo 프로필에는 표시하지 않기 로 설정해 두세요.
6. 메뉴 모음에서 성공을 선택해 누군가가 양식을 제출한 후 표시되는 페이지를 편집하세요.
7. 양식 디자인이 만족스러우면 게시를 클릭하세요.
8. 표시되는 모달에서 임베드 코드를 복사해 붙여넣을 수 있도록 준비해 주세요.
   

9. 게시를 클릭해 주세요.

사이트 코드에 임베드 코드를 붙여넣기 전까지는 사이트에 양식이 표시되지 않습니다.

고객 경험이 원활하도록 해당 목록의 옵트인 설정을 확인해 주세요. 리스트가 이중 옵트인인 경우 확인 페이지를 편집하는 것이 좋습니다. 모든 Klaviyo 목록은 기본적으로 이중 옵트인으로 설정되어 있어요.

BigCommerce 사이트에 임베드 추가

1. BigCommerce 관리자로 이동합니다.
2. Storefront > Script 매니저로 이동한 다음 스크립트 만들기(Create a Script)를 클릭하세요.
3. 스크립트 이름을 지정하고 다음과 같이 설정해 주세요:
   • 위치: Head
   • 설명(선택 사항): 스크립트의 목적을 설명하세요.
   • 스크립트가 추가될 페이지: 주문 확인
   • 스크립트 유형: 스크립트
     

4. 스크립트 내용을 삭제한 다음, 확인 페이지에 klaviyo.js를 추가하려면 대신 아래 코드를 붙여넣어 주세요. 이전에 웹사이트에 klaviyo.js를 설치한 적이 있더라도 이 작업을 해야 해요:
   

  <script src="https://static.klaviyo.com/onsite/js/PUBLIC_API_KEY/klaviyo.js" async=""></script>
  <script>
     document.addEventListener("DOMContentLoaded", function() {       var elem = document.createElement('div');
     elem.className = 'klaviyo-form-FORM_ID'
     document.body.appendChild(elem);
     });</script>

1. 위의 스니펫에서 PUBLIC_API_KEY을(를) 사이트의 공개 API 키로 바꾸세요.
2. 위 스니펫에서 FORM_ID을(를) 양식 ID로 바꾸세요. 양식 ID를 찾으려면 Klaviyo 계정에서 임베드된 양식으로 이동하세요. 양식 ID는 URL 끝에 있는 6글자 코드예요.
   

3. 스크립트의 모든 세부 정보를 입력했으면 저장을 클릭합니다.

이제 누군가 주문을 하면 페이지 하단에 임베드 양식이 표시돼요. 테마에 따라 스타일 섹션에서 양식의 테두리, 패딩 또는 크기를 편집해 주문 확인 페이지의 디자인과 느낌에 맞추는 것이 좋을 수 있어요. 변경한 내용이 반영되는지 확인하려면 변경 사항을 게시해 주세요.

다음 단계

임베드된 양식으로 응답 수집을 시작하면, 각 제출 항목은 고객 프로필에 사용자 지정 속성으로 저장되며 세그먼트, 플로우, 이메일 템플릿에서 사용할 수 있어요.

응답을 기반으로 구매 후 경험을 분기할 수 있어요. 또한 이 데이터를 기반으로 환영 이메일 시리즈를 분기하거나, 캠페인을 보낼 관련 세그먼트를 만들 수도 있어요. 예를 들어, 새 마스카라를 출시하기로 했다고 해볼게요. 이 임베드된 양식에서 제품 관심 데이터를 수집하고 있으므로, 제품 출시 시 마스카라에 관심이 있다고 알려준 모든 사람에게 알림을 보낼 수 있어요.

추가 자료