Le notifiche nella 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 lo utilizza per ricordare gentilmente agli utenti di tornare e completare il loro acquisto quando cambiano scheda. È sottile, non intrusivo e può aumentare i tassi di conversione sul tuo sito.
In questa guida, ti mostreremo come aggiungere facilmente queste notifiche nella scheda che attirano l'attenzione al tuo sito WordPress. 🙌
Una volta provato, vedrai perché è uno strumento così utile per mantenere i visitatori concentrati e farli tornare.
💡Risposta rapida: Come aggiungere notifiche nella scheda del browser
Il modo più sicuro per aggiungere notifiche nella scheda del browser è utilizzare il plugin WPCode. Ti consente di inserire JavaScript personalizzato senza modificare i file del tema.
Questa guida copre tre tipi specifici:
- Tipo 1 (Conteggio notifiche): Visualizza un numero dinamico nel titolo della scheda (ad es. "(1) Nuovo messaggio") per simulare attività.
- Tipo 2 (Avviso favicon): Sostituisce l'icona del tuo sito con un'immagine diversa per attirare l'attenzione visiva quando l'utente cambia scheda.
- Tipo 3 (Messaggio personalizzato): Modifica il titolo della pagina con una frase di testo come "Non dimenticare di dare un'occhiata!" per attirare nuovamente i visitatori.
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 sito diverso nel loro browser.
Aggiungendo una funzionalità di notifica nella scheda del browser sul tuo sito web WordPress, puoi catturare l'attenzione dell'utente nel momento in cui apre un'altra scheda per lasciare la tua pagina.
Ad esempio, puoi cambiare il favicon del tuo sito web, animarlo, 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, abbasseranno i tassi di abbandono del carrello e aumenteranno il coinvolgimento dei clienti.
Utilizzando questa funzionalità, puoi avvisare i tuoi clienti riguardo all'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
- Tipo 1: Mostrare nuovi aggiornamenti come notifica nella scheda del browser
- Tipo 2: Modificare le favicon come notifica nella scheda del browser
- Tipo 3: Modificare il titolo del sito come notifica nella scheda del browser
- Bonus: Aggiungi notifiche push web al tuo sito WordPress
- Domande frequenti sull'aggiunta di notifiche nella scheda del browser
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ò rompere il tuo sito web.
Ecco perché consigliamo di utilizzare WPCode, che è il miglior plugin per snippet di codice WordPress sul mercato.
L'abbiamo trovato 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 WordPress.
🚨Nota: WPCode ha anche una versione gratuita che puoi utilizzare per questo tutorial. Tuttavia, l'aggiornamento al piano a pagamento ti darà accesso a più funzionalità.
Dopo l'attivazione, visita la pagina Snippet di codice » + Aggiungi snippet dalla barra laterale di amministrazione di WordPress.
Ora, posiziona il cursore del mouse sull'opzione ‘Aggiungi il tuo codice personalizzato (Nuovo snippet)’ e fai clic sul pulsante ‘+ Aggiungi snippet personalizzato’ sotto di essa.
Quindi seleziona il tipo di codice dall'elenco delle opzioni sullo schermo.
Dopodiché, verrai reindirizzato alla pagina ‘Crea snippet personalizzato’.
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 attirare l'attenzione dell'utente simulando attività sul tuo sito. Un numero apparirà nel titolo della scheda, facendolo sembrare come se un nuovo messaggio o un aggiornamento fosse in attesa per l'utente.
Ad esempio, siti come Facebook e LinkedIn utilizzano questo 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 sulla 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 quello 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 torneranno sul tuo sito, il titolo tornerà normale.
Una volta fatto ciò, scorri verso il basso fino alla sezione 'Inserimento'. Scegli semplicemente l'opzione 'Inserisci automaticamente' e lascia la posizione come 'Intestazione sito'.
Dopodiché, scorri di nuovo in cima alla pagina e imposta l'interruttore ‘Inactive’ su ‘Active’.
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: Modificare 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 'Inserisci automaticamente' se desideri incorporare automaticamente il codice in ogni pagina.
Per cambiare il favicon solo in pagine specifiche, seleziona l'opzione 'Shortcode' e incollalo 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 sposta l'interruttore da 'Inattivo' ad 'Attivo' nell'angolo in alto a destra, quindi fai clic sul pulsante 'Salva Snippet'.
Dopodiché, il tuo favicon inizierà a cambiare come notifica nella scheda del browser.
Tipo 3: Modificare il titolo del sito come notifica nella scheda del browser
Questo metodo è per te se vuoi cambiare il titolo del sito per catturare nuovamente 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.
Useremo il plugin WPCode per cambiare il titolo del tuo sito in una notifica nella 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 nella pagina 'Crea snippet personalizzato', inizia inserendo un titolo per il tuo snippet di codice.
Questo può essere qualsiasi cosa per aiutarti a ricordare a cosa serve il codice.
Quindi, tutto quello 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 scrivere semplicemente il messaggio che desideri visualizzare nella scheda del tuo browser nel codice.
Per scrivere il tuo messaggio desiderato, vai semplicemente alla riga var altTitle = 'Return to this page!'; 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 che il tuo messaggio accattivante appaia 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 'Piè di pagina del sito'.
Infine, scorri di nuovo in cima alla pagina e sposta l'interruttore da 'Inattivo' ad 'Attivo'.
Quindi, fai clic sul pulsante ‘Save Snippet’ per salvare le tue impostazioni.
Fatto! Ora, la notifica della scheda del tuo browser avviserà gli utenti che lasciano il tuo sito.
Bonus: Aggiungi notifiche push web al tuo sito WordPress
Le notifiche nella scheda del browser sono efficaci, ma hanno un limite principale. 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 delle notifiche push web. A differenza degli avvisi di 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. Lo usiamo qui su WPBeginner per notificare ai nostri iscritti i 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 test A/B, push automatici, segmentazione degli utenti e promemoria di opt-in intelligenti. 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 di annuncio in WordPress?
Il modo più semplice per aggiungere una barra di annuncio è utilizzare un plugin come OptinMonster. Ti consente di creare barre sticky che si posizionano in alto o in basso del tuo sito per visualizzare aggiornamenti, vendite o avvisi senza scrivere alcun 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 potrà 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 a livello di 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'intenzione 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 caselle di funzionalità con icone in WordPress e dare un'occhiata al nostro elenco di modi per aggiungere un sito WordPress ottimizzato per dispositivi mobili.
Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.
Dennis Muthomi
Ho implementato il metodo di modifica del favicon per diversi clienti e-commerce, ed è stato particolarmente efficace se combinato con messaggi di abbandono del carrello.
Un consiglio che aggiungerei è di testare A/B diversi messaggi di notifica e intervalli di tempo. Abbiamo osservato una riduzione del 15% nei tassi di abbandono del carrello dopo aver testato e ottimizzato il tempo per attivarsi a 45 secondi invece dei 30 predefiniti. L'implementazione di WPCode rende facile regolare questi parametri per le diverse esigenze dei clienti.
Jiří Vaněk
Ho notato quanto bene funzioni in app come Messenger, dove la scheda del browser mostra un nuovo messaggio da qualcuno con cui stai chattando. Dalla mia esperienza, funziona benissimo. È davvero utile sapere come implementare qualcosa di simile in WordPress perché cattura l'attenzione e può aumentare significativamente il tempo che un utente trascorre sul sito. E l'implementazione in WordPress, secondo questa guida, non è affatto complicata.
Carole
È possibile far sì che le schede alternative abbiano un tempo maggiore tra i cambi? Penso che lo sfarfallio costante possa diventare fastidioso e le persone potrebbero semplicemente chiudere la scheda.
Supporto WPBeginner
Sì, dipenderebbe dai metodi che stavi usando, cambieresti i numeri nelle migliaia per gli snippet di codice poiché quelli determinano quanti millisecondi aspettare per il codice.
Amministratore