학습 내용
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 강조 표시된 텍스트를 바꿉니다.