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

학습 내용

고객이 결제 프로세스를 완료한 후 추가 정보를 수집할 수 있도록 확인 페이지에 가입 양식을 삽입하는 방법을 알아보세요. 이러한 신규 고객은 이미 브랜드에 관심이 있는 고객이므로 확인을 통해 더 많은 참여를 유도할 수 있는 좋은 기회입니다.

주문 확인 페이지에 양식을 삽입하는 정확한 단계는 전자상거래 플랫폼에 따라 크게 다르지만, 이 과정에는 짧은 코드 조각으로 스토어의 코드 파일을 업데이트하는 것이 포함됩니다. 이 가이드에서는 두 가지 전자상거래 플랫폼에서 이를 수행하는 방법에 대해 간략하게 설명했습니다:

• Shopify
• BigCommerce

시작하기 전 안내 사항

Shopify 또는 BigCommerce를 사용 중이거나 Magento 또는 WooCommerce용 클라비요 플러그인이 있는 경우 아래 섹션에서 양식 작성을 시작할 준비가 된 것입니다.

그러나 기본적으로 클라비요와 통합되지 않는 전자상거래 플랫폼을 사용하는 경우  사이트에 대해 사이트에서 추적 활성화를 사용하도록 설정했는지 확인하세요. 위에 나열된 플랫폼의 경우 자동으로 수행되지만 다른 플랫폼의 경우 수동으로 수행해야 합니다. 이를 통해 클라비요가 사이트에 가입 양식을 게시할 수 있습니다. 

양식 작성

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

가입 양식을 작성하려면:

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

사이트 코드에 임베드 코드를 붙여넣을 때까지 양식은 사이트에 표시되지 않습니다. 다음 두 섹션에서는 Shopify 사이트와 Bigcommerce 사이트의 코드를 붙여넣는 방법에 대해 설명합니다.

Shopify 사이트에 임베드 추가

1. Shopify 스토어의 백엔드로 이동합니다.
2. 설정으로 이동 > 결제 > 주문 처리.
3. 추가 스크립트 아래에 임베드 코드를 붙여넣습니다.

양식이 실시간으로 어떻게 표시되는지 테스트하려면 샘플 주문을 생성하고 결제 프로세스를 완료합니다. 스토어 테마에 따라 양식 편집기로 돌아가서 원하는 모양과 느낌을 약간 조정해야 할 수도 있습니다. 변경한 후에는 다시 게시해야 하지만 게시 후 모든 수정 사항이 자동으로 적용되므로 임베드 코드를 다시 추가할 필요는 없습니다.

이 예제에서는 양식에 흰색 테두리를 추가하여 "감사합니다" 메시지와 양식 자체 사이에 더 많은 여백을 두었습니다. 

Bigcommerce 사이트에 임베드 추가하기

1. Bigcommerce 관리자로 이동합니다.
2. 스토어 프론트 > 스크립트 관리자로 이동하여 스크립트 생성을 클릭합니다.
3. 스크립트의 이름을 지정하고 다음을 사용하여 스크립트를 구성합니다:
   • 위치: Head
   • 설명(선택 사항): 스크립트의 목적을 설명합니다.
   • 스크립트가 추가될 페이지: 주문 확인
   • 스크립트 유형: 스크립트
     
4. 스크립트 내용을 삭제하고 대신 다음 코드를 붙여넣어 확인 페이지에 klaviyo.js를 추가합니다. 이전에 웹사이트에 klaviyo.js를 설치한 경우에도 이 작업을 수행해야 합니다:
   

     <스크립트 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>

5. 위의 코드조각에서 PUBLIC_API_KEY를 사이트의 공개 API 키로 바꿉니다.
6. 위의 스니펫에서 FORM_ID를 양식의 ID로바꿉니다 . 양식 ID를 찾으려면 클라비요 계정에서 임베드된 양식으로 이동합니다. 양식 ID는 URL 끝에 있는 6글자 코드입니다.
   
7. 스크립트에 대한 모든 세부 정보를 입력했으면 저장을 클릭합니다 .

이제 누군가 주문한 후 페이지 하단에 임베드된 양식이 표시됩니다. 테마에 따라 스타일 섹션에서양식의 테두리, 패딩 또는 크기를 편집하여 주문 확인 페이지의 모양과 느낌과 일치하도록 할 수 있으며, 변경 사항을 게시하여 반영된 내용을 확인할 수 있습니다.

다음 단계

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

응답을 기반으로 구매 후 경험을 세분화할 수 있습니다. 이 데이터를 기반으로 환영 시리즈를 분기하거나 관련 세그먼트를 만들어 캠페인을 보낼 수도 있습니다. 예를 들어 새로운 마스카라를 출시하기로 결정했다고 가정해 보겠습니다. 이 임베디드 양식에서 제품 관심도 데이터를 수집하고 있으므로 제품 출시 시 마스카라에 관심이 있다고 말한 모든 사용자에게 알림을 보낼 수 있습니다.

추가 리소스

• 가입 양식으로 시작하기
• 웹사이트에 가입 양식을 삽입하는 방법