Come Aggiungere Facilmente Notifiche nella Scheda del Browser in WordPress

Le notifiche della scheda del browser sono una di quelle funzionalità semplici ma efficaci che mantengono silenziosamente i visitatori coinvolti e li incoraggiano a tornare.

Ad esempio, WPForms utilizza questa funzionalità per ricordare gentilmente agli utenti di tornare e completare il loro acquisto quando cambiano scheda. È sottile, non invadente e può aumentare i tassi di conversione sul tuo sito.

In questa guida, ti mostreremo come aggiungere facilmente queste notifiche di scheda che attirano l'attenzione al tuo sito WordPress. 🙌

Una volta provato, capirai perché è uno strumento così utile per mantenere i visitatori concentrati e farli tornare.

Cos'è una Notifica nella Scheda del Browser?

Una notifica nella scheda del browser è un messaggio che appare nella scheda del tuo sito web quando uno dei nostri visitatori sta guardando un altro sito nel proprio browser.

Aggiungendo una funzionalità di notifica nella scheda del browser al tuo sito WordPress, puoi attirare l'attenzione dell'utente nel momento in cui apre un'altra scheda per lasciare la tua pagina.

Ad esempio, puoi cambiare la favicon del tuo sito web, animarla, scrivere un messaggio personalizzato o semplicemente far lampeggiare la scheda.

Se hai un negozio online, le notifiche nella scheda del browser possono davvero aiutarti. Queste notifiche riporteranno i clienti distratti, ridurranno i tassi di abbandono del carrello e aumenteranno il coinvolgimento dei clienti.

Utilizzando questa funzionalità, puoi avvisare i tuoi clienti dell'abbandono del carrello o persino offrire uno sconto se riportano la loro attenzione sul tuo sito.

Ecco un esempio di notifica nella scheda del browser.

Detto questo, ti mostreremo come aggiungere facilmente diversi tipi di notifiche nella scheda del browser in WordPress.

Puoi utilizzare i link sottostanti per passare al metodo di tua scelta:

Installa WPCode per Aggiungere Notifiche nella Scheda del Browser

Puoi facilmente aggiungere notifiche nella scheda del browser sul tuo sito aggiungendo codice personalizzato in WordPress. Di solito, devi modificare il file functions.php del tuo tema, ma anche un piccolo errore può compromettere il tuo sito web.

Ecco perché ti consigliamo di utilizzare WPCode, che è il miglior plugin per snippet di codice WordPress sul mercato.

Abbiamo scoperto che è il modo più sicuro e semplice per aggiungere codice personalizzato al tuo sito. Per i dettagli, consulta la nostra recensione di WPCode.

Innanzitutto, devi installare e attivare il plugin WPCode. Per maggiori dettagli, puoi consultare la nostra guida passo passo su come installare un plugin di WordPress.

Dopo l'attivazione, visita la pagina Code Snippets » + Add Snippet dalla barra laterale di amministrazione di WordPress.

Ora, passa il mouse sopra l'opzione 'Add Your Custom Code (New Snippet)' e fai clic sul pulsante '+ Add Custom Snippet' sotto di essa.

Quindi seleziona il tipo di codice dall'elenco delle opzioni sullo schermo.

Successivamente, verrai portato alla pagina 'Create Custom Snippet'.

Indipendentemente dal tipo di notifica della scheda del browser che utilizzi, inserirai il codice qui.

Tipo 1: Mostrare Nuovi Aggiornamenti come Notifica nella Scheda del Browser

Questo metodo è ottimo se vuoi catturare l'attenzione dell'utente simulando attività sul tuo sito. Un numero apparirà nel titolo della scheda, facendolo sembrare come se un nuovo messaggio o aggiornamento fosse in attesa per l'utente.

Ad esempio, siti come Facebook e LinkedIn lo usano per mostrare notifiche non lette. Puoi usare questo trigger psicologico per incoraggiare gli utenti a tornare alla tua scheda per vedere cosa si stanno perdendo.

Una volta che sei nella pagina ‘Crea Snippet Personalizzato’, devi dare un nome al tuo snippet. Puoi scegliere qualsiasi cosa che ti aiuti a identificare il codice.

Successivamente, seleziona ‘Snippet JavaScript’ come ‘Tipo di Codice’ dal menu.

Quindi, tutto ciò che devi fare è copiare e incollare il seguente snippet di codice nella casella ‘Anteprima Codice’:

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

Questo codice dice al browser di iniziare a contare quando l'utente passa a una scheda diversa. Non appena ritorna al tuo sito, il titolo torna normale.

Una volta fatto ciò, scorri verso il basso fino alla sezione ‘Inserimento’. Scegli semplicemente l'opzione ‘Inserimento Automatico’ e lascia la posizione come ‘Intestazione Sito’.

Dopo di che, scorri di nuovo in cima alla pagina e attiva l'interruttore ‘Inattivo’ su ‘Attivo’.

Infine, fai clic sul pulsante ‘Salva Snippet’ per memorizzare le tue impostazioni.

Una volta terminato, il tuo snippet di codice personalizzato verrà aggiunto al tuo sito e inizierà a funzionare.

Tipo 2: Cambiare le Favicon come Notifica nella Scheda del Browser

Con questo metodo, visualizzerai una favicon diversa nella scheda del browser quando gli utenti navigano verso un'altra scheda. Questo è un modo sottile per ricordare loro che il tuo sito è ancora aperto.

Per fare ciò, useremo uno snippet JavaScript che scambia l'immagine quando l'utente lascia la pagina.

Innanzitutto, visita la pagina Snippet di Codice » + Aggiungi Snippet e fai clic su ‘+ Aggiungi Snippet Personalizzato’.

Nella pagina di creazione, seleziona ‘Snippet JavaScript’ come ‘Tipo di Codice’ dal menu.

Una volta fatto ciò, copia e incolla il seguente codice nella casella ‘Anteprima Codice’:

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

Dopo aver incollato il codice, devi sostituire l'URL nella riga Favicon con il link alla tua immagine di notifica.

Carica semplicemente la tua nuova favicon nella libreria multimediale di WordPress e copia il nome del file (nel mio esempio, è daisy.jpeg). Quindi, incollalo tra le virgolette nel codice.

Una volta fatto ciò, scorri verso il basso fino alla sezione ‘Inserimento’.

Puoi scegliere l'opzione ‘Inserimento Automatico’ se desideri incorporare automaticamente il codice in ogni pagina.

Per cambiare la favicon solo in pagine specifiche, seleziona l'opzione ‘Shortcode’ e incollala in qualsiasi area abilitata per gli shortcode, come i widget della barra laterale o in fondo all'editor di contenuti.

Successivamente, vai in cima alla pagina e attiva l'interruttore da ‘Inattivo’ ad ‘Attivo’ nell'angolo in alto a destra, e poi fai clic sul pulsante ‘Salva Snippet’.

Dopo di che, la tua favicon inizierà a cambiare come notifica della scheda del browser.

Tipo 3: Cambiare il Titolo del Sito come Notifica nella Scheda del Browser

Questo metodo è per te se vuoi cambiare il titolo del sito per riconquistare l'attenzione dei tuoi visitatori.

Utilizzando questo snippet di codice, il titolo del tuo sito cambierà per mostrare un messaggio accattivante quando gli utenti passano a un'altra scheda nel browser.

Utilizzeremo il plugin WPCode per cambiare il titolo del tuo sito in una notifica della scheda del browser.

Per accedere alla pagina ‘Crea Snippet Personalizzato’, visita la pagina Snippet di Codice » + Aggiungi Snippet dalla barra laterale dell'amministratore.

Qui, fai clic su ‘+ Aggiungi Snippet Personalizzato’ sotto l'opzione ‘Aggiungi il tuo codice personalizzato (Nuovo Snippet)’.

Successivamente, devi selezionare ‘Snippet JavaScript’ come tipo di codice dall'elenco di opzioni che appaiono sullo schermo.

Ora che sei sulla pagina ‘Crea Snippet Personalizzato’, inizia inserendo un titolo per il tuo snippet di codice.

Può essere qualsiasi cosa per aiutarti a ricordare a cosa serve il codice.

Quindi, tutto ciò che devi fare è copiare e incollare il seguente snippet di codice nella casella ‘Anteprima Codice’:

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

Una volta incollato il codice, puoi modificarlo e semplicemente scrivere qualsiasi messaggio desideri visualizzare sulla scheda del tuo browser nel codice.

Per scrivere il tuo messaggio desiderato, vai semplicemente alla riga var altTitle = 'Ritorna su questa pagina!'; e rimuovi il testo segnaposto con il messaggio per la notifica della scheda del tuo browser.

Successivamente, scorri verso il basso fino alla sezione ‘Inserimento’ e scegli la modalità ‘Inserimento Automatico’ per attivare la notifica della scheda del tuo browser su ogni pagina.

Tuttavia, se desideri il tuo messaggio accattivante solo su pagine specifiche, puoi scegliere l'opzione ‘Shortcode’.

Ad esempio, potresti voler aggiungere questo codice solo alla pagina ‘Aggiungi al Carrello’ per ridurre l'abbandono del carrello sul tuo sito web.

In tal caso, puoi scegliere l'opzione Shortcode.

Dopodiché, scorri verso il basso fino all'opzione ‘Posizione’ e fai clic sul menu a discesa accanto ad essa.

Da qui, seleziona l'opzione ‘Footer del Sito’.

Infine, scorri di nuovo in cima alla pagina e sposta l'interruttore da ‘Inattivo’ ad ‘Attivo’.

Quindi, fai clic sul pulsante ‘Salva Snippet’ per memorizzare le tue impostazioni.

Fatto! Ora, la notifica della scheda del tuo browser avviserà gli utenti che lasciano il tuo sito.

Bonus: Aggiungere Notifiche Push Web al Tuo Sito WordPress

Le notifiche della scheda del browser sono efficaci, ma hanno una grande limitazione. Funzionano solo se l'utente mantiene aperta la tua scheda.

Se vuoi raggiungere i visitatori anche dopo che hanno chiuso il tuo sito web, hai bisogno di notifiche push web. A differenza degli avvisi della scheda, questi sono messaggi attivi inviati direttamente al dispositivo o al browser dell'utente.

Il modo più semplice per configurarlo è con PushEngage. È il miglior software di notifiche push sul mercato.

PushEngage ti consente di inviare aggiornamenti automatici per nuovi post del blog, cali di prezzo o carrelli abbandonati. Noi lo usiamo qui a WPBeginner per notificare i nostri iscritti sui nuovi tutorial, ed è una fonte principale di traffico di ritorno per noi.

Per saperne di più, consulta la nostra recensione completa di PushEngage.

Include potenti funzionalità come A/B testing, push automatici, segmentazione degli utenti e promemoria intelligenti di opt-in. Questi strumenti ti aiutano a costruire un pubblico fedele che continua a tornare.

Per maggiori dettagli, consulta la nostra guida per principianti su come aggiungere notifiche push web in WordPress.

Domande Frequenti sull'Aggiunta di Notifiche nella Scheda del Browser

Ecco alcune domande che i nostri lettori pongono frequentemente in relazione all'aggiunta di notifiche nella scheda del browser in WordPress:

Come aggiungo una barra degli annunci in WordPress?

Il modo più semplice per aggiungere una barra degli annunci è utilizzare un plugin come OptinMonster. Ti consente di creare barre sticky che si posizionano nella parte superiore o inferiore del tuo sito per visualizzare aggiornamenti, offerte o avvisi senza scrivere codice.

Per maggiori informazioni, consulta il nostro tutorial su come creare una barra di avviso in WordPress.

Come aggiungo notifiche in WordPress?

Per aggiungere notifiche sul sito, puoi utilizzare un plugin come PushEngage o WPCode.

PushEngage gestisce le notifiche push web attive inviate ai browser, mentre WPCode ti consente di aggiungere script personalizzati per avvisi passivi nel titolo della scheda, come quelli in questa guida.

Come abilitare le notifiche del browser web?

Devi iscriverti a un servizio di notifiche push web come PushEngage.

Una volta installato il loro plugin per WordPress, il tuo sito può chiedere automaticamente ai visitatori il permesso di inviare avvisi al loro browser/dispositivo, anche quando non sono attualmente sul tuo sito web.

Come aggiungo un avviso in WordPress?

Puoi aggiungere un semplice avviso all'interno di un post utilizzando il blocco Gruppo predefinito con un colore di sfondo nell'editor di WordPress.

Per avvisi su tutto il sito che appaiono su ogni pagina, consigliamo di utilizzare un plugin per barre fluttuanti come OptinMonster o SeedProd.

Come aggiungere un banner popup in WordPress?

Lo strumento migliore per aggiungere banner popup è OptinMonster.

Fornisce un costruttore drag-and-drop per creare lightbox, slide-in e banner fluttuanti che si attivano in base a specifici comportamenti dell'utente, come il tempo sulla pagina o l'intento di uscita.

Per iniziare, consulta il nostro tutorial su come aggiungere un popup in WordPress.

Speriamo che questo articolo ti abbia aiutato a imparare come aggiungere notifiche nella scheda del browser in WordPress. Potresti anche voler consultare il nostro tutorial su come aggiungere box con icone in WordPress e dare un'occhiata alla nostra lista di modi per aggiungere un sito WordPress mobile-friendly.

Se ti è piaciuto questo articolo, iscriviti al nostro Canale YouTube per tutorial video su WordPress. Puoi trovarci anche su Twitter e Facebook.