문서 둘러보기
연동 가이드
문제 해결
이벤트가 표시되지 않거나 콜백이 오지 않을 때 확인할 항목을 살펴봅니다.
이벤트가 화면에 나타나지 않아요
- 빠른 시작에서 만든 코드의
data-canape-event또는mount()의eventId를 확인하세요.https://canape.im/event/…에서/event/뒤의 이벤트 ID를 사용합니다. - 카나페 에디터에서 배포한 이벤트인지 확인하고 이벤트 주소를 브라우저에서 직접 열어 보세요.
- 개발자 도구의 네트워크 탭에서 헬퍼 스크립트와
canape.im의 iframe 요청이 차단됐는지 확인하세요. 사이트에서 콘텐츠 보안 정책을 쓰는 경우 스크립트 출처에https://cdn.canape.im, iframe 출처에https://canape.im이 허용되는지 확인합니다. - 일반 JavaScript에서
window.CanapeEmbed가 없다면 스크립트가 로드된 뒤에mount()를 호출하는지 확인하세요. 스크립트 로드 예제를 참고하세요.
mount()를 호출하는 인라인 스크립트가 보안 정책에 막히면, 해당 코드를 사이트의 JavaScript 파일로 옮겨 헬퍼를 불러온 뒤 실행하세요.
회원 ID를 넣었을 때만 로딩이 계속돼요
헬퍼는 전달한 ID가 적용된 것을 확인한 뒤 회원용 이벤트 화면을 표시합니다. 이벤트 소유 계정에 카나페 측 메시지 연동이 설정됐는지와 에디터에서 사용자 식별 ID 사용 하기를 켜고 배포했는지 확인하세요. 고객사 로그인 코드에서 확인한 회원 ID를 비어 있지 않은 문자열로 전달해야 합니다. 회원 ID 연동 가이드
로딩 중 약 30초 안에 준비 상태를 확인하지 못하면 헬퍼가 오류를 표시합니다. mount()를 사용한 경우 onError에서 오류 객체를 받을 수 있습니다.
이벤트는 보이는데 콜백이 오지 않아요
- 카나페 담당자에게 이벤트 소유 계정의 메시지 연동 설정 여부를 확인하세요. 기본 임베드 표시와 메시지 연동은 각각 확인할 수 있습니다.
- 이벤트를 표시할 컨테이너에
mount()를 호출할 때onEvent를 등록하세요. 자동 삽입 코드로 표시 중이라면 콜백을 등록하는 코드로 교체합니다. - 콜백은 실제 동작이 발생했을 때 전달됩니다. 예를 들어
won은 참여 결과와 리워드 정보를 받았을 때 전달되고viewed는 인스턴스당 한 번 전달됩니다.
화면을 전환하면 이벤트가 사라지거나 중복돼요
| 증상 | 확인할 부분 |
|---|---|
| 첫 화면에서는 보이지만 나중에 추가한 영역은 비어 있어요 | 나중에 만들어진 요소는 mount()로 삽입합니다. 선언형 스크립트는 초기 요소만 찾습니다. |
| 같은 위치를 다시 열었을 때 이미 임베드됐다는 오류가 나요 | 이전 인스턴스의 destroy()를 호출한 뒤 다시 삽입하세요. 같은 위치에 선언형 속성과 mount()를 함께 사용하는지도 확인하세요. |
| 페이지를 떠난 뒤에도 콜백이 실행돼요 | 페이지나 컴포넌트가 사라질 때 destroy()가 실행되는지 확인하세요. React에서는 useEffect에서 정리 함수를 반환합니다. |
카나페에 문의할 때
이벤트 주소, 임베드를 넣은 페이지의 주소, 사용한 헬퍼 버전, 화면에 표시된 오류 문구를 알려 주세요. 회원의 실제 식별자, 인증 토큰, 세션 값은 공유하지 마세요.