OneSignal Gecikmeli Bildirim

OneSignal bildirim sistemi birden karşımıza çıkıyor bunu gecikmeli hale getireceğiz.

Kısaca OneSignal Nedir ?

OneSignal, Google Chrome, Firefox, Opera, İnternet Explorer gibi tarayıcılardaki site bildirim özelliğini kullanan bir kod yumağıdır.

Bu kodu php sitesi olan herkes kullanabildiği gibi WordPress, Joomla gibi güçlü sistemlerde eklenti olarak kullanılması için sunulmuştur.

Ben de kendi sitelerimde bunu kullanmaktayım. Güzel bir sistem konu yazdığımda abone olan kullanıcılara otomatik olarak bildirimler gönderiyor.

Bildirim sistemi kullanıcıların sitenizi takip etmesi açısından site sahiplerine ve ayrıca kullanıcılara büyük avantaj sağlayan mantıklı bir sistem.

Fakat sistemin zaafiyetinden yararlanmaya lüzum yok!

Sitenizde OneSignal bildirim sistemi kullanıyorsanız, kullanıcıların siteye girer girmez bildirim göstermesine uyuz oluyor olmalısınız.

Siz uyuz olmuyorsanız bile emin olun sitenize giren kullanıcıların çoğu uyuz oluyor.

Ben bile kendi sitemde kullandığım halde duruma iyiden iyiye uyuz oldum.

Bildirimin amacı nedir?

Sitenize girenler sizi büyük ölçüde arama motorlarından bulurlar.

Yani sitenizi bulmadan siteniz hakkında pek fikirleri yoktur.

Fikirleri olması için önce sitenizi incelemeleri gerekir.

Siteyi beğenmişlerse, doğru yeri bulmuşlarsa zaten gitmek istemezler.

Kullanıcılara siteye abone olması için otomatik çıkan kutucuklara ve abonelik sonrasında çıkan bildirimlere bildirim sistemi diyoruz.

Etik olarak olması gereken, sitede belli vakit gezdikten sonra bildirimin çıkmasıdır.

Velhasılkelam OneSignal Standart Ayarlarda Ne Yapıyor?

Siteye girer girmez saniyesinde zart diye bildirim açtırıyor. Pardon zavadanak diye. 😀

Site zaten 3 saniyede açılıyor.

Kullanıcılar tam site açıldı diye sevinmişken, sayfayı okumak için aşağı kaydıracakken ZAVADANAK! diye bildirim karşılarına çıkıyor. 😆

Lan dur bi!

Siteyi seversem zaten takip etmek isterim değil mi?

Bu acele bu emrivakilik nedir bu aymazlık nedir arkadaş! 😬

Karşılarına ZAVADANAK diye çıkan bildirimi gören acemi kullanıcılar nereye tıklayacağını şaşırıyorlar.

Bildirim de soru soruyor Devam Et Etme falan diye.

Siteye devam edebilmek adına mecburen Devam seçeceğini seçmesi gerektiğini zanneden de var.

Karşılarına antipatik şekilde çıkan bildirime kızıp siteyi o an terk eden de var.

Neyse gelin dostlar hep beraber karşımıza pat diye çıkan bu yöntemi geciktirelim.

OneSignal Bildirim Geciktirme Yöntemi

Edit: Yazıyı tekrar elden geçirdim. Çünkü wordpress eklentisinde geciktirme yöntemini paralı özellik haline getirdiler ve bizim kodlar çalışmaz hale geldi.

Üzülmeye lüzum yok bu kodu eklenti kurarak çalıştırmak zorunda değilsiniz.

Yeni Yöntem 2021

Yeni yöntemde functions içine ekleme yoluyla kodu çalıştıracağız.

Bildirimin 20-30 saniye sonra gelme ayarını da auto prompt ile yapacağız.

  • One signal ayarlarına gidin
  • Configure web push kısmına gelin.
  • buradan Typical site yi seçin.
  • Ayarlamalarınızı yapın.
  • 3. kısım ek ayarlarında auto prompt kısmına dikkat edin.
  • Burada bize kaç saniye sonra bildirimin gösterileceği ayarı verilmiş.
  • Ayarları yaptıktan sonra done ve save butonları ile kayıt edin.
  • Kayıt sonrası kod gelecek. İster bu kodu sitenizin head-head arasına koyun.
  • Kodu koymakta zorlanıyorsanız Snippets eklentisi yardımı ile functions yoluyla basitçe ekleyebilirsiniz.
  • Sitenize en basit olarak Snippets eklentisi ile bunu functions olarak ekleyebilirsiniz.
  • Son olarak sdk java dosyalarını (2 adet js dosyacığı) sitenize eklemeniz gerekmekte.
  • Ben karışıklık olmasın diye ftp üzerinden 1 numaralı klasöre ekledim ve aşağıdaki kod değişikliği ile yolu belirttim.
  • Siz de öyle yapabilirsiniz.

Benim sniptests içine yazdığım kod bu. Bu kod biraz karmaşık gibi görünebilir ama siz de bu kodu ekleyebilirsiniz.
(Kod içine id numaranızı girmeyi unutmayın.)

add_action( 'wp_head', function () { ?>


<script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" async=""></script>
<script>
   var OneSignal = window.OneSignal || [];
    var initConfig = {
        appId: "BURAYA ID NUMARANIZ GELECEK",
        notifyButton: {
            enable: true
        },
    };
    OneSignal.push(function () {
        OneSignal.SERVICE_WORKER_PARAM = { scope: '/1/' };
        OneSignal.SERVICE_WORKER_PATH = '1/OneSignalSDKWorker.js'
        OneSignal.SERVICE_WORKER_UPDATER_PATH = '1/OneSignalSDKUpdaterWorker.js'
        OneSignal.init(initConfig);
    });
</script>



<?php } );

 


KONU BİTTİ.

Bonus olarak Sadece yazı ve Sayfalarda Gecikmeli kod:

function onesignal_sadeceyazivesayfa ()   
{  
    if (is_single() || is_page()) { /* If Post or Page */ ?>  
<!-- Syntax Highlighter Styles -->


<script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" async=""></script>
<script>
   var OneSignal = window.OneSignal || [];
    var initConfig = {
        appId: "BURAYA ONESIGNAL ID NİZİ GİRİNİZ",
        notifyButton: {
            enable: true
        },
    };
    OneSignal.push(function () {
        OneSignal.SERVICE_WORKER_PARAM = { scope: '/1/' };
        OneSignal.SERVICE_WORKER_PATH = '1/OneSignalSDKWorker.js'
        OneSignal.SERVICE_WORKER_UPDATER_PATH = '1/OneSignalSDKUpdaterWorker.js'
        OneSignal.init(initConfig);
    });
</script>
  
    <?php }  
}  
add_action('wp_head', 'onesignal_sadeceyazivesayfa', 1);

 

BUTONA BASINCA ESKİ YÖNTEMİ DE İNCELEYEBİLİRSİNİZ.

Eski Yöntem Artık Çalışmıyor!

Normal onesignal kullanıcıları ve One signal WordPress Eklentisi kullananlar için bu konuyu yazmadan edemedim.

İlk önce WordPress Kullancıları İçin Anlatayım.

Bize lazım olan tek şey ufak bir hamle ve functions kodu.

Onesignal i kurdunuz çalıştırdığınız varsayıyorum.

Öncelikle yapacağımız hamleyi göstereyim.

Ayarlara girin ve Automatic Prompt ile başlayan aşağıdaki seçeneği kapatın !

Automatically prompt new site visitors with OneSignal Slide Prompt before Native Browser Prompt (recommended)

Bu seçenek, siteye giren misafirlerin pat diye otomatik bildirim görmesini sağlıyordu.

Bu seçeneğin dibine bir zaman seçeneği koysalardı bu konuya da gerek olmazdı uğraşmazdık!

Neyse seçeneği kaldırdık ki artık kontrol bizde.

Şimdi tek yapmamız gereken şey aşağıda size sunduğum iki adet özel functions kodundan istediğinizi girmek.

Functions Kodu nedir? WordPress te php olarak kod eklememiz için wordpress in bize sunduğu bir özelliktir.

Functions.php dosyasına gireceğimiz kod, sitenin bütününe veya kısmına ek özellik kazandırabilir.

Functions.php ye elle kod girmeyi bilmeyenler Code Snippets eklentisini kullanabilirler.

Şu konumuzda bu eklentiyi paylaşıp kısaca anatmıştım.

Dikkat: Aşağıdaki Kodların içinde notificationPromptDelay = 12000; kısmını ben 12 saniye olarak ayarladım ki kodun çalışıp çalışmadığını deneyenler sitesinde fazla beklemeden görsünler diye.
Siz 1 dk yapmak isterseniz oraya yüz bin yazmalısınız yani: 100000 

Yukarıdaki kod tüm sitede geçerli… Yani  bu durumda sitenizin Ana sayfasına girenler bile bildirimi görecek.

Ben Ana Sayfaya girenlerin bildirimi görmesini istemiyorum, Sadece Yazılarda ve Sayfalarda kodum çalışsın isterim.

Misafirler önce bir konu okusunlar sonra zaten aboneliği kendileri karar verirler derseniz, aşağıdaki kodu eklemelisiniz.


OneSignal Gecikmeli Bildirim Kodu:
(Tüm Sitede Geçerli Olan Kod)

Kodumuz aşağıdaki gibidir. Bu kodu Functions.php dosyanıza eklemelisiniz.

Bilenler elle ekleyebilir bilmeyenler yukarıda linkini verdiğim Code snippets eklentisi ile ekleyebilirler.

add_action( 'wp_head', function () { ?>
<script>
  window.OneSignal = window.OneSignal || [];
  
  /* 12000 yazdığım yer 12 saniye demektir. Siz 1 dakika yapacaksanız örneğin burayı 60000 yapmalısınız. */
  var notificationPromptDelay = 12000;
  
  window.OneSignal.push(function() {
/* Yalnızca komut dosyası yürütme ile geciktirilebilen setTimeout () kullanmak yerine sayfanın ne zaman yüklendiğini öğrenmek için gezinme zamanlamasını kullanın*/
    var navigationStart = window.performance.timing.navigationStart;

    /* Geçerli Saati Al */
    var timeNow = Date.now();

    /* Yeterli Süre Geçtiyse Kulllanıcıya Sor Kodu */
    setTimeout(promptAndSubscribeUser, Math.max(notificationPromptDelay - (timeNow - navigationStart), 0));
  });
  
  function promptAndSubscribeUser() {
    window.OneSignal.isPushNotificationsEnabled(function(isEnabled) {
      if (!isEnabled) {
        window.OneSignal.showSlidedownPrompt();
      }
    });
  }
</script>
<?php } );

OneSignal Gecikmeli Bildirim Kodu:
(Sadece Ana Sayfada Geçerli Olan Kod)

function onesignal_gecikme ()   
{  
    if (is_home()) { ?>

  <script>
  window.OneSignal = window.OneSignal || [];
  
  /* 12000 yazdığım yer 12 saniye demektir. Siz 1 dakika yapacaksanız örneğin burayı 60000 yapmalısınız. */
  var notificationPromptDelay = 12000;
  
  window.OneSignal.push(function() {
    /* Yalnızca komut dosyası yürütme ile geciktirilebilen setTimeout() kullanmak yerine sayfanın ne zaman yüklendiğini öğrenmek için gezinme zamanlamasını kullanın*/
    var navigationStart = window.performance.timing.navigationStart;

    /* Geçerli Saati Al */
    var timeNow = Date.now();

/* Yeterli Süre Geçtiyse Kulllanıcıya Sor Kodu */
    setTimeout(promptAndSubscribeUser, Math.max(notificationPromptDelay - (timeNow - navigationStart), 0));
  });
  
  function promptAndSubscribeUser() {
    window.OneSignal.isPushNotificationsEnabled(function(isEnabled) {
      if (!isEnabled) {
        window.OneSignal.showSlidedownPrompt();
      }
    });
  }
</script> 
  
    <?php }  
}  
add_action('wp_head', 'onesignal_gecikme', 1);

OneSignal Gecikmeli Bildirim Kodu:
(Sadece Yazı ve Sayfalarda Geçerli Olan Kod)

function onesignal_gecikme ()   
{  
    if (is_single() || is_page()) { ?>

  <script>
  window.OneSignal = window.OneSignal || [];
  
  /* 12000 yazdığım yer 12 saniye demektir. Siz 1 dakika yapacaksanız örneğin burayı 60000 yapmalısınız. */
  var notificationPromptDelay = 12000;
  
  window.OneSignal.push(function() {
    /* Yalnızca komut dosyası yürütme ile geciktirilebilen setTimeout() kullanmak yerine sayfanın ne zaman yüklendiğini öğrenmek için gezinme zamanlamasını kullanın*/
    var navigationStart = window.performance.timing.navigationStart;

    /* Geçerli Saati Al */
    var timeNow = Date.now();

/* Yeterli Süre Geçtiyse Kulllanıcıya Sor Kodu */
    setTimeout(promptAndSubscribeUser, Math.max(notificationPromptDelay - (timeNow - navigationStart), 0));
  });
  
  function promptAndSubscribeUser() {
    window.OneSignal.isPushNotificationsEnabled(function(isEnabled) {
      if (!isEnabled) {
        window.OneSignal.showSlidedownPrompt();
      }
    });
  }
</script> 
  
    <?php }  
}  
add_action('wp_head', 'onesignal_gecikme', 1);

OneSignal Gecikmeli Bildirim Kodu:
(Sadece Yazılarda Geçerli Olan Kod)

function onesignal_gecikme ()   
{  
    if (is_single()) { ?>

  <script>
  window.OneSignal = window.OneSignal || [];
  
  /* 12000 yazdığım yer 12 saniye demektir. Siz 1 dakika yapacaksanız örneğin burayı 60000 yapmalısınız. */
  var notificationPromptDelay = 12000;
  
  window.OneSignal.push(function() {
    /* Yalnızca komut dosyası yürütme ile geciktirilebilen setTimeout() kullanmak yerine sayfanın ne zaman yüklendiğini öğrenmek için gezinme zamanlamasını kullanın*/
    var navigationStart = window.performance.timing.navigationStart;

    /* Geçerli Saati Al */
    var timeNow = Date.now();

/* Yeterli Süre Geçtiyse Kulllanıcıya Sor Kodu */
    setTimeout(promptAndSubscribeUser, Math.max(notificationPromptDelay - (timeNow - navigationStart), 0));
  });
  
  function promptAndSubscribeUser() {
    window.OneSignal.isPushNotificationsEnabled(function(isEnabled) {
      if (!isEnabled) {
        window.OneSignal.showSlidedownPrompt();
      }
    });
  }
</script> 
  
    <?php }  
}  
add_action('wp_head', 'onesignal_gecikme', 1);

OneSignal Gecikmeli Bildirim Kodu:
(Sadece Sayfalarda Geçerli Olan Kod)

function onesignal_gecikme ()   
{  
    if (is_page()) { ?>

  <script>
  window.OneSignal = window.OneSignal || [];
  
  /* 12000 yazdığım yer 12 saniye demektir. Siz 1 dakika yapacaksanız örneğin burayı 60000 yapmalısınız. */
  var notificationPromptDelay = 12000;
  
  window.OneSignal.push(function() {
    /* Yalnızca komut dosyası yürütme ile geciktirilebilen setTimeout() kullanmak yerine sayfanın ne zaman yüklendiğini öğrenmek için gezinme zamanlamasını kullanın*/
    var navigationStart = window.performance.timing.navigationStart;

    /* Geçerli Saati Al */
    var timeNow = Date.now();

/* Yeterli Süre Geçtiyse Kulllanıcıya Sor Kodu */
    setTimeout(promptAndSubscribeUser, Math.max(notificationPromptDelay - (timeNow - navigationStart), 0));
  });
  
  function promptAndSubscribeUser() {
    window.OneSignal.isPushNotificationsEnabled(function(isEnabled) {
      if (!isEnabled) {
        window.OneSignal.showSlidedownPrompt();
      }
    });
  }
</script> 
  
    <?php }  
}  
add_action('wp_head', 'onesignal_gecikme', 1);

OneSignal X Tıklamadan Sonra Gecikmeli Bildirim Kodu:
(Şu Kadar Tıklamadan Sonra Abonelik Bildirimi Çıkartalım)

Gecikmeliden ziyade bir de şu kadar sayfa açtıktan sonra gösterilsin kodu var. Bu kod sadece javascript kodudur.

Yukarıdan isteğinize göre (sadece yazılarda göster veya diğerleri) ana kodu kopyalayıp içindeki javascript kodunu silip bununla değiştirmelisiniz.

<script>
  window.OneSignal = window.OneSignal || [];
  var numVisitsTrigger = 3; /* Sayfa ziyaterleri sayısı */
  
  window.OneSignal.push(function() {
    var numVisits = new Number(localStorage['numVisitsTrigger'] || 0);
    numVisits += 1;
    localStorage['numVisitsTrigger'] = numVisits;
    if (numVisits >= numVisitsTrigger) {
      promptAndSubscribeUser();
    }
  });
  
  function promptAndSubscribeUser() {
    window.OneSignal.isPushNotificationsEnabled(function(isEnabled) {
      if (!isEnabled) {        
        window.OneSignal.showSlidedownPrompt();
      }
    });
  }
</script>

Kaynak: https://documentation.onesignal.com/docs/web-push-wordpress-faq#section-how-do-i-delay-prompting-users-


Elle kuranlar aşağıdaki kodu nereye nasıl gireceğini zaten kendileri bilirler:

Gecikmeli Bildirim Kodu:

<script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" async=""></script>
<script>
  var OneSignal = window.OneSignal || [];
  OneSignal.push(function() {
    OneSignal.init({
      appId: "YOUR_APP_ID",
    });
    /* 12000 yazdığım yer 12 saniye demektir. Siz 1 dakika yapacaksanız örneğin burayı 60000 yapmalısınız. */
    var notificationPromptDelay = 30000;
    /* Yalnızca komut dosyası yürütme ile geciktirilebilen setTimeout() kullanmak yerine sayfanın ne zaman yüklendiğini öğrenmek için gezinme zamanlamasını kullanın*/
    var navigationStart = window.performance.timing.navigationStart;
    /* Zamanı al */
    var timeNow = Date.now();
    /* Yeterli süre geçtiyse kullanıcıya sor */
    setTimeout(promptAndSubscribeUser, Math.max(notificationPromptDelay - (timeNow - navigationStart), 0));
  });
  function promptAndSubscribeUser() {
    window.OneSignal.isPushNotificationsEnabled(function(isEnabled) {
      if (!isEnabled) {
        window.OneSignal.showSlidedownPrompt();
      }
    });
  }
</script>

Sitede Şu Kadar Tıklamadan Sonra Gösterilsin Bildirim Kodu:

<script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" async=""></script>
<script>
  var OneSignal = window.OneSignal || [];
  OneSignal.push(function() {
    OneSignal.init({
      appId: "YOUR_APP_ID",
    });
  });
</script>
<script>
  window.OneSignal = window.OneSignal || [];
  var numVisitsTrigger = 3; /* Sayfa ziyaretlleri Sayısı */
  
  window.OneSignal.push(function() {
    var numVisits = new Number(localStorage['numVisitsTrigger'] || 0);
    numVisits += 1;
    localStorage['numVisitsTrigger'] = numVisits;
    if (numVisits >= numVisitsTrigger) {
      promptAndSubscribeUser();
    }
  });
  
  function promptAndSubscribeUser() {
    /* Want to trigger different permission messages? See: https://documentation.onesignal.com/docs/permission-requests#section-onesignal-permission-messages */
    window.OneSignal.isPushNotificationsEnabled(function(isEnabled) {
      if (!isEnabled) {        
        window.OneSignal.showNativePrompt();
      }
    });
  }
</script>

WordPress harici kullanılan kod için Kaynak: https://documentation.onesignal.com/docs/web-push-custom-code-examples 


 

Yazar: utquick

Merhaba, Bu site 2017 senesinde kurulmuştur: Kemal SUNAL 'ın 100 Numaralı Adam filminden feyz alınarak kurulan sitemiz, filmdeki Halk Kahramanı rolünü de bünyesine katarak dürüst paylaşımlarda bulunmaktadır. Bizi takip ediniz. Büyük bir aile oluyoruz. Tek güvencemiz paylaşımlarımızın samimiliğidir.

Bunlar da hoşunuza gidebilir...

Bir yanıt yazın

Cevabı alabilmek için E-Posta adresinizi doğru yazmaya özen gösteriniz.