> ## 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.

# Uygulama içi mesaj JavaScript API referansı

> OneSignal'de etkileşimli HTML uygulama içi mesajları için JavaScript metodları.

Bu kılavuz, [OneSignal HTML Editörü](./design-your-in-app-message-with-html) ile oluşturulan HTML uygulama içi mesajları için **JavaScript API**'yi kapsar.

Tetikleyiciler ayarlamak, uygulama içi tıklama olaylarını işlemek veya uygulama içi yaşam döngüsünü yönetmek için **SDK metodları** arıyorsanız, [Mobil SDK Referansı](./mobile-sdk-reference#in-app-messages)'na bakın.

***

## Gereksinimler

### 1. Tıklama takibi için `data-onesignal-unique-label` kullanın

Tüm tıklanabilir öğelerin **benzersiz** bir değer ile `data-onesignal-unique-label` niteliği olmalıdır. Bu, OneSignal'in şunları yapmasını sağlar:

* Tıklama analitiğini takip etme
* İlişkili eylemleri doğru şekilde tetikleme

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

<Warning> İki öğe aynı `data-onesignal-unique-label`'ı paylaşırsa, tıklamalar yanlış kaydedilebilir veya eylemler tetiklenmeyebilir. </Warning>

### 2. Olay dinleyicileri ekleyin

OneSignal uygulama içi eylemlerini tetiklemek için açıkça JavaScript olay dinleyicileri eklemelisiniz.

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

**Örnek:**

```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>
```

***

## Mevcut fonksiyonlar

[Blok Editörü](./design-your-in-app-message)'ndeki tüm [tıklama eylemleri](./iam-click-actions), HTML uygulama içi mesajlar için de kullanılabilir.

### Push izin istemi

Yerel push bildirimi izin istemini gösterir. Tıklama olayları otomatik olarak takip edilir.

[Push izinleri için istem](./prompt-for-push-permissions) sayfasına bakın.

```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>
```

### Konum izin istemi

Yerel konum izin istemini gösterir. Tıklama olayları otomatik olarak takip edilir.

[Konum izin istemleri](./location-opt-in-prompt) sayfasına bakın.

```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>
```

### Uygulama içi mesajı kapat

Mevcut uygulama içi mesajı kapatır. Tıklama olayları otomatik olarak takip edilir.

```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>
```

### Kullanıcıyı etiketle

Bir [Etiket](./add-user-data-tags) ayarlar. Tıklama olayları otomatik olarak takip edilir.

```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 aç

Cihazın tarayıcısında bir URL açar ve uygulama içi mesajı kapatır. Tıklama olayları otomatik olarak takip edilir.

[Derin Bağlantı](./deep-linking)'yı destekler.

```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>
```

### Tıklama adı

[Uygulama içi mesaj tıklama dinleyicisi](./mobile-sdk-reference#addclicklistener-in-app)'nde okunabilecek bir tıklama adı atar. Tıklama olayları otomatik olarak takip edilir.

[Derin Bağlantı](./deep-linking)'yı destekler.

```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>
```

### Tıklamayı takip et

Diğer tıklanabilir API metodlarını kullanmadığınızda bir tıklama olayını takip eder.

```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>
```

### Sonuç gönder

Atfedilmemiş bir [Özel Sonuç](./custom-outcomes) takip eder ve kullanıcıya `sonuç adı : true` formatında bir [Etiket](./add-user-data-tags) ayarlar. Tıklama olayları otomatik olarak takip edilir.

```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 uygulama içi mesajları kişiselleştirme

Blok Editöründe olduğu gibi HTML uygulama içi mesajlarda da etiket ikamesini kullanabilirsiniz.

<Warning> Etiket ikamesi `<script>` etiketlerinin **içinde çalışmaz**. </Warning>

Etiket ikamesi şunlar için çalışır:

* Satır içi metin (`<h1>`, `<p>`, `<li>`, vb.)
* `<style>` kuralları:
  ```css CSS theme={null}
  body { background-color: "{{ favorite_color | default: '#fff' }}"; }
  ```
* URL'li nitelikler:
  * `href`
  * `src`
  * `<form action>`
  * `<object data>`

### `openUrl()` ve `addClickName()` içinde etiketleri kullanma

`<script>` etiketleri ikameyi desteklemediğinden, bu yöntemlerden birini kullanın:

**1. `liquidPlayerTags` ile tüm etiketlere erişin**

Bu global nesne `DOMContentLoaded` sonrasında kullanılabilir hale gelir.

```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` niteliğinde bir etiket saklayın**

```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>
```

***

## Sonraki adımlar

* [Etiket ikamesi için liquid sözdizimini kullanma](./using-liquid-syntax) hakkında daha fazla bilgi edinin
* URL işleme için [Derin Bağlantı](./deep-linking)'yı keşfedin
* [HTML ile uygulama içi mesajları tasarlayın](./design-your-in-app-message-with-html)

***