이벤트와 데이터

이벤트별로 콜백이 전달되는 시점과 함께 받는 데이터를 확인합니다.

mount()에 onEvent를 등록하면 해당 임베드에서 발생한 이벤트를 받습니다. 각 콜백에는 이벤트 종류인 type과 공통 정보인 metadata가 있습니다. 카나페에서 콜백 연동을 사용할 수 있도록 설정된 이벤트로 확인하세요.

콜백 등록

이벤트 수신 체험에서 실제 콜백과 예시 메시지의 JSON을 확인할 수 있습니다.

아래 예제는 이벤트 화면이 열린 시점과 리워드 결과가 도착한 시점에 텍스트를 바꿉니다. container, statusElement, eventId는 고객사 화면에서 사용 중인 요소와 이벤트 ID를 넘깁니다.

const instance = window.CanapeEmbed.mount(container, {
  eventId,
  onEvent(event) {
    if (event.type === 'viewed') {
      statusElement.textContent = '이벤트가 열렸습니다.'
    }

    if (event.type === 'won') {
      statusElement.textContent = `이벤트 결과 · ${event.rewardName}`
    }
  },
})

TypeScript에서는 event.type을 확인한 분기에서 해당 이벤트의 필드를 사용할 수 있습니다. 등록부터 정리까지 실행하는 예제는 이벤트 콜백 받기에 있습니다.

이벤트 종류

표의 필드는 metadata와 같은 단계에 들어 있습니다. 선택 필드는 이벤트 설정이나 참여 결과에 따라 생략될 수 있습니다.

`event.type`	전달 시점	추가 필드
`viewed`	연동 초기화가 끝나 이벤트 화면이 열렸을 때. 같은 인스턴스에서는 한 번 전달됩니다.	공통 메타데이터
`start_button_clicked`	참여 시작을 시도했을 때. 실제 참여가 확정되기 전에 전달될 수 있습니다.	공통 메타데이터
`login_button_clicked`	로그인 버튼을 누른 뒤 카나페에서 가입 전환 세션을 발급했을 때	`url`, `session`
`won`	카나페가 참여 결과와 리워드 정보를 반환했을 때	`rewardId`, `rewardName`, `verification`(선택)
`reward_form_submitted`	리워드 수령 정보가 제출됐을 때	`name`, `phone`, `address`, `addressDetail`, `postalCode`(모두 선택)
`share_button_clicked`	공유 동작을 처리했을 때	`platform`, `page`
`cta_button_clicked`	리워드 화면에서 링크 버튼을 눌렀을 때	`url`
`share_and_restart`	공유 후 다시 참여하는 절차가 시작될 때	공통 메타데이터

url, session, rewardId, rewardName, verification 및 리워드 수령 정보 필드는 문자열입니다. login_button_clicked의 url은 이벤트에 설정된 로그인 주소이고 session은 카나페가 발급한 세션입니다. 로그인 화면으로 이동하는 동작은 고객사에서 처리합니다.

share_button_clicked의 platform은 FACEBOOK, KAKAO, LINE, LINK, MESSENGER, WHATSAPP, X 중 하나입니다. page는 이벤트 진행 화면의 GAME 또는 리워드 화면의 REWARD입니다. 카카오톡 공유 후 다시 참여하는 설정이 적용된 리워드 화면에서는 공유 완료를 확인한 뒤 콜백을 전달합니다.

won.verification은 별도로 당첨 검증 연동을 요청해 활성화한 이벤트에서 검증값이 발급된 경우에만 포함됩니다. 일반 연동의 won은 결과 표시용 알림으로 사용하세요.

공통 메타데이터

모든 콜백에는 문자열인 metadata.eventId가 있습니다. 다른 필드는 카나페에서 해당 값을 보냈을 때 포함됩니다.

필드	타입	설명
`eventId`	`string`, 필수	콜백을 보낸 카나페 이벤트 ID
`eventName`	`string`	카나페 이벤트 이름
`time`	`string`	이벤트 메시지를 보낸 시각 (ISO 8601 UTC)
`referrer`	`string`	이벤트에서 확인한 유입 정보
`customUserId`	`string`	회원 연동으로 확인된 고객사 회원 ID
`name`, `email`, `phone`	`string`	해당 메시지에 포함된 참여자 정보
`additionalData1`, `additionalData2`, `additionalData3`	`string`	이벤트에 설정한 추가 입력값
`signupSession`	`string`	가입 전환 연동에서 확인된 세션
`isNewSignupUser`	`boolean`	신규 가입 참여자로 처리됐는지 표시

참여자 정보와 가입 세션은 연동에 필요한 항목만 사용하세요. 리워드 수령 정보는 reward_form_submitted 콜백의 최상위 필드에서 확인할 수 있습니다.