> ## Documentation Index
> Fetch the complete documentation index at: https://documentation.onesignal.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 인앱 메시지 JavaScript API 레퍼런스

> OneSignal의 인터랙티브 HTML 인앱 메시지를 위한 JavaScript 메서드.

이 가이드는 [OneSignal HTML 에디터](./design-your-in-app-message-with-html)로 생성된 HTML 인앱 메시지를 위한 **JavaScript API**를 다룹니다.

트리거 설정, 인앱 클릭 이벤트 처리 또는 인앱 수명 주기 관리를 위한 **SDK 메서드**를 찾고 있다면 [모바일 SDK 레퍼런스](./mobile-sdk-reference#in-app-messages)를 참조하세요.

***

## 요구 사항

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

모든 클릭 가능한 요소에는 **고유한** 값을 가진 `data-onesignal-unique-label` 속성이 있어야 합니다. 이를 통해 OneSignal은 다음을 수행할 수 있습니다:

* 클릭 분석 추적
* 관련 작업을 올바르게 트리거

```html HTML theme={null}
<button id="tag-user-button" data-onesignal-unique-label="my-tag-user-button">
  Tag User
</button>
```

<Warning> 두 요소가 동일한 `data-onesignal-unique-label`을 공유하면 클릭이 잘못 기록되거나 작업이 실행되지 않을 수 있습니다. </Warning>

### 2. 이벤트 리스너 연결

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

```javascript JavaScript theme={null}
document.getElementById("tag-user-button")
  .addEventListener("click", function(e) {
    OneSignalIamApi.tagUser(e, { fiz: "baz" });
  });
```

**예제:**

```html HTML theme={null}
<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>
```

***

## 사용 가능한 함수

[블록 에디터](./design-your-in-app-message)의 모든 [클릭 작업](./iam-click-actions)도 HTML 인앱 메시지에서 사용할 수 있습니다.

### 푸시 권한 프롬프트

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

[푸시 권한 프롬프트](./prompt-for-push-permissions)를 참조하세요.

```html HTML theme={null}
<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>
```

### 위치 권한 프롬프트

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

[위치 권한 프롬프트](./location-opt-in-prompt)를 참조하세요.

```html HTML theme={null}
<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>
```

### 인앱 메시지 닫기

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

```html html theme={null}
<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>
```

### 사용자 태그 지정

[태그](./add-user-data-tags)를 설정합니다. 클릭 이벤트는 자동으로 추적됩니다.

```html HTML theme={null}
<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을 열고 인앱 메시지를 닫습니다. 클릭 이벤트는 자동으로 추적됩니다.

[딥 링킹](./deep-linking)을 지원합니다.

```html HTML theme={null}
<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>
```

### 클릭 이름

[인앱 메시지 클릭 리스너](./mobile-sdk-reference#addclicklistener-in-app)에서 읽을 수 있는 클릭 이름을 할당합니다. 클릭 이벤트는 자동으로 추적됩니다.

[딥 링킹](./deep-linking)을 지원합니다.

```html HTML theme={null}
<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 메서드를 사용하지 않을 때 클릭 이벤트를 추적합니다.

```html html theme={null}
<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>
```

### 결과 전송

귀속되지 않은 [사용자 지정 결과](./custom-outcomes)를 추적하고 `outcome name : true` 형식으로 사용자에게 [태그](./add-user-data-tags)를 설정합니다. 클릭 이벤트는 자동으로 추적됩니다.

```html html theme={null}
<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 인앱 메시지에서 태그 대체를 사용할 수 있습니다.

<Warning> 태그 대체는 `<script>` 태그 내에서 **작동하지 않습니다**. </Warning>

태그 대체가 작동하는 경우:

* 인라인 텍스트 (`<h1>`, `<p>`, `<li>` 등)
* `<style>` 규칙:
  ```css CSS theme={null}
  body { background-color: "{{ favorite_color | default: '#fff' }}"; }
  ```
* URL이 있는 속성:
  * `href`
  * `src`
  * `<form action>`
  * `<object data>`

### `openUrl()` 및 `addClickName()`에서 태그 사용

`<script>` 태그는 대체를 지원하지 않으므로 다음 방법 중 하나를 사용하세요:

**1. `liquidPlayerTags`로 모든 태그에 액세스**

이 전역 객체는 `DOMContentLoaded` 후에 사용할 수 있습니다.

```html HTML theme={null}
<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>
```

**2. `href` 속성에 태그 저장**

```html HTML theme={null}
<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>
```

***

## 다음 단계

* [태그 대체를 위한 Liquid 구문 사용](./using-liquid-syntax)에 대해 자세히 알아보기
* URL 처리를 위한 [딥 링킹](./deep-linking) 살펴보기
* [HTML로 인앱 메시지 디자인](./design-your-in-app-message-with-html)

***