WordPress'e Tarayıcı Sekmesi Bildirimlerini Kolayca Ekleme

Tarayıcı sekmesi bildirimleri, ziyaretçileri sessizce meşgul tutan ve geri dönmelerini teşvik eden basit ama etkili özelliklerden biridir.

Örneğin, birçok e-ticaret sitesi, kullanıcılar sekmeleri değiştirdiğinde onları geri dönüp satın alma işlemlerini tamamlama konusunda nazikçe hatırlatmak için bunu kullanır.  Bu ince, rahatsız etmeyen bir yöntemdir ve sitenizdeki dönüşüm oranlarını artırabilir.

Bu kılavuzda, WordPress'te tarayıcı sekmesi bildirimlerini kolayca nasıl ekleyeceğinizi göstereceğiz, böylece ziyaretçileri odaklanmış tutabilir ve geri gelmelerini sağlayabilirsiniz. 🙌

Deneyince, ziyaretçileri odaklanmış tutmak ve geri gelmelerini sağlamak için neden bu kadar kullanışlı bir araç olduğunu göreceksiniz.

WordPress'te Neden Tarayıcı Sekmesi Bildirimleri Eklemelisiniz?

Tarayıcı sekmesi bildirimleri, ziyaretçiler başka bir sekmeye geçtiğinde web sitenize geri dönmelerine yardımcı olur. Bir ziyaretçiyi tamamen kaybetmek yerine, içeriğiniz, ürünleriniz veya özel teklifleriniz hakkında onları hatırlatmak için ince bildirimler kullanabilirsiniz.

Bu, tarayıcı sekmesi bildirimlerini etkileşimi ve dönüşümleri artırmak için basit ama etkili bir yol haline getirir. Tarayıcı sekmesi bildirimleri kullanmanın en büyük faydalarından bazıları şunlardır:

• Dikkat Dağılmış Ziyaretçileri Yeniden Etkileşim Kurun: Kullanıcıları başka bir sekmeye geçtikten sonra sitenize dönmeye teşvik edin.
• Sepet Terkini Azaltın: Mağazanızdan ayrılmadan önce alışveriş yapanlara sepetlerinde bıraktıkları ürünleri hatırlatın.
• Dönüşümleri Artırın: Özel tekliflere, potansiyel müşteri mıknatıslarına ve önemli harekete geçirici mesajlara dikkat çekin.
• Marka Görünürlüğünü İyileştirin: Özel mesajlar veya görsel bildirimlerle web sitenizi akılda tutun.
• Kullanıcı Etkileşimini Artırın: Ziyaretçileri makaleleri okumaya, formları doldurmaya veya içeriğinizi keşfetmeye devam etmeye teşvik edin.

Bir tarayıcı sekmesi bildirimi, tipik olarak ziyaretçi web sitenizden uzaklaştığında sekme başlığını değiştirerek, özel bir mesaj görüntüleyerek, favicon'u güncelleyerek veya bir bildirim sayısı göstererek çalışır.

Örneğin, bir çevrimiçi mağaza “Sepetinizi unutmayın!” gibi bir mesaj görüntüleyebilirken, bir blog ziyaretçi başka bir sekme açtığında “Daha fazla ipucu için geri gelin!” gösterebilir.

İşte bir tarayıcı sekmesi bildirimi örneği.

Tarayıcı Sekmesi Bildirim Türleri

Hedeflerinize bağlı olarak, ziyaretçilerin dikkatini çekmek ve sitenize geri dönmelerini teşvik etmek için farklı tarayıcı sekmesi bildirim türleri kullanabilirsiniz.

İşte en popüler seçeneklerin hızlı bir karşılaştırması:

Bununla birlikte, WordPress'e farklı türde tarayıcı sekmesi bildirimlerini nasıl kolayca ekleyeceğinizi göstereceğiz.

Seçtiğiniz yönteme atlamak için aşağıdaki bağlantıları kullanabilirsiniz:

Tarayıcı Sekmesi Bildirimleri Eklemek İçin WPCode'u Yükleyin

WordPress'e özel kod ekleyerek sitenize kolayca tarayıcı sekmesi bildirimleri ekleyebilirsiniz. Genellikle temanızın functions.php dosyasını düzenlemeniz gerekir, ancak küçük bir hata bile web sitenizi bozabilir.

Bu nedenle WPCode kullanmanızı öneririz. 3 milyondan fazla site tarafından güvenilen bu ürün, piyasadaki en iyi WordPress kod parçacığı eklentisidir.

Bunu sitenize özel kod eklemenin en güvenli ve en kolay yolu olarak bulduk. Tema dosyalarını düzenlemeden özel JavaScript'i özel bir arayüz aracılığıyla eklemenizi sağlar. Bu, kazara site hatasını önler.

Ayrıntılar için WPCode incelememize bakın.

Öncelikle, WPCode eklentisini kurmanız ve etkinleştirmeniz gerekir. Daha fazla ayrıntı için, bir WordPress eklentisinin nasıl kurulacağına dair adım adım kılavuzumuza bakabilirsiniz.

Etkinleştirdikten sonra, WordPress yönetici kenar çubuğunuzdan Kod Parçacıkları » + Parçacık Ekle sayfasına gidin.

Şimdi, farenizi ‘Özel Kodunuzu Ekleyin (Yeni Parçacık)’ seçeneğinin üzerine getirin ve altındaki ‘+ Özel Parçacık Ekle’ düğmesine tıklayın.

Ardından ekrandaki seçenekler listesinden kod türünü seçin.

Bundan sonra, 'Özel Kod Parçacığı Oluştur' sayfasına yönlendirileceksiniz.

Hangi tür tarayıcı sekmesi bildirimini kullanırsanız kullanın, kodu buraya gireceksiniz.

Tür 1: Tarayıcı Sekmesi Bildirimi Olarak Yeni Güncellemeleri Gösterme

Sitenizdeki etkinliği simüle ederek kullanıcıların dikkatini çekmek istiyorsanız bu yöntem harikadır. Sekme başlığında bir sayı görünecek ve yeni bir mesaj veya güncelleme kullanıcının beklediği izlenimini verecektir.

Örneğin, Facebook ve LinkedIn gibi siteler okunmamış bildirimleri göstermek için bunu kullanır. Kullanıcıları kaçırdıklarını görmek için sekmeye geri dönmeye teşvik etmek için bu psikolojik tetikleyiciyi kullanabilirsiniz.

‘Özel Kod Parçacığı Oluştur’ sayfasındayken, kod parçacığınıza bir ad vermeniz gerekir. Kodu tanımlamanıza yardımcı olacak herhangi bir şey seçebilirsiniz.

Ardından menüden ‘Kod Türü’ olarak ‘JavaScript Snippet’i seçin.

Ardından, tek yapmanız gereken aşağıdaki kod parçasını kopyalayıp 'Kod Önizleme' kutusuna yapıştırmak:

let count = 0;
const originalTitle = document.title;
let titleInterval;

function startCounting() {
    if (!titleInterval) { // Only start if not already running
        titleInterval = setInterval(() => {
            count++;
            document.title = '(' + count + ') ' + originalTitle;
        }, 2000);
    }
}

function stopCounting() {
    clearInterval(titleInterval);
    titleInterval = null;
    document.title = originalTitle;
    count = 0; // Reset count when returning
}

window.addEventListener('blur', startCounting);
window.addEventListener('focus', stopCounting);

Bu kod, kullanıcı sekmeyi kapattığında tarayıcı sekme başlığını artan bir sayıyla sürekli olarak günceller ve devam eden etkinliği simüle eder.

Kullanıcı sitenize geri döndüğünde, başlık normale döner ve sayaç sıfırlanır.

Bunu yaptıktan sonra, 'Ekleme' bölümüne aşağı kaydırın. Sadece 'Otomatik Ekle' seçeneğini seçin ve konumu 'Site Geneli Başlığı' olarak bırakın.

Ardından, sayfanın en üstüne geri kaydırın ve 'Etkin Değil' anahtarını 'Etkin' olarak değiştirin.

Son olarak, ayarlarınızı kaydetmek için ‘Snippet Kaydet’ düğmesine tıklayın.

Bu işlem bittiğinde, özel kod parçacığınız sitenize eklenecek ve çalışmaya başlayacaktır.

Tür 2: Tarayıcı Sekmesi Bildirimi Olarak Favicon Değiştirme

Bu yöntemle, kullanıcılar başka bir sekmeye geçtiğinde tarayıcı sekmesinde farklı bir favicon göstereceksiniz. Sitenizin hala açık olduğunu onlara hatırlatmanın ince bir yoludur.

Favicon'u dinamik olarak değiştirmek için, WordPress temanız tarafından sağlanan mevcut favicon bağlantısının href'ini değiştirmek en iyi uygulamadır (genellikle document.querySelector('link[rel="icon"]') aracılığıyla bulunur).

Bu, yeni bir <link> etiketi eklemekten daha iyidir, çünkü bu çakışmalara veya beklenmeyen davranışlara yol açabilir.

Bunu başarmak için, kullanıcı sayfadan ayrıldığında resmi değiştiren ve geri döndüğünde geri yükleyen bir JavaScript parçacığı kullanacağız.

Öncelikle, Kod Parçacıkları » + Parçacık Ekle sayfasına gidin ve '+ Özel Parçacık Ekle'ye tıklayın.

Oluşturma sayfasında, menüden 'Kod Türü' olarak 'JavaScript Parçacığı'nı seçin.

Bunu yaptıktan sonra, aşağıdaki kodu 'Kod Önizleme' kutusuna kopyalayıp yapıştırın:

// This script assumes an existing favicon link in the head (e.g., from your theme).
// If your theme doesn't provide one, you might need to add a default <link> tag
// using an HTML snippet in WPCode, inserted into the site-wide header.

document.addEventListener('DOMContentLoaded', function() {
    const faviconLink = document.querySelector('link[rel="icon"]'); // Find the existing favicon link
    if (!faviconLink) {
        console.warn("No favicon link found. Please ensure your theme adds one or add it manually in the head.");
        return;
    }

    const originalFavicon = faviconLink.href;
    // Replace with the full URL of your desired notification image
    const notificationFavicon = 'https://example.com/wp-content/uploads/2022/10/favicon-notification.png';

    window.addEventListener('blur', function() {
        faviconLink.href = notificationFavicon;
    });

    window.addEventListener('focus', function() {
        faviconLink.href = originalFavicon;
    });
});

Kodu yapıştırdıktan sonra, const notificationFavicon = satırındaki URL'yi kendi bildirim resminizin bağlantısıyla değiştirmeniz gerekir.

Yeni favicon'unuzu WordPress medya kitaplığına yükleyin ve yüklenen resmin tam URL'sini (örneğin, https://example.com/wp-content/uploads/2024/05/favicon-notification.png) kopyalayın.

Ardından, kodu tırnak işaretlerinin içine yapıştırın.

Bunu yaptıktan sonra, ‘Ekleme’ bölümüne aşağı kaydırın.

Kodu her sayfaya otomatik olarak yerleştirmek istiyorsanız 'Otomatik Ekle' seçeneğini tercih edebilirsiniz.

Favicon'u yalnızca belirli sayfalarda değiştirmek için 'Kısa Kod' seçeneğini seçin ve kenar çubuğu widget'ları veya içerik düzenleyicisinin alt kısmı gibi kısa kod etkin alanlardan herhangi birine yapıştırın.

Ardından, sayfanın en üstüne gidin ve sağ üst köşedeki anahtarı ‘Etkin Değil’ konumundan ‘Etkin’ konumuna getirin ve ardından ‘Kod Parçasını Kaydet’ düğmesine tıklayın.

Bundan sonra, favicon'unuz bir tarayıcı sekmesi bildirimi olarak değişmeye başlayacaktır.

Tür 3: Tarayıcı Sekmesi Bildirimi Olarak Site Başlığını Değiştirme

Ziyaretçilerinizin dikkatini yeniden çekmek için site başlığını değiştirmek istiyorsanız bu yöntem tam size göre.

Bu kod parçacığını kullanarak, kullanıcılar tarayıcıda başka bir sekmeye geçtiğinde site başlığınız dikkat çekici bir mesaj gösterecek şekilde değişecektir.

Site başlığınızı tarayıcı sekmesi bildirimine değiştirmek için WPCode eklentisini kullanacağız.

'Özel Parçacık Oluştur' sayfasına gitmek için yönetici kenar çubuğundan Kod Parçacıkları » + Parçacık Ekle sayfasına gidin.

Burada, 'Özel Kodunuzu Ekleyin (Yeni Parçacık)' seçeneğinin altındaki '+ Özel Parçacık Ekle'ye tıklayın.

Ardından, ekrandaki seçenekler listesinden kod türü olarak 'JavaScript Snippet'i seçmeniz gerekir.

Şimdi 'Özel Parçacık Oluştur' sayfasındasınız, kod parçacığınız için bir başlık girerek başlayın.

Bu, kodun ne işe yaradığını hatırlamanıza yardımcı olacak herhangi bir şey olabilir.

Ardından, tek yapmanız gereken aşağıdaki kod parçasını kopyalayıp 'Kod Önizleme' kutusuna yapıştırmak:

function changeTitleOnBlur() {
	var timer     = null;
	var	title     = document.title;
	var altTitle  = 'Return to this page!';
	window.onblur = function() {
		timer = window.setInterval( function() {
			document.title = altTitle === document.title ? title : altTitle;
		}, 1500 );
	}
	window.onfocus = function() {
		document.title = title;
		clearInterval(timer);
	}
}

changeTitleOnBlur();

Kodu yapıştırdıktan sonra, onu düzenleyebilir ve tarayıcı sekmenizde görüntülemek istediğiniz herhangi bir mesajı koda yazabilirsiniz.

İstediğiniz mesajı yazmak için, var altTitle = 'Bu sayfaya geri dön!'; satırına gidin ve yer tutucu metni tarayıcı sekmesi bildiriminiz için mesajla değiştirin.

Ardından, ‘Ekleme’ bölümüne aşağı kaydırın ve tarayıcı sekmesi bildirimlerinizi her sayfada etkinleştirmek için ‘Otomatik Ekle’ modunu seçin.

Ancak, göz alıcı mesajınızın yalnızca belirli sayfalarda olmasını istiyorsanız, ‘Kısa Kod’ seçeneğini tercih edebilirsiniz.

Örneğin, bu kodu yalnızca 'Sepete Ekle' sayfasına eklemek isteyebilirsiniz, böylece web sitenizde sepet terkini azaltabilirsiniz.

Durum buysa, Kısa Kod seçeneğini seçebilirsiniz.

Bundan sonra, 'Konum' seçeneğine aşağı kaydırın ve yanındaki açılır menüye tıklayın.

Buradan, 'Site Geneli Altbilgi' seçeneğini seçin.

Son olarak, sayfanın en üstüne geri kaydırın ve anahtarı ‘Etkin Değil’ konumundan ‘Etkin’ konumuna getirin.

Ardından, ayarlarınızı kaydetmek için 'Kod Parçasını Kaydet' düğmesine tıklayın.

Hepsi bu kadar! Artık tarayıcı sekmesi bildiriminiz, sitenizden ayrılan kullanıcılara uyarı verecektir.

Bonus: Daha Geniş Erişim İçin Web Anlık Bildirimlerini Keşfedin

Tarayıcı sekmesi bildirimleri etkilidir, ancak tek bir büyük sınırlamaları vardır. Yalnızca kullanıcı sekmenizi açık tutarsa çalışırlar.

Web push bildirimleri ile web sitenizi kapattıktan sonra bile ziyaretçilere ulaşmanız gerekir. Sekme uyarılarının aksine, bunlar kullanıcının cihazına veya tarayıcısına doğrudan gönderilen aktif mesajlardır.

Bunu ayarlamanın en kolay yolu PushEngage ile. Pazardaki en iyi anlık bildirim yazılımıdır.

PushEngage, yeni blog gönderileri, fiyat düşüşleri veya terk edilmiş sepetler için otomatik güncellemeler göndermenize olanak tanır. Biz bunu WPBeginner'da abonelerimize yeni eğitimler hakkında bildirim göndermek için kullanıyoruz ve bu bizim için geri dönüş trafiğinin önde gelen bir kaynağıdır.

Bu konuda daha fazla bilgi edinmek için tam PushEngage incelememize bakın.

A/B testi, otomatik push, kullanıcı segmentasyonu ve akıllı katılım hatırlatıcıları gibi güçlü özellikler içerir. Bu araçlar, geri gelmeye devam eden sadık bir kitle oluşturmanıza yardımcı olur.

Daha fazla ayrıntı için, WordPress'e web anlık bildirimlerinin nasıl ekleneceğine dair başlangıç kılavuzumuza bakın.

Tarayıcı Sekmesi Bildirimleri Ekleme Hakkında Sıkça Sorulan Sorular

İşte okuyucularımızın WordPress'te tarayıcı sekmesi bildirimleri eklemekle ilgili sıkça sorduğu bazı sorular:

WordPress'te bir duyuru çubuğunu nasıl eklerim?

Duyuru çubuğu eklemenin en kolay yolu, OptinMonster gibi bir eklenti kullanmaktır. Bu, güncellemeleri, satışları veya uyarıları kod yazmadan görüntülemek için sitenizin üst veya alt kısmında duran yapışkan çubuklar oluşturmanıza olanak tanır.

Daha fazla bilgi için, WordPress'te uyarı çubuğu oluşturma konusundaki eğitimimize bakın.

WordPress'e nasıl bildirim eklerim?

Site içi bildirimler eklemek için PushEngage gibi bir eklenti kullanabilir veya özel betikleri eklemek için WPCode kullanabilirsiniz.

PushEngage, tarayıcılara gönderilen aktif web anlık bildirimlerini yönetirken, WPCode bu kılavuzdakilere benzer pasif sekme başlığı uyarıları için özel betikler eklemenize olanak tanır.

Web tarayıcısı bildirimleri nasıl etkinleştirilir?

PushEngage gibi bir web anlık bildirim hizmetine kaydolmanız gerekir.

WordPress eklentilerini kurduktan sonra, siteniz ziyaretçilerden, web sitenizde olmasalar bile tarayıcılarına/cihazlarına uyarı gönderme izni istemek için otomatik olarak sorabilir.

WordPress'e nasıl bir bildirim eklerim?

WordPress düzenleyicisinde arka plan rengi olan varsayılan Grup bloğunu kullanarak bir gönderiye basit bir bildirim ekleyebilirsiniz.

Her sayfada görünen site çapında duyurular için OptinMonster veya SeedProd gibi bir kayan çubuk eklentisi kullanmanızı öneririz.

WordPress'e nasıl bir açılır banner eklenir?

Açılır banner'lar eklemek için en iyi araç OptinMonster'dır.

Kullanıcı davranışlarına (sayfada geçirilen süre veya çıkış niyeti gibi) göre tetiklenen ışık kutuları, kaydırarak açılan pencereler ve kayan banner'lar oluşturmak için sürükle ve bırak oluşturucu sağlar.

Başlamak için WordPress'te açılır pencere ekleme hakkındaki eğitimimize bakın.

Bu makalenin WordPress'te tarayıcı sekmesi bildirimlerinin nasıl ekleneceğini öğrenmenize yardımcı olduğunu umuyoruz. Ayrıca WordPress'te simgelerle özellik kutuları ekleme hakkındaki eğitimimize bakmak ve mobil uyumlu bir WordPress sitesi ekleme yolları listemizi incelemek isteyebilirsiniz.

Bu makaleyi beğendiyseniz, lütfen WordPress video eğitimleri için YouTube Kanalımıza abone olun. Bizi ayrıca Twitter ve Facebook'ta da bulabilirsiniz.