> ## 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>2つの要素が同じ`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)を追跡し、`アウトカム名 : 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)

***