Jak łatwo dodać powiadomienia w kartach przeglądarki w WordPress

Powiadomienia w kartach przeglądarki to jedna z tych prostych, ale skutecznych funkcji, które dyskretnie angażują odwiedzających i zachęcają ich do powrotu.

Na przykład, wiele witryn e-commerce używa tego, aby delikatnie przypomnieć użytkownikom o powrocie i dokończeniu zakupu, gdy przełączają karty. Jest to subtelne, nieinwazyjne i może zwiększyć współczynniki konwersji w całej witrynie.

W tym przewodniku pokażemy Ci, jak łatwo dodać powiadomienia na kartach przeglądarki w WordPress, aby utrzymać zaangażowanie odwiedzających i zachęcić ich do powrotu. 🙌

Gdy tylko spróbujesz, zobaczysz, dlaczego jest to tak przydatne narzędzie do utrzymywania uwagi odwiedzających i zachęcania ich do powrotu.

Dlaczego warto dodawać powiadomienia na kartach przeglądarki w WordPress?

Powiadomienia na kartach przeglądarki pomagają sprowadzić odwiedzających z powrotem do Twojej witryny po przełączeniu się na inną kartę. Zamiast tracić odwiedzającego całkowicie, możesz użyć subtelnych powiadomień, aby przypomnieć mu o Twoich treściach, produktach lub ofertach specjalnych.

Dzięki temu powiadomienia na kartach przeglądarki są prostym, ale skutecznym sposobem na zwiększenie zaangażowania i konwersji. Oto niektóre z największych korzyści z korzystania z powiadomień na kartach przeglądarki:

• Ponowne zaangażowanie rozproszonych odwiedzających: Zachęcaj użytkowników do powrotu na Twoją witrynę po przełączeniu się na inną kartę.
• Zmniejszenie porzucania koszyka: Przypominaj klientom o produktach pozostawionych w koszyku, zanim opuszczą Twój sklep.
• Zwiększenie konwersji: Zwróć uwagę na oferty specjalne, lead magnety i ważne wezwania do działania.
• Poprawa widoczności marki: Utrzymuj swoją witrynę w świadomości dzięki niestandardowym wiadomościom lub powiadomieniom wizualnym.
• Zwiększenie zaangażowania użytkowników: Zachęcaj odwiedzających do dalszego czytania artykułów, wypełniania formularzy lub przeglądania Twoich treści.

Powiadomienie na karcie przeglądarki zazwyczaj działa poprzez zmianę tytułu karty, wyświetlanie niestandardowej wiadomości, aktualizację favicon lub wyświetlanie licznika powiadomień, gdy odwiedzający opuści Twoją witrynę.

Na przykład, sklep internetowy może wyświetlić komunikat typu „Nie zapomnij o swoim koszyku!”, podczas gdy blog może pokazać „Wróć po więcej wskazówek!”, gdy odwiedzający otworzy inną kartę.

Oto przykład powiadomienia na karcie przeglądarki.

Rodzaje powiadomień na kartach przeglądarki

W zależności od Twoich celów, możesz używać różnych rodzajów powiadomień na kartach przeglądarki, aby przyciągnąć uwagę odwiedzających i zachęcić ich do powrotu na Twoją witrynę.

Oto szybkie porównanie najpopularniejszych opcji:

Biorąc to pod uwagę, pokażemy Ci, jak łatwo dodać różne rodzaje powiadomień w kartach przeglądarki w WordPress.

Możesz użyć poniższych linków, aby przejść do wybranej metody:

Zainstaluj WPCode, aby dodać powiadomienia na karcie przeglądarki

Możesz łatwo dodać powiadomienia na kartach przeglądarki na swojej stronie, dodając niestandardowy kod w WordPressie. Zazwyczaj trzeba edytować plik functions.php motywu, ale nawet mały błąd może zepsuć Twoją witrynę.

Dlatego polecamy WPCode. Zaufany przez ponad 3 miliony witryn, jest to najlepszy wtyczka do fragmentów kodu WordPress na rynku.

Uważamy, że jest to najbezpieczniejszy i najłatwiejszy sposób dodawania niestandardowego kodu do Twojej witryny. Pozwala na wstawianie niestandardowego kodu JavaScript za pośrednictwem dedykowanego interfejsu bez edycji plików motywu. Zapobiega to przypadkowemu uszkodzeniu witryny.

Aby uzyskać szczegółowe informacje, zapoznaj się z naszą recenzją WPCode.

Najpierw musisz zainstalować i aktywować wtyczkę WPCode. Więcej szczegółów znajdziesz w naszym przewodniku krok po kroku, jak zainstalować wtyczkę WordPress.

Po aktywacji przejdź do strony Fragmenty kodu » + Dodaj fragment z paska bocznego administratora WordPress.

Teraz najedź kursorem myszy na opcję „Dodaj własny kod (Nowy fragment)” i kliknij przycisk „+ Dodaj niestandardowy fragment” pod nią.

Następnie wybierz typ kodu z listy opcji na ekranie.

Następnie zostaniesz przeniesiony na stronę „Utwórz niestandardowy fragment”.

Niezależnie od tego, jakiego typu powiadomienia o karcie przeglądarki użyjesz, kod wprowadzisz tutaj.

Typ 1: Wyświetlanie nowych aktualizacji jako powiadomienie na karcie przeglądarki

Ta metoda jest świetna, jeśli chcesz przyciągnąć uwagę użytkownika, symulując aktywność na swojej stronie. Liczba pojawi się w tytule karty, sprawiając wrażenie, że użytkownik czeka na nową wiadomość lub aktualizację.

Na przykład strony takie jak Facebook i LinkedIn używają tego do pokazywania nieprzeczytanych powiadomień. Możesz użyć tego psychologicznego wyzwalacza, aby zachęcić użytkowników do powrotu do Twojej karty, aby zobaczyć, co przegapili.

Po przejściu na stronę „Utwórz niestandardowy fragment” musisz nazwać swój fragment. Możesz wybrać cokolwiek, co pomoże Ci zidentyfikować kod.

Następnie wybierz „Fragment kodu JavaScript” jako „Typ kodu” z menu.

Następnie wystarczy skopiować i wkleić poniższy fragment kodu do pola „Podgląd kodu”:

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);

Ten kod stale aktualizuje tytuł karty przeglądarki o zwiększającą się liczbę, gdy użytkownik przełączy się z karty, symulując ciągłą aktywność.

Gdy użytkownik powróci do Twojej witryny, tytuł zostanie zresetowany do normalnego, a licznik zostanie wyzerowany.

Po wykonaniu tej czynności przewiń w dół do sekcji „Wstawianie”. Po prostu wybierz opcję „Automatyczne wstawianie” i pozostaw lokalizację jako „Nagłówek witryny”.

Następnie przewiń z powrotem na górę strony i przełącz przełącznik „Nieaktywny” na „Aktywny”.

Na koniec kliknij przycisk „Zapisz fragment”, aby zapisać swoje ustawienia.

Po zakończeniu tego procesu Twój niestandardowy fragment kodu zostanie dodany do Twojej witryny i zacznie działać.

Typ 2: Zmiana favicon jako powiadomienie w karcie przeglądarki

Dzięki tej metodzie wyświetlisz inny favicon na karcie przeglądarki, gdy użytkownicy przejdą na inną kartę. Jest to subtelny sposób, aby przypomnieć im, że Twoja witryna jest nadal otwarta.

Aby dynamicznie zmieniać favicon, najlepszą praktyką jest modyfikacja href istniejącego linku favicon dostarczonego przez Twój motyw WordPress (zwykle znalezionego za pomocą document.querySelector('link[rel="icon"]')).

Jest to lepsze niż wstawianie nowego tagu <link>, co może prowadzić do konfliktów lub nieoczekiwanych zachowań.

Aby to osiągnąć, użyjemy fragmentu kodu JavaScript, który zamienia obraz, gdy użytkownik opuszcza stronę, i przywraca go, gdy wraca.

Najpierw odwiedź stronę Fragmenty kodu » + Dodaj fragment i kliknij „+ Dodaj niestandardowy fragment”.

Na stronie tworzenia wybierz „Fragment kodu JavaScript” jako „Typ kodu” z menu.

Po wykonaniu tej czynności skopiuj i wklej poniższy kod do pola „Podgląd kodu”:

// 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;
    });
});

Po wklejeniu kodu musisz zastąpić adres URL w linii const notificationFavicon = linkiem do własnego obrazu powiadomienia.

Po prostu prześlij swój nowy favicon do biblioteki multimediów WordPress i skopiuj pełny adres URL przesłanego obrazu (np. https://example.com/wp-content/uploads/2024/05/favicon-notification.png).

Następnie wklej go w cudzysłowach w kodzie.

Po wykonaniu tej czynności przewiń w dół do sekcji „Wstawianie”.

Możesz wybrać opcję ‘Auto Insert’, jeśli chcesz automatycznie osadzić kod na każdej stronie.

Aby zmienić favicon tylko na określonych stronach, wybierz opcję „Krótki kod” i wklej ją w dowolnym obszarze obsługującym krótkie kody, takim jak widżety paska bocznego lub na dole edytora treści.

Następnie przejdź na górę strony i przełącz przełącznik z pozycji „Nieaktywny” na „Aktywny” w prawym górnym rogu, a następnie kliknij przycisk „Zapisz fragment”.

Po tym Twój favicon zacznie się zmieniać jako powiadomienie w karcie przeglądarki.

Typ 3: Zmiana tytułu strony jako powiadomienie w karcie przeglądarki

Ta metoda jest dla Ciebie, jeśli chcesz zmienić tytuł witryny, aby odzyskać uwagę odwiedzających.

Używając tego fragmentu kodu, tytuł Twojej witryny zmieni się, aby wyświetlić przyciągającą wzrok wiadomość, gdy użytkownicy przełączą się na inną kartę w przeglądarce.

Użyjemy wtyczki WPCode, aby zmienić tytuł Twojej witryny na powiadomienie na karcie przeglądarki.

Aby przejść do strony „Utwórz niestandardowy fragment”, odwiedź stronę Fragmenty kodu » + Dodaj fragment z paska bocznego administratora.

Tutaj kliknij „+ Dodaj niestandardowy fragment” w opcji „Dodaj własny kod (nowy fragment)”.

Następnie musisz wybrać „Fragment JavaScript” jako typ kodu z listy opcji, które pojawią się na ekranie.

Teraz, gdy jesteś na stronie „Utwórz niestandardowy fragment”, zacznij od wprowadzenia tytułu dla swojego fragmentu kodu.

Może to być cokolwiek, co pomoże Ci zapamiętać, do czego służy kod.

Następnie wystarczy skopiować i wkleić poniższy fragment kodu do pola „Podgląd kodu”:

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();

Po wklejeniu kodu możesz go edytować i po prostu wpisać dowolną wiadomość, którą chcesz wyświetlić na karcie przeglądarki w kodzie.

Aby napisać pożądaną wiadomość, po prostu przejdź do linii var altTitle = 'Return to this page!'; i usuń tekst zastępczy z wiadomością dla powiadomienia o karcie przeglądarki.

Następnie przewiń w dół do sekcji „Wstawianie” i wybierz tryb „Automatyczne wstawianie”, aby aktywować powiadomienie na karcie przeglądarki na każdej stronie.

Jednakże, jeśli chcesz, aby Twoja przyciągająca wzrok wiadomość wyświetlała się tylko na określonych stronach, możesz wybrać opcję „Krótki kod”.

Na przykład, możesz chcieć dodać ten kod tylko do strony „Dodaj do koszyka”, aby zmniejszyć liczbę porzuceń koszyka na Twojej witrynie.

Jeśli tak jest, możesz wybrać opcję Shortcode.

Następnie przewiń w dół do opcji „Lokalizacja” i kliknij menu rozwijane obok niej.

Stąd wybierz opcję „Stopka całej witryny”.

Na koniec przewiń stronę z powrotem do góry i przełącz przełącznik z pozycji „Nieaktywny” na „Aktywny”.

Następnie kliknij przycisk „Zapisz fragment”, aby zapisać swoje ustawienia.

To wszystko! Teraz powiadomienie na karcie przeglądarki zaalarmuje użytkowników opuszczających Twoją witrynę.

Bonus: Poznaj powiadomienia push w przeglądarce dla szerszego zasięgu

Powiadomienia w zakładce przeglądarki są skuteczne, ale mają jedną główną wadę. Działają tylko wtedy, gdy użytkownik pozostawi Twoją zakładkę otwartą.

Jeśli chcesz docierać do odwiedzających nawet po tym, jak zamkną Twoją stronę internetową, potrzebujesz powiadomień push w przeglądarce. W przeciwieństwie do alertów w kartach, są to aktywne wiadomości wysyłane bezpośrednio na urządzenie lub przeglądarkę użytkownika.

Najłatwiejszym sposobem na skonfigurowanie tego jest użycie PushEngage. Jest to najlepsze oprogramowanie do powiadomień push na rynku.

PushEngage pozwala na wysyłanie automatycznych aktualizacji o nowych postach na blogu, obniżkach cen lub porzuconych koszykach. Używamy go tutaj w WPBeginner do powiadamiania naszych subskrybentów o nowych tutorialach, i jest to dla nas główne źródło powrotnego ruchu.

Aby dowiedzieć się więcej, zapoznaj się z naszą pełną recenzją PushEngage.

Zawiera potężne funkcje, takie jak testy A/B, automatyczne powiadomienia push, segmentacja użytkowników i inteligentne przypomnienia o wyrażeniu zgody. Te narzędzia pomagają budować lojalną publiczność, która stale wraca.

Więcej szczegółów znajdziesz w naszym przewodniku dla początkujących, jak dodawać powiadomienia push web w WordPressie.

Często zadawane pytania dotyczące dodawania powiadomień na karcie przeglądarki

Oto kilka pytań, które nasi czytelnicy często zadają w związku z dodawaniem powiadomień w kartach przeglądarki w WordPress:

Jak dodać pasek ogłoszeń w WordPress?

Najłatwiejszym sposobem dodania paska ogłoszeń jest użycie wtyczki takiej jak OptinMonster. Pozwala ona tworzyć przyklejone paski, które znajdują się na górze lub na dole Twojej witryny, aby wyświetlać aktualizacje, promocje lub alerty bez pisania kodu.

Więcej informacji znajdziesz w naszym tutorialu o tworzeniu paska alertów w WordPressie.

Jak dodać powiadomienia w WordPress?

Aby dodać powiadomienia na stronie, możesz użyć wtyczki takiej jak PushEngage lub użyć WPCode do wstawiania niestandardowych skryptów.

PushEngage obsługuje aktywne powiadomienia push wysyłane do przeglądarek, podczas gdy WPCode pozwala na dodawanie niestandardowych skryptów dla pasywnych alertów tytułu karty, takich jak te w tym przewodniku.

Jak włączyć powiadomienia przeglądarki internetowej?

Musisz zarejestrować się w usłudze powiadomień push web, takiej jak PushEngage.

Po zainstalowaniu ich wtyczki WordPress, Twoja witryna może automatycznie prosić odwiedzających o zgodę na wysyłanie alertów do ich przeglądarki/urządzenia, nawet gdy nie są oni aktualnie na Twojej stronie internetowej.

Jak dodać ogłoszenie w WordPress?

Możesz dodać proste ogłoszenie wewnątrz wpisu, używając domyślnego bloku Grupa z kolorem tła w edytorze WordPress.

W przypadku powiadomień dla całej witryny, które pojawiają się na każdej stronie, zalecamy użycie wtyczki paska pływającego, takiej jak OptinMonster lub SeedProd.

Jak dodać baner wyskakujący w WordPress?

Najlepszym narzędziem do dodawania banerów wyskakujących jest OptinMonster.

Zapewnia kreator typu „przeciągnij i upuść” do tworzenia okienek typu lightbox, wyskakujących okienek i pływających banerów, które są wyzwalane na podstawie określonych zachowań użytkownika, takich jak czas spędzony na stronie lub zamiar wyjścia.

Aby rozpocząć, zapoznaj się z naszym samouczkiem na temat dodawania wyskakującego okienka w WordPress.

Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak dodawać powiadomienia na karcie przeglądarki w WordPress. Możesz również zapoznać się z naszym samouczkiem na temat dodawania pól funkcyjnych z ikonami w WordPress i sprawdzić naszą listę sposobów na dodanie przyjaznej dla urządzeń mobilnych witryny WordPress.

Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube po samouczki wideo WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.