BigCommerce 사이트에 Klaviyo 임베드 양식을 추가하는 방법
학습 내용
Klaviyo 임베드 양식을 BigCommerce 사이트에 추가하는 방법을 알아보세요. 이를 위해 Klaviyo에서 양식을 만든 다음, 표시하려는 위치(예: 바닥글)의 사이트 파일에 임베드 코드를 붙여넣어야 해요.
이 가이드에서는 BigCommerce 기본 가입 양식을 Klaviyo 임베드 양식으로 바꾸는 방법을 안내해요.
시작하기 전에 알아야 할 것
Klaviyo에서 임베드 양식을 만들기 전에 먼저 BigCommerce와 통합한 다음, 가입 양식 기능(“온사이트 트래킹”이라고도 함)을 활성화해야 해요. BigCommerce와 통합할 때 Klaviyo 온사이트 JavaScript 자동 추가 설정을 선택했다면, 준비가 끝났어요.
그렇지 않은 경우:
- Klaviyo에서 연동 탭을 선택합니다.
- BigCommerce를 클릭하세요.
- Klaviyo 온사이트 자바스크립트 자동 추가 설정을 선택해 주세요.
- 저장을 클릭합니다.
이 도움말의 예시는 BigCommerce 기본 Cornerstone 테마를 사용해요. 테마는 다를 수 있으며, 일부 파일 이름이나 코드 조각 위치도 달라질 수 있다는 점을 유의해 주세요.
사이트에 양식의 임베드 코드 추가하기
먼저, Klaviyo에서 임베드 양식을 만들고 게시합니다. 이 섹션에서는 BigCommerce 사이트에 양식 임베드 코드를 붙여넣어 제대로 표시되고 데이터가 올바르게 동기화되도록 하는 다음 단계를 안내합니다.
- 아직 하지 않았다면 삽입 양식의 임베드 코드를 복사해 주세요. 편집기에서 양식을 연 다음 타겟팅 및 동작 섹션을 클릭하면 양식의 임베드 코드에 액세스할 수 있어요.
- 웹사이트로 이동해 기본 BigCommerce 가입 양식을 찾으세요. Cornerstone 테마를 사용 중이라면, 사이트의 푸터에 있어요.
- 웹사이트에 기본 양식이 표시되지 않는 경우:
- BigCommerce 대시보드를 엽니다.
- 마케팅 > 이메일 마케팅으로 이동하세요.
- Allow newsletter subscriptions(뉴스레터 구독 허용)로 표시된 확인란을 선택하세요. 이렇게 하면 웹사이트 방문자로부터 이메일 수신 동의를 수집할 수 있고, BigCommerce 사이트에 기본 이메일 가입 상자도 추가돼요. 이 확인란이 이미 선택되어 있는데도 기본 양식이 보이지 않는다면, 테마에 해당 양식이 포함되어 있지 않을 수 있어요.
- BigCommerce 대시보드를 연 다음 Storefront > Themes로 이동하세요.
- 현재 테마 섹션에서 고급 드롭다운을 클릭한 다음 테마 파일 편집을 선택해 주세요.
- 기본 테마를 사용 중이라면 이 옵션을 선택할 수 없어요. 대신:
- 복사본 만들기를 클릭하고 이름을 지정한 다음 복사본 저장을 선택하세요.
- 테마 섹션에 추가되면 점 3개를 선택한 다음 테마 파일 편집을 선택하세요. 참고: 변경 사항은 편집 중인 테마에만 적용되며, 변경 사항이 반영되는 것을 보려면 해당 테마를 웹사이트에 적용해야 합니다.
- 왼쪽 사이드바에서 사이트에 기본 양식이 표시된 위치에 해당하는 파일을 여세요. 예시처럼 기본 양식이 푸터에 있었다면 템플릿 > components > common으로 이동한 다음 footer.html 파일을 클릭하세요.
- 찾기 바로가기(Mac에서는 Command+F, Windows에서는 Control+F)를 사용해 바닥글 파일 내에서 “newsletter”라는 단어를 검색하세요.
- 아래의 코드에서 양식을 참조하는 부분을 찾으세요. 예시에서는 양식이 다른 파일 경로에서 참조돼요: {{> components/common/subscription-form}}.
- 왼쪽 사이드바에서 코드에 참조된 파일 경로를 따라가세요(이 예에서는 components > common > subscription-form을 선택). 여기에서 기본 양식의 실제 구성 요소를 확인할 수 있어요.
- 기본 양식의 머리글과 언어가 사이트의 다른 스타일과 일치하므로, 실제 양식 입력란만 교체할 거예요. 소스 코드에서 기본 양식의 입력란이 <form> 요소에 포함되어 있는 것을 확인할 수 있어요.
- 시작 <form> 태그와 닫는 태그 사이의 모든 내용을 강조 표시한 다음, Klaviyo에서 복사한 임베드 코드를 붙여 넣어 강조 표시된 텍스트를 바꾸세요.
- 파일 저장 및 적용을 클릭해 이러한 변경 사항을 웹사이트에 적용하세요.
- 버튼에 파일 저장만 표시되면 방금 편집한 파일은 아직 현재 테마가 아니에요. 파일 저장을 클릭한 다음 위로 스크롤하여 오른쪽 상단에서 테마 파일 편집 > 저장 > 활성 테마로 사용을 선택해 웹사이트에 테마를 적용해야 해요.
BigCommerce에서 임베드 코드를 붙여넣고 저장한 다음 변경 사항을 적용했다면 웹사이트로 돌아가 페이지를 새로고침하세요. Klaviyo 임베드 양식이 사이트에 표시되고, 양식에 연결된 Klaviyo 목록에 새 구독자가 추가되기 시작합니다.
폼이 보이지 않으면 임베드 폼 문제 해결을 확인해 보세요.
다음 단계
다음으로, 신규 구독자에게 즉각적인 효과를 주기 위해 환영 이메일 시리즈 플로우를 생성하세요.