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 WPForms 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 na Twojej stronie.

W tym przewodniku pokażemy, jak łatwo dodać te przyciągające uwagę powiadomienia na kartach do Twojej witryny WordPress. 🙌

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

Co to jest powiadomienie na karcie przeglądarki?

Powiadomienie na karcie przeglądarki to komunikat, który pojawia się na karcie Twojej witryny, gdy jeden z naszych odwiedzających przegląda inną stronę w swojej przeglądarce.

Dodając funkcję powiadomień na karcie przeglądarki do swojej witryny WordPress, możesz przyciągnąć uwagę użytkownika w momencie, gdy otworzy inną kartę, aby opuścić Twoją stronę.

Na przykład możesz zmienić favicon swojej witryny, animować go, napisać niestandardową wiadomość lub po prostu migać kartą.

Jeśli masz sklep internetowy, powiadomienia w kartach przeglądarki mogą Ci bardzo pomóc. Te powiadomienia przywrócą uwagę rozproszonych klientów, zmniejszą wskaźnik porzuceń koszyka i zwiększą zaangażowanie klientów.

Korzystając z tej funkcji, możesz powiadomić swoich klientów o porzuconym koszyku, a nawet zaoferować zniżkę, jeśli zwrócą uwagę na Twoją witrynę.

Oto przykład powiadomienia na karcie przeglądarki.

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
• Typ 1: Wyświetlanie nowych aktualizacji jako powiadomienie na karcie przeglądarki
• Typ 2: Zmiana favicon jako powiadomienie w karcie przeglądarki
• Typ 3: Zmiana tytułu strony jako powiadomienie w karcie przeglądarki
• Bonus: Dodaj powiadomienia push do swojej strony WordPress
• Często zadawane pytania dotyczące dodawania powiadomień na karcie przeglądarki

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

Możesz łatwo dodać powiadomienia na karcie przeglądarki na swojej stronie, dodając niestandardowy kod w WordPress. Zazwyczaj musisz edytować plik functions.php swojego motywu, ale nawet niewielki błąd może zepsuć Twoją witrynę.

Dlatego polecamy korzystanie z WPCode, która jest najlepszą wtyczką fragmentów kodu WordPress na rynku.

Uważamy, że jest to najbezpieczniejszy i najłatwiejszy sposób dodawania niestandardowego kodu do Twojej witryny. Szczegółowe informacje znajdziesz w naszej recenzji WPCode.

Najpierw musisz zainstalować i aktywować wtyczkę WPCode. Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem krok po kroku na temat 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 title = document.title;
function changeTitle() {
    count++;
    var newTitle = '(' + count + ') ' + title;
    document.title = newTitle;
}
function newUpdate() {
    const update = setInterval(changeTitle, 2000);
}
document.addEventListener('DOMContentLoaded', newUpdate );

Ten kod mówi przeglądarce, aby rozpoczęła odliczanie, gdy użytkownik przełączy się na inną kartę. Gdy tylko wróci na Twoją stronę, tytuł powróci do normy.

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 to zrobić, użyjemy fragmentu kodu JavaScript, który zamienia obraz, gdy użytkownik opuszcza stronę.

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”:

<link id="favicon" rel="icon" href="https://example.com/wp-content/uploads/2022/10/favicon.png"/>

<script>var iconNew = 'https://example.com/wp-content/uploads/2022/10/favicon-notification.png';

function changeFavicon() {
    document.getElementById('favicon').href = iconNew;
}
function faviconUpdate() {
    const update = setInterval(changeFavicon, 3000);
    setTimeout(function() { 
        clearInterval( update ); 
    }, 3100);
}

Po wklejeniu kodu musisz zastąpić adres URL w wierszu Favicon linkiem do własnego obrazu powiadomienia.

Po prostu prześlij swój nowy favicon do biblioteki multimediów WordPress i skopiuj nazwę pliku (w moim przykładzie to daisy.jpeg). Następnie wklej ją 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ę „Shortcode” i wklej ją w dowolnym obszarze obsługującym shortcode, 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.

Korzystając z tego fragmentu kodu, tytuł Twojej witryny zmieni się, aby wyświetlać 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ę porzuconych koszyków na swojej stronie internetowej.

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: Dodaj powiadomienia push do swojej strony WordPress

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.

Najprostszym 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 samouczkach i jest to dla nas główne źródło ruchu powrotnego.

Aby dowiedzieć się więcej na ten temat, 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.

Aby uzyskać więcej szczegółów, zapoznaj się z naszym przewodnikiem dla początkujących na temat dodawania powiadomień push w przeglądarce w WordPress.

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?

Najprostszym sposobem na dodanie 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 poradniku na temat tworzenia paska powiadomień w WordPress.

Jak dodać powiadomienia w WordPress?

Aby dodać powiadomienia na stronie, możesz użyć wtyczki takiej jak PushEngage lub WPCode.

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 dla przeglądarek, 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 ogłoszeń w całej witrynie, 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 okienka w WordPressie.

Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak dodawać powiadomienia w kartach przeglądarki w WordPress. Możesz również zapoznać się z naszym poradnikiem na temat jak dodawać pola z ikonami w WordPress oraz sprawdzić naszą listę sposobów na dodanie przyjaznej dla urządzeń mobilnych strony 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.