Cum să adăugați ușor notificări în tab-ul browserului în WordPress

Notificările din tab-ul browserului sunt una dintre acele funcționalități simple, dar eficiente, care mențin vizitatorii angajați în tăcere și îi încurajează să revină.

De exemplu, WPForms folosește acest lucru pentru a reaminti subtil utilizatorilor să revină și să își finalizeze achiziția atunci când schimbă filele. Este subtil, neintruziv și poate crește ratele de conversie pe site-ul dumneavoastră.

În acest ghid, vă vom arăta cum să adăugați cu ușurință aceste notificări de tab captivante pe site-ul dvs. WordPress. 🙌

Odată ce îl încercați, veți vedea de ce este un instrument atât de util pentru a menține vizitatorii concentrați și pentru a-i face să revină.

Ce este o notificare în fila browserului?

O notificare în fila browserului este un mesaj care apare în fila site-ului dvs. web atunci când unul dintre vizitatorii noștri privește un alt site în browserul lor.

Prin adăugarea unei funcționalități de notificare în fila browserului pe site-ul dvs. WordPress, puteți capta atenția utilizatorului în momentul în care deschide o altă filă pentru a părăsi pagina dvs.

De exemplu, puteți schimba faviconul site-ului dvs., să-l animați, să scrieți un mesaj personalizat sau pur și simplu să faceți tab-ul să clipească.

Dacă aveți un magazin online, notificările din tab-ul browserului vă pot ajuta cu adevărat. Aceste notificări vor readuce clienții distrași, vor reduce ratele de abandon al coșului și vor crește implicarea clienților.

Folosind această funcționalitate, puteți alerta clienții cu privire la abandonarea coșului sau chiar puteți oferi o reducere dacă își reorientează atenția către site-ul dvs.

Iată un exemplu de notificare în fila browserului.

Acestea fiind spuse, vă vom arăta cum să adăugați cu ușurință diferite tipuri de notificări în tab-ul browserului în WordPress.

Puteți folosi linkurile de mai jos pentru a sări la metoda aleasă de dumneavoastră:

• Instalați WPCode pentru a adăuga notificări în fila browserului
• Scrieți 1: Afișarea noilor actualizări ca notificare în fila browserului
• Tipul 2: Schimbarea favicon-urilor ca notificare în fila browserului
• Tipul 3: Schimbarea Titlului Site-ului ca Notificare în Fila Browserului
• Bonus: Adăugați notificări push web pe site-ul dvs. WordPress
• Întrebări frecvente despre adăugarea notificărilor în tab-ul browserului

Instalați WPCode pentru a adăuga notificări în fila browserului

Puteți adăuga cu ușurință notificări în tab-ul browserului pe site-ul dvs. prin adăugarea de cod personalizat în WordPress. De obicei, trebuie să editați fișierul functions.php al temei dvs., dar chiar și o eroare mică vă poate strica site-ul web.

De aceea recomandăm utilizarea WPCode, care este cel mai bun plugin pentru fragmente de cod WordPress de pe piață.

Am constatat că este cea mai sigură și mai ușoară modalitate de a adăuga cod personalizat pe site-ul dvs. Pentru detalii, consultați recenzia noastră despre WPCode.

Mai întâi, trebuie să instalați și să activați pluginul WPCode. Pentru mai multe detalii, puteți consulta ghidul nostru pas cu pas despre cum să instalați un plugin WordPress.

După activare, vizitați pagina Code Snippets » + Add Snippet din bara laterală de administrare WordPress.

Acum, plasați cursorul mouse-ului peste opțiunea „Adăugați codul dvs. personalizat (Fragment nou)” și faceți clic pe butonul „+ Adăugați fragment personalizat” de sub aceasta.

Apoi selectați tipul de cod din lista de opțiuni de pe ecran.

După aceea, veți fi direcționat către pagina „Creare fragment personalizat”.

Indiferent de tipul de notificare de tab de browser pe care îl utilizați, veți introduce codul aici.

Scrieți 1: Afișarea noilor actualizări ca notificare în fila browserului

Această metodă este excelentă dacă doriți să atrageți atenția utilizatorilor prin simularea activității pe site-ul dvs. Un număr va apărea în titlul tab-ului, făcând să pară că un mesaj nou sau o actualizare așteaptă utilizatorul.

De exemplu, site-uri precum Facebook și LinkedIn folosesc acest lucru pentru a afișa notificări necitite. Puteți folosi acest declanșator psihologic pentru a încuraja utilizatorii să revină la tab-ul dvs. pentru a vedea ce pierd.

Odată ajuns pe pagina „Creare fragment personalizat”, trebuie să denumiți fragmentul. Puteți alege orice vă ajută să identificați codul.

Apoi, selectați „Fragment JavaScript” ca „Tip de cod” din meniu.

Apoi, tot ce trebuie să faceți este să copiați și să lipiți următorul fragment de cod în caseta „Previzualizare cod”:

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

Acest cod spune browserului să înceapă numărătoarea inversă atunci când utilizatorul comută pe o altă filă. Imediat ce se întoarce pe site-ul dvs., titlul revine la normal.

După ce ați făcut acest lucru, derulați în jos la secțiunea „Inserare”. Pur și simplu alegeți opțiunea „Inserare automată” și lăsați locația ca „Antet site-wide”.

După aceea, derulați înapoi în partea de sus a paginii și comutați comutatorul „Inactiv” la „Activ”.

În final, faceți clic pe butonul „Salvare fragment” pentru a vă stoca setările.

După ce ați terminat, fragmentul dvs. de cod personalizat va fi adăugat pe site-ul dvs. și va începe să funcționeze.

Tipul 2: Schimbarea favicon-urilor ca notificare în fila browserului

Cu această metodă, veți afișa un favicon diferit în fila browserului atunci când utilizatorii navighează pe o altă filă. Aceasta este o modalitate subtilă de a le reaminti că site-ul dvs. este încă deschis.

Pentru a face acest lucru, vom folosi o bucată de cod JavaScript care schimbă imaginea atunci când utilizatorul părăsește pagina.

Mai întâi, vizitați pagina Snippets de cod » + Adăugați snippet și faceți clic pe „+ Adăugați snippet personalizat”.

Pe pagina de creare, selectați „Snippet JavaScript” ca „Tip de cod” din meniu.

După ce ați făcut acest lucru, copiați și lipiți următorul cod în caseta „Previzualizare cod”:

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

După lipirea codului, trebuie să înlocuiți URL-ul din linia Favicon cu linkul către propria imagine de notificare.

Pur și simplu încărcați noul dvs. favicon în biblioteca media WordPress și copiați numele fișierului (în exemplul meu, este daisy.jpeg). Apoi, lipiți-l între ghilimele în cod.

Odată ce ați făcut acest lucru, derulați în jos la secțiunea „Inserare”.

Puteți alege opțiunea „Inserare Automată” dacă doriți să încorporați automat codul pe fiecare pagină.

Pentru a schimba favicon-ul doar pe pagini specifice, selectați opțiunea „Shortcode” și lipiți-l în orice zonă activată pentru shortcode, cum ar fi widget-urile din bara laterală sau în partea de jos a editorului de conținut.

Apoi, mergeți în partea de sus a paginii și comutați comutatorul de la „Inactiv” la „Activ” în colțul din dreapta sus, apoi faceți clic pe butonul „Salvare fragment”.

După aceea, favicon-ul dvs. va începe să se schimbe ca o notificare în tab-ul browserului.

Tipul 3: Schimbarea Titlului Site-ului ca Notificare în Fila Browserului

Această metodă este pentru dvs. dacă doriți să schimbați titlul site-ului pentru a recâștiga atenția vizitatorilor dvs.

Prin utilizarea acestui fragment de cod, titlul site-ului dvs. se va schimba pentru a afișa un mesaj atrăgător atunci când utilizatorii comută la o altă filă în browser.

Vom folosi pluginul WPCode pentru a schimba titlul site-ului dvs. într-o notificare în fila browserului.

Pentru a ajunge la pagina „Creare snippet personalizat”, vizitați pagina Snippets de cod » + Adăugați snippet din bara laterală de administrare.

Aici, faceți clic pe „+ Adăugați snippet personalizat” sub opțiunea „Adăugați codul dvs. personalizat (Snippet nou)”.

Apoi, trebuie să selectați „Fragment JavaScript” ca tip de cod din lista de opțiuni care apar pe ecran.

Acum că sunteți pe pagina „Creare snippet personalizat”, începeți prin a introduce un titlu pentru snippet-ul dvs. de cod.

Acesta poate fi orice pentru a vă ajuta să vă amintiți la ce servește codul.

Apoi, tot ce trebuie să faceți este să copiați și să lipiți următorul fragment de cod în caseta „Previzualizare cod”:

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

După ce ați lipit codul, îl puteți edita și pur și simplu scrieți mesajul pe care doriți să îl afișați pe tab-ul browserului în cod.

Pentru a scrie mesajul dorit, pur și simplu accesați linia var altTitle = 'Return to this page!'; și eliminați textul placeholder cu mesajul pentru notificarea tab-ului browserului dvs.

Apoi, derulați în jos la secțiunea „Inserare” și alegeți modul „Inserare automată” pentru a activa notificarea din fila browserului pe fiecare pagină.

Cu toate acestea, dacă doriți ca mesajul dvs. atrăgător să apară doar pe anumite pagini, puteți alege opțiunea „Shortcode”.

De exemplu, ați putea dori să adăugați acest cod doar pe pagina „Adaugă în coș” pentru a reduce abandonul coșului pe site-ul dvs. web.

Dacă acesta este cazul, puteți alege opțiunea Shortcode.

După aceea, derulați în jos la opțiunea „Locație” și faceți clic pe meniul derulant de lângă ea.

De aici, selectați opțiunea „Antet site complet”.

În final, derulați înapoi în partea de sus a paginii și comutați comutatorul de la „Inactiv” la „Activ”.

Apoi, faceți clic pe butonul „Salvare fragment” pentru a vă stoca setările.

Acesta este tot! Acum, notificarea din fila browserului dvs. va alerta utilizatorii care vă părăsesc site-ul.

Bonus: Adăugați notificări push web pe site-ul dvs. WordPress

Notificările din fila browserului sunt eficiente, dar au o limitare majoră. Funcționează doar dacă utilizatorul păstrează fila dvs. deschisă.

Dacă doriți să ajungeți la vizitatori chiar și după ce aceștia închid site-ul dvs. web, aveți nevoie de notificări push web. Spre deosebire de alertele din tab-uri, acestea sunt mesaje active trimise direct pe dispozitivul sau browserul utilizatorului.

Cel mai simplu mod de a configura acest lucru este cu PushEngage. Este cel mai bun software de notificări push de pe piață.

PushEngage vă permite să trimiteți actualizări automate pentru postări noi de blog, scăderi de prețuri sau coșuri abandonate. Noi îl folosim aici la WPBeginner pentru a ne notifica abonații despre tutoriale noi și este o sursă principală de trafic de retur pentru noi.

Pentru a afla mai multe despre acesta, consultați recenzia noastră completă PushEngage.

Include funcționalități puternice precum testarea A/B, notificări automate, segmentarea utilizatorilor și memento-uri inteligente de abonare. Aceste instrumente vă ajută să construiți o audiență loială care revine.

Pentru mai multe detalii, consultați ghidul nostru pentru începători despre cum să adăugați notificări push web în WordPress.

Întrebări frecvente despre adăugarea notificărilor în tab-ul browserului

Iată câteva întrebări pe care cititorii noștri le pun frecvent legate de adăugarea notificărilor în tab-ul browserului în WordPress:

Cum adaug o bară de anunțuri în WordPress?

Cel mai simplu mod de a adăuga o bară de anunțuri este prin utilizarea unui plugin precum OptinMonster. Acesta vă permite să creați bare lipicioase care stau în partea de sus sau de jos a site-ului dvs. pentru a afișa actualizări, oferte sau alerte fără a scrie cod.

Pentru mai multe informații, consultați tutorialul nostru despre crearea unei bare de alertă în WordPress.

Cum adaug notificări în WordPress?

Pentru a adăuga notificări pe site, puteți folosi un plugin precum PushEngage sau WPCode.

PushEngage gestionează notificările push web active trimise către browsere, în timp ce WPCode vă permite să adăugați scripturi personalizate pentru alerte pasive în titlul tab-ului, precum cele din acest ghid.

Cum să activezi notificările browserului web?

Trebuie să vă înscrieți la un serviciu de notificări push web precum PushEngage.

Odată ce instalați pluginul lor pentru WordPress, site-ul dvs. poate cere automat vizitatorilor permisiunea de a trimite alerte către browserul/dispozitivul lor, chiar și atunci când aceștia nu sunt în prezent pe site-ul dvs.

Cum adaug un anunț în WordPress?

Puteți adăuga un anunț simplu în interiorul unui post folosind blocul implicit Grup cu o culoare de fundal în editorul WordPress.

Pentru anunțuri pe întregul site care apar pe fiecare pagină, recomandăm utilizarea unui plugin de tip bară plutitoare precum OptinMonster sau SeedProd.

Cum adaug un banner pop-up în WordPress?

Cel mai bun instrument pentru adăugarea bannerelor pop-up este OptinMonster.

Acesta oferă un constructor drag-and-drop pentru a crea lightboxes, slide-in-uri și bannere plutitoare care se declanșează pe baza comportamentelor specifice ale utilizatorilor, cum ar fi timpul petrecut pe pagină sau intenția de ieșire.

Pentru a începe, consultați tutorialul nostru despre adăugarea unui popup în WordPress.

Sperăm că acest articol v-a ajutat să învățați cum să adăugați notificări în fila browserului în WordPress. De asemenea, ați putea dori să consultați tutorialul nostru despre cum să adăugați casete de caracteristici cu pictograme în WordPress și să consultați lista noastră de modalități de a adăuga un site WordPress prietenos cu mobilul.

Dacă ți-a plăcut acest articol, te rugăm să te abonezi la canalul nostru de YouTube pentru tutoriale video WordPress. Ne poți găsi, de asemenea, pe Twitter și Facebook.