버튼을 클릭했을 때 가입 양식이 표시되도록 트리거하는 방법

학습 내용

방문자가 특정 버튼을 클릭할 때 웹사이트에 가입 양식이 표시되도록 트리거하는 방법을 알아보세요. 이 가이드는 사용자 지정 트리거에서 표시되도록 양식을 조정하고, 사이트에 새 버튼을 만들고 추가한 다음, 버튼을 클릭하면 가입 양식이 트리거되도록 사이트의 HTML에 짧은 코드 조각을 붙여넣는 과정을 안내해 드려요.

개발자이며 가입 양식에 대한 트리거를 맞춤 코드로 만들고 싶다면, 팝업 또는 플라이아웃 양식을 맞춤 트리거하는 방법에 대한 개발자 리소스로 이동해 주세요.

시작하기 전에, 버튼을 추가할 모든 페이지에 Klaviyo의 온사이트 JavaScript(Klaviyo.js)가 설치되어 있는지 확인해 주세요. 웹사이트에서 가입 양식이 활성화되어 있는지 확인해 주세요.

새 버튼 만들기

This content requires Functional cookies to be enabled.

Update Cookie Settings

웹사이트에 새 버튼을 추가하기 전에 Klaviyo에서 가입 양식을 설정해 주세요:

1. 버튼을 클릭했을 때 표시될 새 가입 양식을 생성 하거나, 이미 생성해 둔 양식을 선택하세요.
2. 양식 편집기에서 스타일 편집을 선택하세요. 양식 유형을 팝업, 플라이아웃, 전체 페이지 또는 배너로 설정하세요. 임베드된 양식은 버튼을 클릭해도 트리거할 수 없어요.
3. 타겟팅 및 행동 & > 디스플레이를 선택하세요. 타이밍에서 폼 표시를 사용자 지정 트리거에서만으로 설정하세요.

사용자 지정 트리거는 양식의 타기팅, 기기, 빈도 규칙을 무시해요. 양식을 열 수 있는 대상을 제한해야 한다면, 웹사이트의 버튼 또는 사용자 지정 코드에 해당 조건을 적용해 주세요.

1. 폼의 디자인과 콘텐츠가 만족스러우면 게시 또는 예약을 클릭하고 지금 게시 옵션을 선택한 다음 지금 게시를 클릭해 폼을 게시하세요.
2. 아래 코드를 복사하세요:

<button class="klaviyo_form_trigger">Click here</button>

1. 버튼을 표시할 웹사이트의 모든 페이지 HTML에 코드를 붙여넣으세요. 이 버튼은 사이트 템플릿의 기본 스타일을 사용해요. 버튼의 모양을 더 세부적으로 맞춤 설정하려면 개발자 또는 Klaviyo 파트너에게 문의해 주세요.

같은 페이지에 여러 버튼을 추가하는 경우, 동일한 가입 양식을 열더라도 각 버튼에 고유한 클래스 이름(예: klaviyo_form_trigger1, klaviyo_form_trigger2)을 지정해 주세요. 아래 JavaScript 스니펫은 일치하는 클래스를 가진 첫 번째 버튼에만 연결돼요. 각 버튼에 대해 일치하는 스니펫을 추가해 주세요.

버튼을 설정하여 가입 양식이 트리거되도록 하세요.

This content requires Functional cookies to be enabled.

Update Cookie Settings

이제 웹사이트에 새 버튼을 추가했으니, 다음으로 클릭했을 때 가입 양식이 표시되도록 트리거를 설정해야 해요. 사이트에 작은 맞춤형 JavaScript 스니펫을 추가해 트리거를 설정하세요:

1. 아래의 코드 조각을 복사하세요:

<script type="text/javascript">
	document.querySelector('.klaviyo_form_trigger').addEventListener('click', function (){
		window._klOnsite = window._klOnsite || []; 
		window._klOnsite.push(['openForm', 'FORM_ID']);
	});
</script>

1. 지난 섹션에서 사이트에 추가한 버튼 코드 바로 아래에 코드 조각을 직접 붙여넣습니다.
2. 방금 붙여넣은 스니펫에서 FORM_ID를 가입 양식의 ID로 바꾸세요.
   • 양식 ID를 찾으려면 Klaviyo로 돌아가 가입 양식의 양식 편집기를 여세요. URL에서 /forms/ 바로 뒤에 있는 ID를 복사해 주세요. ID에는 문자와 숫자가 포함될 수 있으니, 스니펫에서 FORM_ID를 바꿀 때 표시된 대로 대소문자를 정확히 유지해 주세요.
     

3. 완성된 코드는 새 버튼 코드와 고유한 양식 ID가 포함된 가입 양식 트리거를 포함해야 해요. 버튼 코드를 추가한 모든 페이지에 이 코드를 붙여넣어 주세요.
   • Shopify 페이지 편집기에서 완료된 코드의 예시는 다음과 같아요:
     

1. 변경 사항을 저장합니다.

버튼 테스트

사이트 코드에 대한 모든 변경 사항을 저장한 후, 사이트를 방문해 새 버튼을 클릭해 주세요. 그러면 가입 양식이 표시돼요.

문제가 있나요? 다른 Klaviyo 사용자의 안내를 받으려면 Klaviyo 커뮤니티 포럼으로 이동해 주세요.

추가 자료