메인 콘텐츠로 건너뛰기
이 가이드는 OneSignal HTML 에디터로 생성된 HTML 인앱 메시지를 위한 JavaScript API를 다룹니다. 트리거 설정, 인앱 클릭 이벤트 처리 또는 인앱 수명 주기 관리를 위한 SDK 메서드를 찾고 있다면 모바일 SDK 레퍼런스를 참조하세요.

요구 사항

1. 클릭 추적을 위해 data-onesignal-unique-label 사용

모든 클릭 가능한 요소에는 고유한 값을 가진 data-onesignal-unique-label 속성이 있어야 합니다. 이를 통해 OneSignal은 다음을 수행할 수 있습니다:
  • 클릭 분석 추적
  • 관련 작업을 올바르게 트리거
HTML
두 요소가 동일한 data-onesignal-unique-label을 공유하면 클릭이 잘못 기록되거나 작업이 실행되지 않을 수 있습니다.

2. 이벤트 리스너 연결

OneSignal 인앱 작업을 트리거하려면 JavaScript 이벤트 리스너를 명시적으로 연결해야 합니다.
JavaScript
예제:
HTML

사용 가능한 함수

블록 에디터의 모든 클릭 작업도 HTML 인앱 메시지에서 사용할 수 있습니다.

푸시 권한 프롬프트

네이티브 푸시 알림 권한 프롬프트를 표시합니다. 클릭 이벤트는 자동으로 추적됩니다. 푸시 권한 프롬프트를 참조하세요.
HTML

위치 권한 프롬프트

네이티브 위치 권한 프롬프트를 표시합니다. 클릭 이벤트는 자동으로 추적됩니다. 위치 권한 프롬프트를 참조하세요.
HTML

인앱 메시지 닫기

현재 인앱 메시지를 닫습니다. 클릭 이벤트는 자동으로 추적됩니다.
html

사용자 태그 지정

태그를 설정합니다. 클릭 이벤트는 자동으로 추적됩니다.
HTML

URL 열기

기기의 브라우저에서 URL을 열고 인앱 메시지를 닫습니다. 클릭 이벤트는 자동으로 추적됩니다. 딥 링킹을 지원합니다.
HTML

클릭 이름

인앱 메시지 클릭 리스너에서 읽을 수 있는 클릭 이름을 할당합니다. 클릭 이벤트는 자동으로 추적됩니다. 딥 링킹을 지원합니다.
HTML

클릭 추적

다른 클릭 가능한 API 메서드를 사용하지 않을 때 클릭 이벤트를 추적합니다.
html

결과 전송

귀속되지 않은 사용자 지정 결과를 추적하고 outcome name : true 형식으로 사용자에게 태그를 설정합니다. 클릭 이벤트는 자동으로 추적됩니다.
html

HTML 인앱 메시지 개인화

블록 에디터에서와 마찬가지로 HTML 인앱 메시지에서 태그 대체를 사용할 수 있습니다.
태그 대체는 <script> 태그 내에서 작동하지 않습니다.
태그 대체가 작동하는 경우:
  • 인라인 텍스트 (<h1>, <p>, <li> 등)
  • <style> 규칙:
    CSS
  • URL이 있는 속성:
    • href
    • src
    • <form action>
    • <object data>

openUrl()addClickName()에서 태그 사용

<script> 태그는 대체를 지원하지 않으므로 다음 방법 중 하나를 사용하세요: 1. liquidPlayerTags로 모든 태그에 액세스 이 전역 객체는 DOMContentLoaded 후에 사용할 수 있습니다.
HTML
2. href 속성에 태그 저장
HTML

다음 단계