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

학습 내용

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

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

새 버튼 만들기

This content requires Functional cookies to be enabled.

Update Cookie Settings

먼저 웹사이트에 새 버튼을 만들어서 클릭하면 가입 양식이 표시되도록 하세요. 사이트에 버튼을 추가하기 전에 Klaviyo에서 가입 양식이 올바르게 설정되어 있는지 확인해야 해요. 그렇게 하려면

1. 버튼을 클릭했을 때 표시될 새 가입 양식을 생성 하거나, 이미 생성해 둔 양식을 선택하세요.
2. Styles 탭에서 Form Type은 Popup, 플라이아웃 또는 Full Page로 설정되어 있어야 해요. 임베디드 양식은 버튼을 클릭했을 때 트리거될 수 없어요.
3. 타겟팅 & 행동 탭에서 타이밍 아래의 사용자 지정 트리거에서만 표시 를 선택해 주세요.
   

4. 양식의 디자인과 콘텐츠가 만족스러우면 게시를 클릭해 주세요.
5. 다음으로 양식 편집기를 열고 다음 설정을 선택해 주세요.
6. 아래 코드를 복사하세요:

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

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

사이트에 서로 다른 가입 양식을 트리거하는 버튼을 여러 개 추가하는 경우, 각 버튼을 분류하기 위해 고유한 이름을 사용해야 해요(예: klaviyo_form_trigger1, klaviyo_form_trigger2).

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

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 끝에 있는 6자리 코드를 복사해 코드 조각에 추가하세요. 이 코드가 양식 ID예요.
     

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

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

버튼 테스트

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

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

추가 자료