Web Push Notification (Bildirim) Kurulumu (Detaylı Anlatım)
Merhaba Arkadaşlar,
Bugün sizlere bloguma yeni eklediğim bildirimlere abone olma eklentisi olan "Web Push Notification'ı" blogunuza nasıl ekleyeceğinizi anlatacağım.
Nedir Bu Web Push Notification (Web Bildirimi)
Web Push Notification (Web Bildirim), internet sitelerinin tarayıcı (browser) aracılığıyla ziyaretçilerinin izni ile bildirim göndermelerine olanak sağlayan bir servistir. Bu servis sayesinde web siteleri sahipleri içeriklerini, haberlerini ve duyurularını izin veren ziyaretçileriyle anlık olarak paylaşabilirler.
Websitenizde yaptığınız kampanyaları, indirimleri veya yeni içeriklerinizi daha önceden sitenize gelmiş kişilere bildirmek için kullanılabilecek en güvenilir sistemlerden bir tanesi push servisleridir. Bildirim sistemlerinin de en iyilerinden bir tanesi OneSignal’dir. Çünkü neredeyse her platformda sorunsuz bir şekilde çalışmaktadır.
Mesaj şablonları hazırlayarak daha sonra kullanmak istediğiniz bildirim mesajlarını kaydedebilir, zamanlama planlayarak istediğiniz saat ve dakikada bildiriminizi kullanıcılarınıza gönderebilirsiniz. Gönderdiğiniz bildirimlerin analizlerini onesignal üzerinden detaylı bir şekilde yapabilirsiniz.
Web Push Notification (Web Bildirimi) Kurulumu
İlk olarak sitemize buradan giriş yapıyoruz ve yeni hesap oluşturuyoruz eğer hesabınız varsa giriş yapınız.Daha sonra gelen ekran karşısında "Add App" butonuna tıkladıktan sonra bir pencere açılacak açılan pencerede uygulama ismini giriniz ve "Add App" butonuna tıklayarak bir sonraki sayfamıza geçiyoruz.
Yapılandıracağınız bir platform seçiniz biz burada sitemize eklemek istiyorsak "Web Push" diyerek ilerliyoruz.Daha fazla platform yapılandırmak için bu ekrana dönebilirsiniz.
Ekrana gelen sayfada üç seçenek olacaktır.Tipik site(Tipik web siteleri için. Emin değilseniz bunu seçin.), Web sitesi oluşturucu için Wordpress eklentisi(Wordpress, Blogger, Shopify veya diğer içerik yönetim sistemlerini kullanan siteler için.), Özel Kod(JavaScript kullanarak web push yapılandırmasını kodlamak isteyen ileri düzey kullanıcılar için.) biz blogger'a ekleyeceğimiz için Web sitesi oluşturucu için Wordpress eklentisi'ni seçiyoruz.
Karşımıza gelen ekrandan hangi içerik sistemini kullanıyorsak onu seçerek devam ediyoruz.
Daha sonra sayfamızı aşağı doğru kaydırıyoruz.Blogger Site Kurulumu alanına geldiğimizde site adınızı, site linkinizi yazmanız ve bir icon yüklemeniz isteniyor.Etiket seçiniz kısmına da sitenizin adınızı yazın.Bu alanı doldurduktan sonra üçüncü alana geçiniz.
İzin İstemi Kurulumu alanında site kullanıcılarına bildirim göndermeden önce izin istemelidir.Bu arayüzde, kullanıcılardan izin istenmesinin yollarını seçebileceksiniz.Başka Bir Bilgi İsteği Ekle'yi seçerek sitenizde bir veya daha fazla farklı bilgi istemi ayarlayabilirsiniz. Her türden sadece bir bilgi istemi kurabilirsiniz.
"Add A Prompt" diyerek izin alma araçlarını kuruyoruz.
Burada 4 farklı izin alma aracı var bunlar abonelik zili, yerel bilgi sistemi, slayt istemi ve özel bağlantıdır.Biz ilkinden başlayarak hepsinin kurulumunu anlatacağız.
İlk olarak abonelik zilinden başlayalım.Abonelik zilini seçtikten sonra zilin ayarlarını yapmamız lazım istediğiniz boyutu seçiniz(büyük, orta, küçük).Daha sonra sayfanızın hangi kısmında görüntülemek istediğinizi seçmelisiniz(sol, sağ).Zilin arka plan rengini kendi sitenize özel renk belirleyebilirsiniz.Zil simgesinin rengini de özel renk olarak ayarlayabilirsiniz.
Görünürlük kısmından ise eğer kullanıcı abone ise zili gizlemenizi sağlar(Bu ayarı seçmenizi öneririm).Zil metnini özelleştirme kısmını açarak varsayılan metinleri değiştirebilirsiniz(Varsayılan mesaj biçimi ingilizcedir.Siz bunu Türkçe olarak kendi metinlerinizi yazarak doldurabilirsiniz).Gelişmiş seçenekler kısmında ise zili ayarlanan piksel miktarlarıyla köşelerden uzaklaştırmanızı sağlar.
Yerel Bilgi İstemi ise pek fazla ayara gerek yoktur."Native Browser Prompt" kısmını aktif etmelisiniz.Daha sonra kaydediniz.(Yerel Bilgi İstemi yalnızca HTTPS sitelerinde kullanılabilir!!)
Slayt İsteminin kurulumunda ise aynı Yerel Bilgi İstemi gibi "Native Browser Prompt" seçeneği seçili olmalıdır.Otomatik yanıt alması lazım olduğu için bu alanı seçmeliyiz.Slayt istemi metnini özelleştirme kısmını ise mutlaka kendiniz Türkçeye çevirin veya kendi özel mesajlarınızı giriniz.
Özel Bağlantı kurulumunda ise buton olarak kullanmak isterseniz butonu seçebilirsiniz eğer link olarak kullanacaksanız linki seçiniz.Yine boyutunu belirlemelisiniz(büyük, orta, küçük).Butonunuzun veya linkinizin rengini eğer butonu seçerseniz yazının rengini de belirliyorsunuz.Link dediğimiz bildiğimiz bağlantı köprüsü olan metindir.Abone metninizi isterseniz kişiselleştirebilirsiniz dediğim gibi varsayılanı ingilizce olduğu için abone metnini Türkçeye çevirmenizi öneririm.Açıklama kısmınız isteğinize bağlıdır.Abonelikten çıkma izni sizin isteğinize bağlıdır isterseniz seçersiniz.Site işaretlemesine eklenecek kod örneği. Kod onay aşamasında tekrarlanacaktır.Kaydet diyerek çıkıyoruz.
İzin istemlerinin ayarlarını yaptıktan sonra dördüncü alan olan "Karşılama Bildirimi" alanında ise bildirimlerinize abone olanlara karşılama bildirimi göndermenizi sağlar.Bu nasıl bir şey derseniz mesela benim bildirimlerime abone oldunuz(Bu arada mutlaka abone olun işinize yarayabilecek makaleler yayınlamaya çalışacağım).Bize abone olduğunuz için teşekkür ederiz şeklinde size bildirim geliyor(Aşağıdaki resimde görmüş olduğunuz gibi)Eğer bildirimlerinize tıklayan olursa diye kendi sitenizde özel bir teşekkür sayfası oluşturmakta size kalmış veya sitenizin direk linkini de verebilirsiniz.
"Advanced" alanına yani beşinci alana doğru ilerliyoruz.Burada süreklilik kısmında ki seçenek sizin isteğinize bağlıdır.Ne oluyor ki derseniz bildirimler tıklanıncaya kadar ekranda kalır.
Tüm ayarlarımızı yaptıktan sonra "Save" diyerek kaydediyoruz.Karşımıza gelen ekranda sitemize nasıl kaydedeceğimiz gösteriliyor.Blogger>Tema>HTML'yi Düzenle sekmesine gidiyoruz.Kod paneline bir kere tıklayıp "CTRL+F" kısayoluna tıklayarak <head> kısmını arayınız.<head> kısmının hemen altına "Script" kısmını ekliyoruz.Alttaki kod kısmı ise özel bağlantı ayarı yapmıştık bu kısmı istediğiniz sayfaya ekleyebilirsiniz.Bu kodu birden fazla kullanabilirsiniz.
Eğer sitenin kendi kılavuzuna bakmak isterseniz buraya tıklayınız.
Evet arkadaşlar yine güzel bir makalenin sonuna gelmiş bulunmaktayız.Umarım beğenmişsinizdir.Bize destek olmak için bizi sosyal medya hesaplarınızda paylaşmayı unutmayınız.Bir sonraki içerikte görüşmek üzere Hoşçakalın..
Bugün sizlere bloguma yeni eklediğim bildirimlere abone olma eklentisi olan "Web Push Notification'ı" blogunuza nasıl ekleyeceğinizi anlatacağım.
Nedir Bu Web Push Notification (Web Bildirimi)
Web Push Notification (Web Bildirim), internet sitelerinin tarayıcı (browser) aracılığıyla ziyaretçilerinin izni ile bildirim göndermelerine olanak sağlayan bir servistir. Bu servis sayesinde web siteleri sahipleri içeriklerini, haberlerini ve duyurularını izin veren ziyaretçileriyle anlık olarak paylaşabilirler.
Websitenizde yaptığınız kampanyaları, indirimleri veya yeni içeriklerinizi daha önceden sitenize gelmiş kişilere bildirmek için kullanılabilecek en güvenilir sistemlerden bir tanesi push servisleridir. Bildirim sistemlerinin de en iyilerinden bir tanesi OneSignal’dir. Çünkü neredeyse her platformda sorunsuz bir şekilde çalışmaktadır.
Mesaj şablonları hazırlayarak daha sonra kullanmak istediğiniz bildirim mesajlarını kaydedebilir, zamanlama planlayarak istediğiniz saat ve dakikada bildiriminizi kullanıcılarınıza gönderebilirsiniz. Gönderdiğiniz bildirimlerin analizlerini onesignal üzerinden detaylı bir şekilde yapabilirsiniz.
Web Push Notification (Web Bildirimi) Kurulumu
İlk olarak sitemize buradan giriş yapıyoruz ve yeni hesap oluşturuyoruz eğer hesabınız varsa giriş yapınız.Daha sonra gelen ekran karşısında "Add App" butonuna tıkladıktan sonra bir pencere açılacak açılan pencerede uygulama ismini giriniz ve "Add App" butonuna tıklayarak bir sonraki sayfamıza geçiyoruz.
Yapılandıracağınız bir platform seçiniz biz burada sitemize eklemek istiyorsak "Web Push" diyerek ilerliyoruz.Daha fazla platform yapılandırmak için bu ekrana dönebilirsiniz.
Ekrana gelen sayfada üç seçenek olacaktır.Tipik site(Tipik web siteleri için. Emin değilseniz bunu seçin.), Web sitesi oluşturucu için Wordpress eklentisi(Wordpress, Blogger, Shopify veya diğer içerik yönetim sistemlerini kullanan siteler için.), Özel Kod(JavaScript kullanarak web push yapılandırmasını kodlamak isteyen ileri düzey kullanıcılar için.) biz blogger'a ekleyeceğimiz için Web sitesi oluşturucu için Wordpress eklentisi'ni seçiyoruz.
Karşımıza gelen ekrandan hangi içerik sistemini kullanıyorsak onu seçerek devam ediyoruz.
Daha sonra sayfamızı aşağı doğru kaydırıyoruz.Blogger Site Kurulumu alanına geldiğimizde site adınızı, site linkinizi yazmanız ve bir icon yüklemeniz isteniyor.Etiket seçiniz kısmına da sitenizin adınızı yazın.Bu alanı doldurduktan sonra üçüncü alana geçiniz.
İzin İstemi Kurulumu alanında site kullanıcılarına bildirim göndermeden önce izin istemelidir.Bu arayüzde, kullanıcılardan izin istenmesinin yollarını seçebileceksiniz.Başka Bir Bilgi İsteği Ekle'yi seçerek sitenizde bir veya daha fazla farklı bilgi istemi ayarlayabilirsiniz. Her türden sadece bir bilgi istemi kurabilirsiniz.
"Add A Prompt" diyerek izin alma araçlarını kuruyoruz.
Burada 4 farklı izin alma aracı var bunlar abonelik zili, yerel bilgi sistemi, slayt istemi ve özel bağlantıdır.Biz ilkinden başlayarak hepsinin kurulumunu anlatacağız.
İlk olarak abonelik zilinden başlayalım.Abonelik zilini seçtikten sonra zilin ayarlarını yapmamız lazım istediğiniz boyutu seçiniz(büyük, orta, küçük).Daha sonra sayfanızın hangi kısmında görüntülemek istediğinizi seçmelisiniz(sol, sağ).Zilin arka plan rengini kendi sitenize özel renk belirleyebilirsiniz.Zil simgesinin rengini de özel renk olarak ayarlayabilirsiniz.
Görünürlük kısmından ise eğer kullanıcı abone ise zili gizlemenizi sağlar(Bu ayarı seçmenizi öneririm).Zil metnini özelleştirme kısmını açarak varsayılan metinleri değiştirebilirsiniz(Varsayılan mesaj biçimi ingilizcedir.Siz bunu Türkçe olarak kendi metinlerinizi yazarak doldurabilirsiniz).Gelişmiş seçenekler kısmında ise zili ayarlanan piksel miktarlarıyla köşelerden uzaklaştırmanızı sağlar.
Yerel Bilgi İstemi ise pek fazla ayara gerek yoktur."Native Browser Prompt" kısmını aktif etmelisiniz.Daha sonra kaydediniz.(Yerel Bilgi İstemi yalnızca HTTPS sitelerinde kullanılabilir!!)
Slayt İsteminin kurulumunda ise aynı Yerel Bilgi İstemi gibi "Native Browser Prompt" seçeneği seçili olmalıdır.Otomatik yanıt alması lazım olduğu için bu alanı seçmeliyiz.Slayt istemi metnini özelleştirme kısmını ise mutlaka kendiniz Türkçeye çevirin veya kendi özel mesajlarınızı giriniz.
Özel Bağlantı kurulumunda ise buton olarak kullanmak isterseniz butonu seçebilirsiniz eğer link olarak kullanacaksanız linki seçiniz.Yine boyutunu belirlemelisiniz(büyük, orta, küçük).Butonunuzun veya linkinizin rengini eğer butonu seçerseniz yazının rengini de belirliyorsunuz.Link dediğimiz bildiğimiz bağlantı köprüsü olan metindir.Abone metninizi isterseniz kişiselleştirebilirsiniz dediğim gibi varsayılanı ingilizce olduğu için abone metnini Türkçeye çevirmenizi öneririm.Açıklama kısmınız isteğinize bağlıdır.Abonelikten çıkma izni sizin isteğinize bağlıdır isterseniz seçersiniz.Site işaretlemesine eklenecek kod örneği. Kod onay aşamasında tekrarlanacaktır.Kaydet diyerek çıkıyoruz.
İzin istemlerinin ayarlarını yaptıktan sonra dördüncü alan olan "Karşılama Bildirimi" alanında ise bildirimlerinize abone olanlara karşılama bildirimi göndermenizi sağlar.Bu nasıl bir şey derseniz mesela benim bildirimlerime abone oldunuz(Bu arada mutlaka abone olun işinize yarayabilecek makaleler yayınlamaya çalışacağım).Bize abone olduğunuz için teşekkür ederiz şeklinde size bildirim geliyor(Aşağıdaki resimde görmüş olduğunuz gibi)Eğer bildirimlerinize tıklayan olursa diye kendi sitenizde özel bir teşekkür sayfası oluşturmakta size kalmış veya sitenizin direk linkini de verebilirsiniz.
"Advanced" alanına yani beşinci alana doğru ilerliyoruz.Burada süreklilik kısmında ki seçenek sizin isteğinize bağlıdır.Ne oluyor ki derseniz bildirimler tıklanıncaya kadar ekranda kalır.
Tüm ayarlarımızı yaptıktan sonra "Save" diyerek kaydediyoruz.Karşımıza gelen ekranda sitemize nasıl kaydedeceğimiz gösteriliyor.Blogger>Tema>HTML'yi Düzenle sekmesine gidiyoruz.Kod paneline bir kere tıklayıp "CTRL+F" kısayoluna tıklayarak <head> kısmını arayınız.<head> kısmının hemen altına "Script" kısmını ekliyoruz.Alttaki kod kısmı ise özel bağlantı ayarı yapmıştık bu kısmı istediğiniz sayfaya ekleyebilirsiniz.Bu kodu birden fazla kullanabilirsiniz.
Eğer sitenin kendi kılavuzuna bakmak isterseniz buraya tıklayınız.
Evet arkadaşlar yine güzel bir makalenin sonuna gelmiş bulunmaktayız.Umarım beğenmişsinizdir.Bize destek olmak için bizi sosyal medya hesaplarınızda paylaşmayı unutmayınız.Bir sonraki içerikte görüşmek üzere Hoşçakalın..
Gerçekten işime yaradı böyle devam.
YanıtlaSil