이 가이드는 OneSignal HTML 에디터로 생성된 HTML 인앱 메시지를 위한 JavaScript API를 다룹니다.
트리거 설정, 인앱 클릭 이벤트 처리 또는 인앱 수명 주기 관리를 위한 SDK 메서드를 찾고 있다면 모바일 SDK 레퍼런스를 참조하세요.
요구 사항
1. 클릭 추적을 위해 data-onesignal-unique-label 사용
모든 클릭 가능한 요소에는 고유한 값을 가진 data-onesignal-unique-label 속성이 있어야 합니다. 이를 통해 OneSignal은 다음을 수행할 수 있습니다:
<button id="tag-user-button" data-onesignal-unique-label="my-tag-user-button">
Tag User
</button>
두 요소가 동일한 data-onesignal-unique-label을 공유하면 클릭이 잘못 기록되거나 작업이 실행되지 않을 수 있습니다.
2. 이벤트 리스너 연결
OneSignal 인앱 작업을 트리거하려면 JavaScript 이벤트 리스너를 명시적으로 연결해야 합니다.
document.getElementById("tag-user-button")
.addEventListener("click", function(e) {
OneSignalIamApi.tagUser(e, { fiz: "baz" });
});
<button id="tag-user-button" data-onesignal-unique-label="my-tag-user-button">
Tag User
</button>
<script>
document.getElementById("tag-user-button").addEventListener("click", function(e) {
OneSignalIamApi.tagUser(e, { fiz: "baz" });
});
</script>
사용 가능한 함수
블록 에디터의 모든 클릭 작업도 HTML 인앱 메시지에서 사용할 수 있습니다.
푸시 권한 프롬프트
네이티브 푸시 알림 권한 프롬프트를 표시합니다. 클릭 이벤트는 자동으로 추적됩니다.
푸시 권한 프롬프트를 참조하세요.
<button id="push-prompt-button" data-onesignal-unique-label="push-permission">
Enable Push
</button>
<script>
document.getElementById("push-prompt-button").addEventListener("click", function(e) {
OneSignalIamApi.triggerPushPrompt(e);
});
</script>
위치 권한 프롬프트
네이티브 위치 권한 프롬프트를 표시합니다. 클릭 이벤트는 자동으로 추적됩니다.
위치 권한 프롬프트를 참조하세요.
<button id="location-prompt-button" data-onesignal-unique-label="location-permission">
Enable Location
</button>
<script>
document.getElementById("location-prompt-button").addEventListener("click", function(e) {
OneSignalIamApi.triggerLocationPrompt(e);
});
</script>
인앱 메시지 닫기
현재 인앱 메시지를 닫습니다. 클릭 이벤트는 자동으로 추적됩니다.
<button id="close-button" data-onesignal-unique-label="close-message">
Close
</button>
<script>
document.getElementById("close-button").addEventListener("click", function(e) {
OneSignalIamApi.close(e);
});
</script>
사용자 태그 지정
태그를 설정합니다. 클릭 이벤트는 자동으로 추적됩니다.
<button id="tag-user-button" data-onesignal-unique-label="tag-user">
Tag User
</button>
<script>
document.getElementById("tag-user-button").addEventListener("click", function(e) {
OneSignalIamApi.tagUser(e, { fiz: "baz" });
});
</script>
URL 열기
기기의 브라우저에서 URL을 열고 인앱 메시지를 닫습니다. 클릭 이벤트는 자동으로 추적됩니다.
딥 링킹을 지원합니다.
<button id="open-url-button" data-onesignal-unique-label="open-website">
Visit Site
</button>
<script>
document.getElementById("open-url-button").addEventListener("click", function(e) {
OneSignalIamApi.openUrl(e, "https://example.com");
});
</script>
클릭 이름
인앱 메시지 클릭 리스너에서 읽을 수 있는 클릭 이름을 할당합니다. 클릭 이벤트는 자동으로 추적됩니다.
딥 링킹을 지원합니다.
<button id="click-name-button" data-onesignal-unique-label="named-click">
Click Me
</button>
<script>
document.getElementById("click-name-button").addEventListener("click", function(e) {
OneSignalIamApi.addClickName(e, "test_click_name");
});
</script>
클릭 추적
다른 클릭 가능한 API 메서드를 사용하지 않을 때 클릭 이벤트를 추적합니다.
<button id="track-click-button" data-onesignal-unique-label="custom-track">
Track Click
</button>
<script>
document.getElementById("track-click-button").addEventListener("click", function(e) {
OneSignalIamApi.trackClick(e);
});
</script>
결과 전송
귀속되지 않은 사용자 지정 결과를 추적하고 outcome name : true 형식으로 사용자에게 태그를 설정합니다. 클릭 이벤트는 자동으로 추적됩니다.
<button id="send-outcome-button" data-onesignal-unique-label="bonus-claim">
Claim Bonus
</button>
<script>
document.getElementById("send-outcome-button").addEventListener("click", function(e) {
OneSignalIamApi.sendOutcome(e, "bonus_claimed");
});
</script>
HTML 인앱 메시지 개인화
블록 에디터에서와 마찬가지로 HTML 인앱 메시지에서 태그 대체를 사용할 수 있습니다.
태그 대체는 <script> 태그 내에서 작동하지 않습니다.
- 인라인 텍스트 (
<h1>, <p>, <li> 등)
<style> 규칙:
body { background-color: "{{ favorite_color | default: '#fff' }}"; }
- URL이 있는 속성:
hrefsrc<form action><object data>
openUrl() 및 addClickName()에서 태그 사용
<script> 태그는 대체를 지원하지 않으므로 다음 방법 중 하나를 사용하세요:
1. liquidPlayerTags로 모든 태그에 액세스
이 전역 객체는 DOMContentLoaded 후에 사용할 수 있습니다.
<div class="my-tags">--test checking all tags--</div>
<button id="open-url-button" data-onesignal-unique-label="promo-link">
Personalized Offer
</button>
<script>
document.addEventListener("DOMContentLoaded", function() {
if (liquidPlayerTags) {
// liquidPlayerTags becomes available afterthe DOMContentLoaded event confirm
// by checking that the div with --replace with all tags-- is replaced with JSON
document.querySelector(".my-tags").innerHTML = JSON.stringify(liquidPlayerTags);
}
});
document.addEventListener("DOMContentLoaded", function() {
document.getElementById("open-url-button").addEventListener("click", function(e) {
OneSignalIamApi.openUrl(e, "https://shop.com?coupon=" + liquidPlayerTags["coupon"]);
});
});
</script>
href 속성에 태그 저장
<a
id="open-url-button"
href="app://deeplink?code={{ coupon | default: '10OFF' }}"
data-onesignal-unique-label="promo-link"
>
Redeem Offer
</a>
<script>
document.getElementById("open-url-button").addEventListener("click", function(e) {
e.preventDefault();
OneSignalIamApi.openUrl(e, e.currentTarget.href);
});
</script>
다음 단계
