이벤트 콜백 받기

일반 HTML과 React에서 이벤트 알림을 받아 고객사 화면에 반영합니다.

콜백 등록하기

이벤트 수신 체험에서 샘플을 실행하고, 수신 기록을 선택해 콜백 JSON을 확인할 수 있습니다.

카나페 이벤트의 조회, 시작 버튼 클릭, 당첨 같은 동작은 mount() 옵션의 onEvent로 받을 수 있습니다. 이벤트 소유 계정에 카나페 측 메시지 연동이 필요합니다. 아래 예제에는 연동된 일반 이벤트의 ID를 사용하세요.

onEvent를 iframe이 만들어질 때 함께 등록하므로 최초 viewed 메시지부터 받을 수 있습니다.

일반 HTML과 JavaScript

이벤트를 넣을 요소 아래에서 헬퍼를 불러온 다음 mount()를 호출합니다. YOUR_EVENT_ID를 실제 이벤트 ID로 바꾸세요.

<div id="campaign"></div>
<p id="campaign-status" role="status"></p>

<script src="https://cdn.canape.im/_static/js/canape-embed-helper/@2.0.0/canape-embed-helper.js"></script>
<script>
  const status = document.getElementById('campaign-status')
  const campaign = window.CanapeEmbed.mount(
    document.getElementById('campaign'),
    {
      eventId: 'YOUR_EVENT_ID',
      onEvent(event) {
        if (event.type === 'viewed') {
          status.textContent = '이벤트를 열었습니다.'
        }

        if (event.type === 'won') {
          status.textContent = '이벤트 결과 · ' + event.rewardName
        }
      },
      onError(error) {
        status.textContent = error.message
      },
    },
  )

  // 화면에서 이벤트 영역을 제거할 때 호출하세요.
  // campaign.destroy()
</script>

브라우저 메시지의 canape:won은 헬퍼의 onEvent에서 won으로 전달됩니다. 이벤트별로 어떤 값이 들어오는지는 이벤트와 데이터에서 확인하세요. won은 화면에 참여 결과를 표시하는 데 사용합니다. 당첨 검증이 필요한 경우 카나페 담당자에게 별도 연동을 문의하세요.

React와 Next.js

다음은 Next.js App Router의 클라이언트 컴포넌트 예제입니다. eventId에는 연동된 이벤트 ID를 전달하세요. 스크립트가 로드되고 컨테이너가 화면에 연결되면 임베드합니다. 페이지를 이동하거나 이벤트 ID가 바뀌면 이전 인스턴스를 정리합니다.

'use client'

import Script from 'next/script'
import { useEffect, useRef, useState } from 'react'

export function CanapeCampaign({ eventId }) {
  return <CampaignEmbed key={eventId} eventId={eventId} />
}

function CampaignEmbed({ eventId }) {
  const containerRef = useRef(null)
  const [helperReady, setHelperReady] = useState(false)
  const [notice, setNotice] = useState('')

  useEffect(() => {
    const container = containerRef.current
    const helper = window.CanapeEmbed

    if (!helperReady || !container || !helper) return

    const campaign = helper.mount(container, {
      eventId,
      onEvent(event) {
        if (event.type === 'won') {
          setNotice('이벤트 결과 · ' + event.rewardName)
        }
      },
      onError(error) {
        setNotice(error.message)
      },
    })

    return () => campaign.destroy()
  }, [eventId, helperReady])

  return (
    <>
      <Script
        src="https://cdn.canape.im/_static/js/canape-embed-helper/@2.0.0/canape-embed-helper.js"
        onReady={() => setHelperReady(true)}
        onError={() => setNotice('카나페 헬퍼를 불러오지 못했습니다.')}
      />
      <div ref={containerRef} />
      <p role="status">{notice}</p>
    </>
  )
}

일반 React 앱에서는 진입 HTML에서 헬퍼를 먼저 불러온 뒤 앱을 시작할 수도 있습니다. 이 경우 next/script와 helperReady 상태는 빼고, 같은 방식으로 useEffect에서 mount()와 destroy()를 호출하세요.

로그인 버튼 처리하기

login_button_clicked가 발생하면 이벤트에서 설정한 이동 주소 url과 가입 연동에 쓰는 session이 전달됩니다. 고객사 사이트에서 등록된 주소인지 확인하고 로그인 흐름을 연결하세요. 페이지 이동은 고객사 코드에서 처리합니다. 가입 전환 연동을 사용하는 경우, 로그인 후 돌아왔을 때 새 mount()에 회원 ID와 카나페가 발급한 세션을 customUserId와 signupSession으로 전달합니다.