여러 이벤트 넣기

한 페이지의 여러 위치에 이벤트를 넣고 각각의 콜백과 화면 상태를 관리합니다.

한 페이지에 여러 이벤트 표시하기

헬퍼 스크립트는 페이지에 한 번만 넣으세요. 이벤트를 표시할 위치마다 data-canape-event 요소를 하나씩 추가하고 해당 이벤트 ID를 넣습니다.

<script
  defer
  src="https://cdn.canape.im/_static/js/canape-embed-helper/@2.0.0/canape-embed-helper.js"
></script>

<section aria-labelledby="first-title">
  <h2 id="first-title">첫 번째 이벤트</h2>
  <div data-canape-event="FIRST_EVENT_ID"></div>
</section>

<section aria-labelledby="second-title">
  <h2 id="second-title">두 번째 이벤트</h2>
  <div data-canape-event="SECOND_EVENT_ID"></div>
</section>

같은 이벤트를 두 위치에 보여주려면 두 요소에 같은 이벤트 ID를 넣으세요. 각 위치에 iframe이 하나씩 만들어집니다. 같은 이벤트의 참여 조건과 당첨 기록은 이벤트 자체의 설정을 따릅니다.

위치별 콜백 받기

mount()를 각 컨테이너에 호출하면 각 위치의 동작을 별도 콜백으로 받습니다. 아래 예제는 한 이벤트를 본문과 하단에 표시하고, 본문 쪽만 제거하는 방법을 보여줍니다. YOUR_EVENT_ID에는 메시지 연동이 설정된 이벤트 ID를 사용하세요.

<div id="campaign-main"></div>
<button type="button" id="remove-main">본문 이벤트 닫기</button>
<div id="campaign-footer"></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 eventId = 'YOUR_EVENT_ID'
  const status = document.getElementById('campaign-status')

  function report(locationName, event) {
    if (event.type === 'viewed') {
      status.textContent = locationName + ' 이벤트를 열었습니다.'
    }
  }

  const main = window.CanapeEmbed.mount(
    document.getElementById('campaign-main'),
    { eventId, onEvent: (event) => report('본문', event) },
  )

  const footer = window.CanapeEmbed.mount(
    document.getElementById('campaign-footer'),
    { eventId, onEvent: (event) => report('하단', event) },
  )

  document.getElementById('remove-main').addEventListener('click', () => {
    main.destroy()
  })

  // 하단 영역도 제거할 때는 footer.destroy()를 호출하세요.
</script>

화면을 전환할 때 정리하기

선언형 자동 삽입은 스크립트가 시작할 때 페이지를 한 번 확인합니다. 탭을 열거나 SPA에서 경로를 이동한 뒤 만들어진 요소에는 mount()를 사용하세요.

이미 임베드한 위치에서 다른 이벤트나 회원 ID로 교체할 때는 먼저 이전 인스턴스의 destroy()를 호출합니다. 선언형으로 삽입한 요소를 mount()에 넘기면 같은 위치에 두 번 삽입하는 것으로 처리됩니다. React에서는 콜백 예제의 정리 함수를 참고하세요.