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, multe site-uri de eCommerce folosesc acest lucru pentru a reaminti subtil utilizatorilor să revină și să își finalizeze achiziția atunci când schimbă tab-urile. Este subtil, neintruziv și poate crește ratele de conversie pe site-ul dvs.

În acest ghid, vă vom arăta cum să adăugați cu ușurință notificări în tab-ul browserului în WordPress, astfel încât să puteți menține vizitatorii concentrați și să revină. 🙌

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ă.

De ce să adăugați notificări în tab-ul browserului în WordPress?

Notificările din tab-ul browserului ajută la readucerea vizitatorilor pe site-ul dvs. după ce aceștia trec la alt tab. În loc să pierdeți complet un vizitator, puteți folosi notificări subtile pentru a le reaminti de conținutul, produsele sau ofertele speciale.

Acest lucru face ca notificările din tab-ul browserului să fie o modalitate simplă, dar eficientă de a crește implicarea și conversiile. Iată câteva dintre cele mai mari beneficii ale utilizării notificărilor din tab-ul browserului:

• Re-angajați vizitatorii distrași: Încurajați utilizatorii să revină pe site-ul dvs. după ce au trecut la alt tab.
• Reduceți abandonarea coșului: Reamintiți cumpărătorilor despre produsele lăsate în coș înainte de a părăsi magazinul.
• Creșteți conversiile: Atrageți atenția asupra ofertelor speciale, a materialelor de tip lead magnet și a apelurilor la acțiune importante.
• Îmbunătățiți vizibilitatea mărcii: Mențineți site-ul dvs. în atenția utilizatorilor cu mesaje personalizate sau notificări vizuale.
• Creșteți implicarea utilizatorilor: Încurajați vizitatorii să continue să citească articole, să completeze formulare sau să exploreze conținutul dvs.

O notificare în tab-ul browserului funcționează, de obicei, prin schimbarea titlului tab-ului, afișarea unui mesaj personalizat, actualizarea faviconului sau afișarea unui număr de notificări atunci când un vizitator părăsește site-ul dvs.

De exemplu, un magazin online ar putea afișa un mesaj precum „Nu uitați coșul!” în timp ce un blog ar putea afișa „Reveniți pentru mai multe sfaturi!” atunci când un vizitator deschide un alt tab.

Iată un exemplu de notificare în fila browserului.

Tipuri de notificări în tab-ul browserului

În funcție de obiectivele dvs., puteți utiliza diferite tipuri de notificări în tab-ul browserului pentru a capta atenția vizitatorilor și a-i încuraja să revină pe site-ul dvs.

Iată o comparație rapidă a celor mai populare opțiuni:

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

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 mică eroare poate defecta site-ul dvs.

De aceea recomandăm utilizarea WPCode. De încredere pentru peste 3 milioane de site-uri, este cel mai bun plugin pentru fragmente de cod WordPress de pe piață.

Am constatat că este cea mai sigură și mai ușoară metodă de a adăuga cod personalizat pe site-ul dvs. Vă permite să inserați JavaScript personalizat printr-o interfață dedicată, fără a edita fișierele temei. Acest lucru previne deteriorarea accidentală a site-ului.

Pentru detalii, consultați recenzia noastră 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 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);

Acest cod actualizează continuu titlul tab-ului browserului cu un număr crescător atunci când utilizatorul părăsește tab-ul, simulând activitate continuă.

Când utilizatorul revine pe site-ul dvs., titlul revine la normal și numărătoarea este resetată.

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 modificarea dinamică a favicon-ului, cea mai bună practică este să modificați href-ul link-ului existent pentru favicon furnizat de tema dvs. WordPress (de obicei găsit prin document.querySelector('link[rel="icon"]')).

Acest lucru este mai bun decât inserarea unui nou tag <link>, care poate duce la conflicte sau comportamente neașteptate.

Pentru a realiza acest lucru, vom folosi o secvență de cod JavaScript care schimbă imaginea atunci când utilizatorul părăsește pagina și o readuce când revine.

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

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

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

Pur și simplu încărcați noul dvs. favicon în biblioteca media WordPress și copiați URL-ul complet al imaginii încărcate (de exemplu, https://example.com/wp-content/uploads/2024/05/favicon-notification.png).

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 faviconul doar pe anumite pagini, selectați opțiunea „Shortcode” și lipiți-l în orice zonă care acceptă shortcode-uri, 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.

Folosind acest fragment de cod, titlul site-ului dvs. se va schimba pentru a afișa un mesaj atrăgător atunci când utilizatorii comută pe un alt tab î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, s-ar putea să doriți să adăugați acest cod doar pe pagina „Adaugă în coș” pentru a reduce abandonul coșului pe site-ul dvs.

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: Explorați notificările Web Push pentru o acoperire mai largă

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 ușor 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. Î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ă despre 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 web push î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 ușor 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, vânzări sau alerte fără a scrie niciun cod.

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

Cum adaug notificări în WordPress?

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

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ă înregistrați pentru un serviciu de notificări web push 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 notificări la nivel de site care apar pe fiecare pagină, recomandăm utilizarea unui plugin pentru bară flotantă 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 pop-up î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 optimizat pentru mobil.

Dacă v-a plăcut acest articol, atunci vă rugăm să vă abonați la Canalul nostru de YouTube pentru tutoriale video despre WordPress. Ne puteți găsi, de asemenea, pe Twitter și Facebook.