사이트에 임베드 양식을 추가하는 방법 Klaviyo BigCommerce

예상 3 읽은 시간(분)

업데이트 2024년 12월 19일 오후 5:16 EST

Klaviyo 사이트에 임베드 양식을 BigCommerce 추가하는 방법을 알아보려면 에서 양식을 만든 Klaviyo 다음 사이트의 파일에 표시할 위치(예: 바닥글)에 임베드 코드를 붙여넣어야 합니다.

이 가이드에서는 BigCommerce 기본 가입 양식을 Klaviyo 임베드 양식으로 대체하는 방법을 설명합니다.

Klaviyo 에 임베드 양식을 생성하기 전에 먼저 BigCommerce 과 통합한 다음 가입 양식 기능("온사이트 트래킹"이라고도 함)을 활성화해야 합니다. 과 통합할 BigCommerce 때 사이트 자바스크립트 자동 추가 설정을 Klaviyo 체크했다면 설정이 완료된 것입니다.

그렇지 않다면:

Klaviyo 에서 왼쪽 아래 모서리에 있는 조직 이름을 클릭한 다음 연동을 선택합니다.
BigCommerce를 클릭합니다.
클라비요 온사이트 자바스크립트 자동 추가 설정을 확인하세요.
저장을 클릭합니다.

이 글의 예제에서는 BigCommerce의 기본 코너스톤 테마를 사용합니다. 테마는 일부 파일 이름이나 코드 조각의 위치와 함께 다를 수 있다는 점에 유의하세요.

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

먼저에 임베드 양식을 Klaviyo 만들어 게시합니다. 이 섹션에서는 양식의 임베드 코드를 BigCommerce 사이트에 붙여넣어 데이터를 올바르게 표시하고 동기화하는 다음 단계에 대해 설명합니다.

아직 임베드 코드를 복사하지 않았다면 임베드 양식의 임베드 코드를 복사하세요. 편집기에서 양식을 열고 타겟팅 & 동작 섹션을 클릭하여 양식의 임베드 코드에 액세스할 수 있습니다.
웹사이트로 이동하여 기본 BigCommerce 가입 양식을 찾습니다. 코너스톤 테마를 사용하는 경우 사이트 바닥글에 있습니다.
- 웹사이트에 기본 양식이 표시되지 않는 경우:
  - BigCommerce 대시보드를 엽니다.
  - 마케팅 > 이메일 마케팅으로이동
  - 뉴스레터 구독 허용 확인란을 선택합니다. 이렇게 하면 웹사이트 방문자로부터 이메일 동의를 수집할 수 있으며 BigCommerce 사이트에 기본 이메일 회원가입 상자가 추가됩니다. 이 상자가 이미 선택되어 있는데도 기본 양식이 표시되지 않는다면 테마에 기본 양식이 포함되어 있지 않은 것일 수 있습니다.
BigCommerce 대시보드를 연 다음 스토어 첫 화면 > 테마로 이동합니다.
현재 테마 섹션에서 고급 드롭다운을 클릭한 다음 테마 파일 편집을 선택합니다.
- 기본 테마를 사용하는 경우에는 이 옵션을 선택할 수 없습니다. 대신:
  - 사본 만들기를 클릭하고 이름을 지정한 다음 사본 저장을 선택합니다.
  - 테마 섹션에 테마가 추가되면 점 3개를 선택한 다음 테마 파일 편집을 선택합니다. 편집한 내용은 편집 중인 테마에만 적용되며 변경 사항이 반영된 것을 확인하려면 웹사이트에 테마를 적용해야 합니다.
왼쪽 사이드바에서 사이트에서 기본 양식이 표시된 위치에 해당하는 파일을 엽니다. 예시와 같이 기본 양식이 바닥글에 있는 경우 템플릿 > 구성 요소 > 공통으로 이동하여 footer.html 파일을 클릭합니다.
찾기 단축키(Mac의 경우 Command+F 또는 Windows의 경우 Control+F)를 사용하여 바닥글 파일 내에서 '뉴스레터'라는 단어를 검색합니다.
그 아래 코드에서 양식에 대한 참조를 찾습니다. 이 예제에서는 양식이 다른 파일 경로인 {{> components/common/subscription-form}} 에서 참조됩니다.
왼쪽 사이드바에서 코드에 참조된 파일 경로를 따라갑니다(이 예에서는 > common > 구독 양식 구성 요소를 선택합니다). 여기에서 기본 양식의 실제 구성 요소를 확인할 수 있습니다.
- 기본 양식의 헤더와 언어가 사이트의 나머지 스타일과 일치하므로 실제 양식 입력만 교체하겠습니다. 소스 코드에서 기본 양식의 입력이 <form> 요소에 포함되어 있는 것을 볼 수 있습니다.
열기와 닫기 태그 사이의 모든 내용을 강조 표시한 <form> 다음 에서 복사한 임베드 코드를 붙여넣어 Klaviyo 강조 표시된 텍스트를 바꿉니다.
파일 저장 및 적용을 클릭하여 변경 사항을 웹사이트에 적용합니다.
- 버튼에 파일 저장이라고만 표시되어 있으면 방금 편집한 파일이 아직 현재 테마가 아닌 것입니다. 파일 저장을 클릭한 다음 위로 스크롤하여 테마 파일 편집 > 저장 > 활성 테마로 사용 오른쪽 상단 모서리에서 테마를 웹사이트에 적용합니다.