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

학습 내용

웹사이트의 특정 페이지나 위치(예: 바닥글)에 임베드 가입 양식을 삽입하는 방법을 알아보세요. 쇼핑객이 브랜드에 관심을 갖고 자세히 알아보려 할 때 가입을 간편하게 유도할 수 있습니다. 사이트 바닥글에 가입 양식을 삽입해 게시된 다른 양식과 함께 작동하도록 설정하는 것은 리스트 성장을 최적화하기 위한 Klaviyo 모범 사례예요.

사이트에 임베드 양식을 추가하려면 다음과 같이 해야 합니다.

1. Klaviyo에서 새 임베드 양식을 만들고 사용자 정의합니다.
2. 양식을 게시한 다음, 임베드 코드를 복사해 주세요.
3. 아래에서 사용 중인 플랫폼에 대한 지침을 따라 사이트에 양식을 추가해 주세요.

시작하기 전에 알아야 할 것

가입 양식을 만들기 전에 웹사이트에서 가입 양식 기능이 활성화되어 있는지 확인하세요. 이렇게 하면 Klaviyo에 게시된 양식이 사이트에 표시되고 데이터가 Klaviyo로 동기화됩니다.

임베드 양식이 작동하려면 다음과 같이 해야 합니다.

• 온사이트 트래킹(Klaviyo.js) 가입 양식 기능을 활성화할 수 있도록 사이트에 설치돼요.
• 원하는 위치에 표시되도록 배치한 양식 임베드 코드, 또는 Shopify에서 Klaviyo Embedded Form 앱 블록에 추가한 양식 ID입니다.

임베드 코드 붙여넣기는 임베드 양식마다 고유하게 작동합니다. 팝업, 플라이아웃 및 전체 페이지 양식은 코드를 붙여넣을 필요가 없으며 Klaviyo의 양식 빌더에서 직접 게시할 수 있어요.

2024년 12월 6일부터 Klaviyo는 보다 정확하게 참여 유도를 측정하기 위해 임베드 양식의 조회수 계산 방식을 개선했습니다. 임베드 양식의 조회수는 사용자의 뷰포트에 양식이 표시될 때만 기록됩니다. 이 변경으로 조회수가 눈에 띄게 달라지고 제출률이 증가할 수 있으며, 특히 사이트 바닥글에 임베드된 양식에서 그 영향이 두드러질 수 있어요. 방문자가 스크롤을 충분히 내려 양식이 뷰포트에 부분적으로라도 들어와야만 집계되기 때문입니다.

사이트에 임베드 양식 추가하기

Shopify, BigCommerce 또는 WooCommerce에서 제공하는 가입 양식을 사용 중이라면, 연동이 원하는 Klaviyo 목록에 구독자가 동기화되도록 설정되어 있는지 확인해 주세요. 이미 구독자를 올바른 목록으로 보내고 있다면 해당 양식을 교체할 필요는 없지만, 다른 목록에서 구독자를 수집하려면 Klaviyo 삽입 양식을 만들 수 있어요.

Klaviyo에서 새 임베드 양식을 만들고 사용자 정의하기

1. Klaviyo의 탐색에서 가입 양식을 선택해 주세요.
2. 양식 만들기를 선택합니다. 채널 선택기가 표시되면 이름을 입력하고 웹을 선택한 다음 생성을 클릭해 양식 라이브러리를 여세요. 라이브러리에서 다음 중 하나를 할 수 있어요:
   • 양식 라이브러리에서 사전 구축된 템플릿을 사용자 지정하세요. 양식 스타일을 열고 임베드를 선택해 임베드 양식 템플릿을 표시하세요. 원하는 템플릿을 선택하세요.
   • 빈 양식 만들기를 선택하여 빈 양식으로 시작하세요.
3. 열리는 패널에서 양식을 설정해 주세요:
   • 양식 이름을 입력하거나 확인해 주세요.
   • 양식에서 수집하는 각 채널에 대해 구독자 목록을 선택해 주세요.
   • 빈 양식으로 시작했다면 양식 유형으로 임베드를 선택해 주세요.
     

4. 템플릿을 사용하려면 양식 만들기를 클릭하세요. 빈 양식을 사용하려면 저장 및 디자인을 클릭합니다.
5. 편집기를 사용하여 양식의 스타일을 지정하고 원하는 블록이나 입력란을 추가합니다. 양식을 사용자 지정하는 동안의 지침은 가입 양식 시작하기를 참조하세요.
   

1. 양식이 만족스러우면 차단 경고를 모두 해결해 주세요. 게시 또는 예약을 클릭하고 지금 게시를 선택한 다음 지금 게시를 클릭하세요. 양식은 Klaviyo에 게시되지만, 방문자가 볼 수 있으려면 아래에 설명된 대로 웹사이트에도 추가해야 해요.
2. 양식이 게시되었습니다! 인 경우 창이 나타나면 복사를 클릭하여 임베드 코드를 클립보드에 복사해 주세요. 이 창이 표시되지 않으면 아래 편집기 경로를 사용해 코드를 복사하세요.
   

편집기에서 임베드 코드를 복사하려면 타기팅 & 동작 > 디스플레이를 선택하세요. 임베드 코드 아래의 스니펫을 복사하세요.

사이트에 임베드 양식 추가하기

Klaviyo에 양식을 게시하고 임베드 코드를 복사한 후 아래의 플랫폼 안내에 따라 원하는 위치(예: 테마 파일 또는 특정 페이지)에 양식을 추가해 주세요. Shopify의 Klaviyo Embedded Form 앱 블록에서는 전체 스니펫 대신 코드에서 양식 ID를 사용해 주세요.

아래 리스트에서 사용 중인 플랫폼을 찾은 다음 그 아래에 링크된 문서로 이동하여 해당 플랫폼에 임베드 양식을 추가하는 보다 구체적인 가이드를 확인하세요.

플랫폼이 표시되지 않으면 “기타 플랫폼” 글머리 기호를 참조하세요.

• BigCommerce
  BigCommerce의 경우 표시할 사이트의 파일에 임베드 코드를 붙여넣습니다.
  • BigCommerce 사이트에 임베드 코드 추가로 이동합니다.
• Shopify
  Shopify의 경우 페이지 템플릿에 Klaviyo Embedded Form 앱 블록을 추가하고 임베드 코드에서 양식 ID를 복사해 붙여넣어 주세요. 예를 들어 <div class="klaviyo-form-ABC123"></div>에서 양식 ID는 ABC123입니다.
  • Shopify 사이트에 임베드 코드 추가로 이동합니다.
• Square
  Square의 경우 Square Online 사이트 편집기에서 임베드 코드 섹션을 추가한 다음, 양식이 표시되길 원하는 위치에 임베드 코드를 붙여넣으세요.
  • Square 사이트에 임베드 코드 추가로 이동합니다.
• WooCommerce
  WooCommerce의 경우 사이트의 HTML에 임베드 코드를 붙여넣어요.
  • WooCommerce 사이트 바닥글에 임베드 코드 추가로 이동합니다.
• 기타 플랫폼
  위에 나열된 플랫폼이 아니거나 Klaviyo와 기본적으로 연동되지 않는 사용자 지정 연동을 사용하는 경우, 임베드 양식이 작동하려면 사이트에 2개의 코드 조각이 붙여넣어져 있는지 확인해야 해요:
  
  • 온사이트 트래킹(Klaviyo.js라고도 함)을 통해 가입 양식 기능을 활성화합니다.
    • 연동 시 여러 플랫폼(Wix, PrestaShop, Magento 1 및 2 등)에서 사이트에 온사이트 트래킹을 자동으로 추가합니다. Klaviyo에서 플랫폼의 연동 설정을 확인하여 이 옵션이 선택되어 있는지 확인하세요.
      • 플랫폼에 기본 Klaviyo 연동 기능이 없는 경우 수동으로 온사이트 트래킹을 추가해야 합니다.
  • 특정 양식의 임베드 코드
    • 온사이트 트래킹이 활성화되면 양식의 임베드 코드를 사이트의 HTML/소스 코드에 표시할 위치(예: 바닥글)에 붙여넣어야 합니다.
      • 양식의 삽입 코드를 복사하려면 양식 편집기에서 타겟팅 & 동작 > 표시를 선택한 다음 삽입 코드 아래의 스니펫을 복사하세요.

다음 단계

Klaviyo에서 임베드 양식을 게시하고, 플랫폼의 안내에 따라 사이트에 추가한 다음, 변경 사항을 저장했다면 웹사이트로 이동해 페이지를 새로 고쳐 주세요.

임베드 양식이 사이트에서 선택한 위치에 표시되어야 해요.

1. 테스트 연락처 정보를 사용해 양식을 제출해 주세요. 이 양식에서 이메일 주소를 수집하는 경우, 이전에 이 양식에 사용한 적 없는 주소를 사용해 주세요.
2. 이메일 이중 옵트인의 경우, 확인 이메일을 사용하여 구독을 확인해 주세요. 필요한 확인을 모두 완료한 후, 양식에 대해 선택한 구독자 목록에 추가되었는지 확인해 주세요.

임베드 양식 문제 해결

임베드 양식이 Klaviyo에 있지만 사이트에 표시되지 않는 경우 다음 문제 해결 팁을 참조하세요.

• 브라우저 캐시를 삭제한 다음 페이지를 새로고침해 주세요.
• 웹사이트가 Klaviyo와 제대로 연동되어 있고 사이트도 라이브 상태인지 확인합니다.
• 웹사이트에서 가입 양식이 활성화 되어 있는지 확인해 주세요(이는 온사이트 트래킹을 활성화하는 것과 동일합니다).
• 양식의 임베드 코드를 추가했거나(Shopify의 경우 양식 ID를 추가했거나) 웹사이트 변경 사항을 저장했는지 확인해 주세요.
• Klaviyo의 가입 양식 편집기에서 타겟팅 및 동작 섹션으로 이동하여 다음을 검토합니다.
  • 표시 섹션에서 다음을 확인합니다:
    • 사이트에 붙여넣은 임베드 코드가 Klaviyo에서 제공한 코드와 일치하거나, Shopify 앱 블록에 일치하는 폼 ID가 포함되어 있어요.
    • Klaviyo의 기기 설정이 양식을 보는 데 사용하는 기기에 해당합니다.
  • 타겟팅 섹션에서 다음을 확인합니다.
    • 양식의 오디언스 설정을 충족합니다
    • 양식은 현재 보고 있는 URL에 표시되도록 설정되어 있으며 지정된 UTM 매개 변수를 포함합니다.
    • 사용자의 위치가 양식에 구성된 위치 타겟팅 설정 중 하나와 일치해요.
    • Shopify의 경우 장바구니가 양식에 구성된 모든 장바구니 콘텐츠 요구 사항을 충족합니다.
• 해당 양식이 신규 방문자에게 표시될 수 있다면, 새 시크릿(비공개) 창에서 테스트를 다시 실행해 보세요. 양식이 기존 프로필, 구독자 또는 리스트/세그먼트의 멤버로 제한되어 있다면, 해당 조건을 충족하는 프로필로 Klaviyo에서 인식되는 브라우저를 사용하세요.
• Klaviyo 계정 1개만 사이트와 연동되어 있는지 확인합니다. 연동에 대해 자세히 알아보세요.

양식이 표시되지 않는 다른 잠재적 이유

• 사이트에 커스텀 CSS가 있으면 양식 스타일이 덮어씌워지거나 양식이 숨겨질 수 있어요. 개발자에게 브라우저의 개발자 도구를 사용하여 사이트의 코드를 검사하고 문제를 파악하게 하거나 지원 팀에 문의하도록 하세요.
• 단일 페이지 애플리케이션('SPA') 사이트를 사용하는 경우 설정으로 인해 양식이 간헐적으로 표시될 수 있습니다. 개발자에게 도움을 요청하세요.

추가 자료