입력폼 제출을 추적하고 싶어요 (광고 스크립트 삽입 또는 자사 시스템 연동)

광고 추적, 웹분석, 또는 자사 시스템과 연동을 위해서 웹사이트 방문자가 입력폼을 제출할 때 원하는 스크립트를 실행하고 싶다면, 입력폼 추적 API를 활용하세요.

입력폼 추적 API 기본 활용법

입력폼이 존재하는 캠페이너스 페이지에 코드 위젯을 추가하고 다음 코드를 입력하세요.

<script>
campaignus.event('submit_form', function(eventData){

	  // 광고, 웹분석 또는 자사 시스템 스크립트를 여기에 삽입하세요.

});
</script>

고급 활용(1) : 특정 입력폼만 추적하기

한 페이지에 입력폼이 여러 개 존재한다면 모든 입력폼에 대해서 스크립트가 실행되게 됩니다. 특정한 입력폼 제출시에만 스크립트가 실행되길 원한다면, 추적하려는 특정 입력폼의 입력폼 ID 를 지정하세요.

<script>
campaignus.event('submit_form', '{입력폼 ID}', function(eventData){

	  // 광고, 웹분석 또는 자사 시스템 스크립트를 여기에 삽입하세요.

});
</script>

입력폼 ID 는 관리자모드에서 컨텐츠 관리 > 입력폼 관리 메뉴로 접속하여 추적을 원하는 입력폼을 클릭하면 브라우저 주소창에서 확인할 수 있습니다. ?code= 뒷부분에 b로 시작하는 값을 복사하여 위 안내된 스크립트의 {입력폼 ID} 부분에 입력하세요.

다음은 입력폼 ID 를 사용하여 페이스북 픽셀 스크립트를 삽입한 예시입니다.

<script>
campaignus.event('submit_form', 'b20230815250eae98d190e', function(eventData){

	  fbq('track', 'Lead'); // 페이스북 픽셀 이벤트

});
</script>

고급 활용(2) : 입력폼에 제출된 데이터 가져오기

입력폼에 제출된 데이터를 받고 싶다면 eventData 변수를 활용하세요.

<script>
campaignus.event('submit_form', function(eventData){

	  console.log( eventData );

		// 출력 값 예시 :
		// {
		//   "board_code": "b20230815250eae98d190e",
		//   "board_name": "뉴스레터 구독",
		//   "input_7680ababf255e": "홍길동",
		//   "email_3bg14432K6": "gildong@gmail.com",
		//   "textarea_3d20c314fc226": "뉴스레터를 구독하고 싶어요!",
		// }
});
</script>

입력폼에 제출된 데이터는 다음과 같은 형태로 eventData 변수에 담겨져 있습니다.

{
  'board_code': 'b20230815250eae98d190e', // 입력폼 ID (항상 제공)
  'board_name': '뉴스레터 구독', // 입력폼 이름 (항상 제공)
  '{입력폼 필드 ID 1}': '{유저가 제출한 값}',
  '{입력폼 필드 ID 2}': '{유저가 제출한 값}',
  '{입력폼 필드 ID 3}': '{유저가 제출한 값}',
	...
}

입력폼 필드 ID 는 해당 필드의 HTML 태그에서 name 속성에 지정된 값을 사용합니다.

위 예시에서 입력폼 필드 ID는 email_3bg14432K6 입니다.

다음은 eventData 를 활용하여 이메일 주소를 받아 페이스북 픽셀로 전송하는 예시입니다.

<script>
campaignus.event('submit_form', function(eventData){

		fbq('track', 'Lead', { em: eventData.email_3bg14432K6 }); // 페이스북 픽셀 이벤트

});
</script>

감사합니다.