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

학습 내용

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

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

1. Klaviyo에서 새 임베드 양식을 만들고 사용자 정의합니다.
2. 게시 모달에서 양식의 임베드 코드를 복사합니다.
3. 임베드 코드를 사이트의 파일에 붙여넣습니다.

시작하기 전 알아둘 사항

가입 양식을 만들기 전에 Klaviyo 계정에 가입 양식 기능이 활성화되어 있는지 확인하세요. 활성화되어 있어야 Klaviyo에 게시된 양식이 사이트에 올바르게 표시되고 필요한 모든 데이터가 동기화됩니다. 

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

• 가입 양식 기능이 활성화되어 있어야 합니다. 이를 흔히 '온사이트 트래킹'이 설치되어 있다고 합니다.
• 사이트에서 양식을 표시할 위치에 임베드 코드를 붙여넣습니다.

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

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

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

Shopify, BigCommerce, WooCommerce를 사용하는 경우 플랫폼의 임베드 양식을 통해 가입한 구독자는 연동을 통해 Klaviyo 리스트에 자동으로 추가됩니다. 따라서 구독자를 다른 리스트로 수집하려는 경우 Klaviyo에서 임베드 양식을 만들 수 있지만, 연동의 임베드 양식을 Klaviyo의 양식으로 교체할 필요는 없습니다. 

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

1. Klaviyo의 왼쪽 탐색에서 가입 양식 탭을 선택합니다.
2. 양식 만들기를 선택합니다. 이때 다음 두 가지 중 하나를 선택할 수 있습니다.
   • 양식 라이브러리에서 사전 구축된 템플릿을 사용자 정의합니다. 모든 유형 옆의 드롭다운을 클릭한 다음 임베드를 선택하여 양식 라이브러리를 필터링하고 사전 구축된 모든 임베드 양식 템플릿을 표시합니다.
   • 오른쪽 상단 모서리에서 새 양식 만들기를 선택하여 빈 임베드 양식 템플릿으로 시작하세요.
3. 생성 모달이 나타나면 다음을 수행합니다.
   • 양식의 이름을 지정합니다. 
   • 새 구독자가 가입할 리스트를 선택합니다.
   • 양식 유형으로 임베드를 확인합니다.
     
4. 저장 및 디자인을 클릭합니다.
5. 편집기를 사용하여 양식의 스타일을 지정하고 원하는 블록이나 입력란을 추가합니다. 양식을 사용자 지정하는 동안의 지침은 가입 양식 시작하기를 참조하세요.
   

   사이트 바닥글에 양식을 임베딩할 것을 계획하는 경우 옵트인 양을 늘리기 위해 이메일 주소만 요청하는 것이 좋습니다.

6. 양식이 만족스러우면 게시를 클릭합니다. 양식은 사이트에 바로 표시되지는 않으며, 사이트에 임베드 코드를 붙여넣어야 양식이 라이브 상태가 됩니다.
7. 성공적으로 게시됨 모달이 나타나면 복사를 클릭하여 임베드 코드를 클립보드에 복사합니다. 이 글의 다음 섹션에서 사이트 파일에 붙여넣어야 하는 코드입니다.
   

사이트에 임베드 코드 붙여넣기

Klaviyo에 양식을 게시하고 임베드 코드를 복사한 후 이 코드를 웹사이트 파일에 붙여넣어야 양식을 표시할 수 있습니다. 코드를 붙여넣는 위치는 양식을 표시할 위치(예: 테마 파일 또는 특정 페이지 파일)에 따라 다르며 연동 여부에 따라 달라질 수 있습니다. 

아래 리스트에서 사용 중인 플랫폼을 찾은 다음 그 아래에 링크된 문서로 이동하여 해당 연동을 위한 임베드 코드 붙여넣기에 대한 보다 구체적인 가이드를 확인하세요. 

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

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

다음 단계

Klaviyo에 임베드 양식을 게시하고 임베드 코드를 사이트에 붙여넣고 변경 사항을 저장한 후, 웹사이트로 이동하여 페이지를 새로 고칩니다.

임베드 양식이 임베드 코드를 붙여넣은 사이트 위치에 표시되어야 합니다. 

임베드 양식 문제 해결

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

• 브라우저 캐시를 새로 고칩니다.
• 웹사이트가 Klaviyo와 제대로 연동되어 있고 사이트도 라이브 상태인지 확인합니다.
• 계정에 가입 양식이 활성화되어 있는지 확인합니다(이는 온사이트 트래킹을 활성화하는 것과 동일합니다).
• 임베드 코드를 붙여넣은 후 웹사이트에 변경 사항을 저장했는지 확인합니다.
• Klaviyo의 가입 양식 편집기에서 타겟팅 및 동작 섹션으로 이동하여 다음을 검토합니다.
  • 표시 섹션에서 다음을 확인합니다. 
    • 사이트에 붙여넣은 임베드 코드가 Klaviyo에서 제공한 코드와 일치합니다.
    • Klaviyo의 기기 설정이 양식을 보는 데 사용하는 기기에 해당합니다.
  • 타겟팅 섹션에서 다음을 확인합니다.
    • 좁혀진 방문자 설정을 충족합니다.
    • 양식은 현재 보고 있는 URL에 표시되도록 설정되어 있으며 지정된 UTM 매개 변수를 포함합니다.
    • 사용자의 위치가 양식의 모든 지리적 위치 설정과 일치합니다.
    • 장바구니가 양식에 구성된 장바구니 콘텐츠 요구 사항을 충족합니다.
• 새 시크릿('비공개') 브라우저 창에서 테스트를 다시 실행합니다.
• Klaviyo 계정 1개만 사이트와 연동되어 있는지 확인합니다. 연동에 대해 자세히 알아보세요.

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

• 사이트에 사용자 지정 CSS가 있는 경우 Klaviyo의 온사이트 트래킹 조각('Klaviyo.js')과 충돌하고 양식을 방해할 수 있습니다. 개발자에게 브라우저의 개발자 도구를 사용하여 사이트의 코드를 검사하고 문제를 파악하게 하거나 지원 팀에 문의하도록 하세요.
• 단일 페이지 애플리케이션('SPA') 사이트를 사용하는 경우 설정으로 인해 양식이 간헐적으로 표시될 수 있습니다. 개발자에게 도움을 요청하세요.

추가 리소스

• 지원 팀에 문의하는 방법
• 가입 양식 문제 해결
• 가입 양식으로 시작하기