Ana içeriğe atla
Bu kılavuz, OneSignal HTML Editörü 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ı’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
<button id="tag-user-button" data-onesignal-unique-label="my-tag-user-button">
  Tag User
</button>
İki öğe aynı data-onesignal-unique-label’ı paylaşırsa, tıklamalar yanlış kaydedilebilir veya eylemler tetiklenmeyebilir.

​
2. Olay dinleyicileri ekleyin

OneSignal uygulama içi eylemlerini tetiklemek için açıkça JavaScript olay dinleyicileri eklemelisiniz.
JavaScript
document.getElementById("tag-user-button")
  .addEventListener("click", function(e) {
    OneSignalIamApi.tagUser(e, { fiz: "baz" });
  });
Örnek:
HTML
<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ü’ndeki tüm tıklama eylemleri, 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 sayfasına bakın.
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>

​
Konum izin istemi

Yerel konum izin istemini gösterir. Tıklama olayları otomatik olarak takip edilir. Konum izin istemleri sayfasına bakın.
HTML
<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
<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 ayarlar. Tıklama olayları otomatik olarak takip edilir.
HTML
<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ı’yı destekler.
HTML
<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’nde okunabilecek bir tıklama adı atar. Tıklama olayları otomatik olarak takip edilir. Derin Bağlantı’yı destekler.
HTML
<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
<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ç takip eder ve kullanıcıya sonuç adı : true formatında bir Etiket ayarlar. Tıklama olayları otomatik olarak takip edilir.
html
<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.
Etiket ikamesi <script> etiketlerinin içinde çalışmaz.
Etiket ikamesi şunlar için çalışır:
  • Satır içi metin (<h1>, <p>, <li>, vb.)
  • <style> kuralları:
    CSS
    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
<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
<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