웹사이트에 가입 양식을 삽입하는 방법

학습 내용

임베드 코드를 전자상거래 스토어, 블로그 또는 사이트의 테마 파일이나 페이지 편집기에 붙여넣음으로써 웹사이트에 임베드된 양식을 추가하는 방법을 알아보세요. 임베드된 양식을 표시할 위치 사이트 구축 방식에 따라 코드를 붙여넣을 위치가 달라집니다.

이러한 지침은 임베드된 양식에만 적용되며 팝업, 플라이아웃 또는 전체 페이지 양식에는 필요하지 않습니다. 임베드 코드를 사이트에 붙여넣은 후에는 스니펫 업데이트에 대한 걱정 없이 Klaviyo 내에서 양식을 편집하고 변경 사항을 게시할 수 있습니다.

각 통합을 통해(또는 Shopify의 경우 앱 임베드를 통해) Klaviyo.js라는 코드 스니펫을 동기화하는 Shopify, BigCommerce, Magento 또는 WooCommerce와 통합되지 않은 경우, 먼저 사이트에 Klaviyo.js를 설치해야 양식을 게시할 수 있습니다. Klaviyo.js를 사용하면 사용자 활동 추적도 가능하기 때문에 액티브 온 사이트 추적 코드 스니펫이라고도 하며, 자세한 내용은 웹 추적 가이드에서 확인할 수 있습니다. 

새 임베드 양식 만들기

1. 가입 양식 > 가입 양식 만들기 > 새로운 가입 양식 만들기로 이동합니다.
2. 양식의 이름을 지정하고 구독자를 추가할 목록을 선택합니다.
3. 양식 유형으로 임베드를 선택합니다.
4. 저장 후 디자인 계속하기를 클릭합니다 .
   
5. 편집기를 사용하여 양식의 스타일을 지정하고 원하는 양식 필드를 추가합니다.

임베드 코드 받기

원하는 방식으로 양식의 스타일을 지정한 다음에는, 양식의 임베드 코드를 다음의 두 위치에서 검색할 수 있습니다.

1. 타겟팅 & 행동 섹션에서:
   
2. 임베드된 양식을 게시할 때, 사이트에 임베드 코드를 붙여넣을지 묻는 모달이 표시됩니다.
   

그런 다음 양식을 게시하고 코드 스니펫을 복사하여 사이트에 붙여넣습니다. 

사이트에 코드 붙여넣기

임베드된 양식을 표시할 위치, 그리고 통합에 따라 사이트 내 코드를 붙여넣을 위치가 달라집니다. 아래에 몇 가지 사용 사례에 대한 간략한 설명이 나와 있습니다. 아래로 스크롤하여 사용 중인 플랫폼(예: BigCommerce, Shopify, WooCommerce, 그 외 플랫폼)에 대한 구체적인 임베드 지침을 확인합니다.

BigCommerce 

BigCommerce 바닥글 양식을 Klaviyo 양식으로 교체하거나 그 외 사이트 위치에 Klaviyo 임베디드 양식을 추가하려는 경우, 아래에 제시된 여러 옵션을 사용할 수 있습니다. 

페이지 편집기 사용

1. 스토어프론트 > 웹페이지로 이동합니다.
2. 임베드된 양식을 표시할 페이지를 선택합니다.
3. 작업 메뉴에서 편집을 선택합니다.
   
4. 페이지 콘텐츠 섹션에서 HTML을 클릭하여 소스 코드 편집기를 엽니다.
5. 양식의 임베드 코드를 붙여넣습니다.
6. 업데이트를 클릭하고 변경 사항을 저장합니다.

테마 편집기 사용

1. BigCommerce 스토어에 로그인합니다.
2. 스토어프론트 > 내 테마로 이동합니다.
3. 현재 테마 섹션에서 사용자 정의를 클릭합니다. 
4. 임베드된 양식을 추가할 페이지를 선택합니다.
5. 페이지에서 양식을 추가할 섹션을 찾습니다.
6. HTML 블록을 끌어다 놓습니다.
7. 양식의 임베드 코드를 블록 편집기에 붙여넣습니다.
8. 블록을 저장합니다.
9. 변경 사항을 저장합니다.
   
   

테마 파일에 삽입 

1. 스토어프론트 > 내 테마로 이동합니다.
2. 현재 테마 섹션의 고급 드롭다운을 클릭합니다.
3. 테마 파일 편집을 클릭합니다.
   
   
   1. 테마 파일 편집 옵션이 표시되지 않는 경우 
      1. 테마 사본 생성
      2. 사본 편집
4. 양식을 삽입할 섹션의 소스 코드가 포함된 파일로 이동합니다.
5. 코드에서 양식이 표시되어야 하는 섹션을 찾습니다.
6. 임베드 코드를 붙여넣습니다.
7. 변경 사항을 저장합니다. 

Shopify

모든 테마의 Shopify 바닥글

아래 단계를 따라 임베드된 양식을 사이트 바닥글에 배치하세요. 이 지침은 Shopify 빈티지 테마와 Shopify 2.0 테마 모두에 적용됩니다. 

1. Shopify 관리자로 이동합니다.
2. 온라인 스토어 > 테마로 이동합니다.
3. 점 3개 아이콘을 클릭한 다음 코드 편집을 선택합니다.
4. footer.liquid 테마 파일을 엽니다.
5. 양식을 표시할 영역을 찾습니다.
   1. 아래 예시에서는 가입 양식이 사이트의 저작권 정보 위에 표시됩니다.
      
6. 양식 임베드 코드를 붙여넣습니다.
7. 저장을 클릭합니다.

이제 사이트 바닥글에 양식이 표시됩니다.

빈티지 테마를 위한 Shopify 비바닥글

바닥글 이외의 위치에 임베드된 양식을 Shopify 사이트(빈티지 테마 사용)에 포함하려면 다음의 단계를 따르세요. 

1. Shopify 관리자로 이동합니다.
2. 온라인 스토어 > 테마로 이동합니다.
3. 사용자 지정 > 섹션 추가를 클릭합니다.
4. 표시되는 내용에 따라 다음 옵션 중 하나를 선택합니다.
   • 사용자 정의 콘텐츠
     1. 이 블록 추가
     2. 생성된 기본 콘텐츠 삭제
   • 사용자 정의 HTML  
5. 콘텐츠 추가 > 사용자 정의 HTML을 클릭합니다.
6. 임베드 코드를 붙여넣습니다.
7. 저장을 클릭합니다.

2.0 테마를 위한 Shopify 비바닥글

바닥글 이외의 위치에 임베드된 양식을 Shopify 사이트(2.0 테마 사용)에 포함하려면 다음의 단계를 따르세요.

1. Klaviyo에서 임베드된 가입 양식을 생성하세요. 스타일 섹션에서 양식 유형을 임베드 형식으로 설정해야 합니다. 팝업, 플라이아웃 또는 전체 페이지 양식에서는 작동하지 않습니다. 
2. 양식 ID를 저장합니다.
   양식 ID를 찾으려면 Klaviyo 계정에서 임베드된 양식으로 이동합니다. 양식 ID는 URL 끝에 있는 6글자 코드입니다.
3. Shopify 관리자로 이동합니다.
4. 온라인 스토어 > 테마로 이동합니다.
5. 사용자 정의를 클릭합니다.
6. 양식을 추가하려는 페이지 템플릿(예: 홈페이지)으로 이동합니다.
7. 섹션 추가를 클릭하고 아래로 스크롤하여 Klaviyo 임베디드 양식을 앱에서 찾습니다.
   
   
8. 새 섹션을 클릭하고 텍스트 상자에 임베드된 양식 ID를 추가합니다. 
   
9. 저장을 클릭합니다.
10. 이제 임베드된 양식이 페이지 템플릿에 추가되었으며 필요에 따라 페이지에서 양식 위치를 바꿀 수 있습니다.

모든 테마의 Shopify 비밀번호 페이지

아래 단계를 따라 임베드된 양식을 사이트의 비밀번호 페이지에 배치하세요. 이 지침은 Shopify 빈티지 테마와 Shopify 2.0 테마 모두에 적용됩니다. 

가입 양식을 활성화하려면 Klaviyo.js라는 코드 스니펫을 비밀번호 페이지에 별도로 설치해야 합니다. 이는 password-content.liquid 파일(또는 Shopify 2.0의 password.liquid 파일)이 통합에서 자동으로 설치되는 theme.liquid 파일을 활용하지 않기 때문입니다. Klaviyo.js 설치 지침은 아래에 포함되어 있습니다.

1. Shopify 관리자로 이동합니다.
2. 온라인 스토어 > 테마로 이동합니다.
3. 작업 > 코드 편집을 클릭합니다.
4. 빈티지 테마의 경우 password-content.liquid 테마 파일을, 2.0 테마의 경우 password.liquid 파일을 엽니다.
5. 아래의 Klaviyo.js 코드 스니펫을 복사하여 파일 하단에 붙여넣습니다.
   

   <script type="text/javascript" async="" src="https://static.klaviyo.com/onsite/js/PUBLIC_API_KEY/klaviyo.js"></script>

6. 스니펫에 PUBLIC_API_KEY가 표시되면 이를 Klaviyo 계정의 공개 API 키로 바꿔야 합니다. 공개 API 키를 찾으려면 설정 > API 키로 이동하세요.
   
7. 기본 Shopify 가입 양식을 다음과 같이 댓글 태그로 둘러싸서 사이트에 표시되지 않도록 합니다.
   1. 태그를 시작하려면 {% comment %}을(를) 추가합니다. 
   2. 태그를 닫으려면 {% endcomment %}을(를) 추가합니다.
      
8. 주석 처리된 Shopify 임베디드 양식 위에 Klaviyo 임베디드 양식 코드를 붙여넣습니다.
9. 저장을 클릭합니다. 

이제 사이트의 비밀번호 페이지에 Klaviyo 임베드 양식이 표시됩니다.

Klaviyo.js를 설치하면 계정에 게시된 모든 팝업 및 플라이아웃 양식이 이 페이지에 표시되며, 특정 URL에 표시되지 않도록 지정하지 않는 한 변동 사항이 없습니다. 

WooCommerce

1. WooCommerce 대시보드를 엽니다.
2. 사이트 사용자 정의를 클릭합니다.
3. 임베드된 양식을 추가할 페이지로 이동합니다.
4. 위젯 추가 > 사용자 정의 HTML을 클릭합니다.
5. 임베드 코드를 콘텐츠 섹션에 붙여넣습니다.
6. 게시 버튼을 클릭하여 변경 내용을 게시합니다.

기타 플랫폼 

Klaviyo 임베드 양식이 작동하려면 페이지에 두 개의 코드 스니펫(Klaviyo의 자바스크립트와 양식의 임베드 코드)이 있어야 합니다. Klaviyo의 여러 기본 통합(예: Magento, Magento 2)은 Klaviyo.js를 사이트에 자동으로 삽입합니다. 플랫폼의 통합 설정을 확인하여 이 옵션이 선택되어 있는지 확인하세요. 

플랫폼에 기본 Klaviyo 통합 기능이 없는 경우, 이 지침에 따라 .js를 수동으로 추가하세요. 

Klaviyo.js를 설치하고 나면 양식의 임베드 코드를 사이트의 HTML/소스 코드에 붙여넣을 수 있습니다. 표시하고 싶은 위치 어디에나 가능합니다. 사이트에서 코드를 편집하는 작업이 익숙하지 않아 전문가의 도움을 받고 싶다면 Klaviyo 파트너에게 문의하세요. 

추가 리소스

• 가입 양식으로 시작하기
• Klaviyo.js를 설치하여 가입 양식을 게시하는 방법
• 주문 확인 페이지에 양식을 삽입하는 방법
• BigCommerce 사이트에 Klaviyo 임베디드 양식을 추가하는 방법