학습 내용
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 강조 표시된 텍스트를 바꿉니다.
-
파일 저장 및 적용을 클릭하여 변경 사항을 웹사이트에 적용합니다.
- 버튼에 파일 저장이라고만 표시되어 있으면 방금 편집한 파일이 아직 현재 테마가 아닌 것입니다. 파일 저장을 클릭한 다음 위로 스크롤하여 테마 파일 편집 > 저장 > 활성 테마로 사용 오른쪽 상단 모서리에서 테마를 웹사이트에 적용합니다.
임베드 코드를 붙여넣고 저장한 후 BigCommerce 에 변경 사항을 적용했으면 웹사이트로 돌아가서 페이지를 새로 고칩니다. Klaviyo 퍼가기 양식이 사이트에 표시되고 양식에 연결된 Klaviyo 리스트에 새 구독자 추가가 시작됩니다.
양식이 표시되지 않으면 양식 임베드 문제 해결을 참조하세요.
다음 단계다음 단계
다음으로, 환영 이메일 시리즈 플로우를 만들어 새 구독자에게 즉각적인 영향을 미치세요.
추가 리소스