Exit popup, un buon plugin gratuito per WordPress
Vorresti attirare l’attenzione dei visitatori che stanno lasciando il tuo sito, senza rompergli più di tanto le scatole? Bene, con un exit popup, puoi.
In poche parole, quando un utente sta per andare a chiudere la finestra del browser, all’interno della stessa finestra viene mostrato qualcosa per attirare la sua attenzione (un banner, un form, …), oscurando tutto il contenuto sottostante. Per capirci ecco una live demo:
In questo modo, l’utente ha la possibilità di:
- Continuare ad uscire normalmente chiudendo la finestra come stava per fare.
- Compilare il form per iscriversi alla newsletter (o qualsiasi altra cosa ci sia nell’exit popup).
- Chiudere il popup e continuare a navigare sul sito.
Come puoi notare, l’exit popup in questione è ben diverso da questi fastidiosissimi popup (o finestre di alert), che ti obbligano a cliccare su uno dei due pulsanti prima di poter fare ciò che si vuole:
Plugin WordPress
Ho fatto una breve ricerca ed ho trovato un plugin gratuito molto interessante, PopupAlly.
Questo plugin è nato per mostrare form di iscrizione (signup form) all’interno di WordPress in maniera molto semplice, senza dover modificare alcun codice. Mostra solo la parte grafica, quindi per elaborare i dati ottenuti (di base, nome ed email) si deve fare affidamento ai vari servizi di newsletter come MailChimp o Aweber.
Possiede un sacco di funzionalità interessanti, ma a mio papere la grande potenzialità è che permette di gestire anche l’exit popup 🙂
Per attivarlo basta cliccare sulla casella Exit-intent popup:
Poi è possibile decidere in quali pagine mostrare il popup e anche ogni quanti giorni mostrarlo (per gli utenti abituali del blog). Fantastico.
Modificare il testo, il logo, i colori è davvero semplice:
A questa pagina puoi trovare i tutorial in inglese per la configurazione del plugin.
L’unica pecca che ho trovato, è che non è possibile personalizzare il contenuto (almeno per la versione gratuita), nel senso che con questo plugin non c’è la possibilità di modificare i template presenti di default. Quindi se vuoi mostrare solamente un banner, dovrai mettere mano al codice del plugin.
Codice sorgente
Se non volessi utilizzare un plugin, ecco un codice base per capire come funziona, poi spetterà a te modificarlo ed ottimizzarlo [font e demo]:
[html]
<script type="text/javascript">
$(document).ready(function() {
$(document).mousemove(function(e) {
$(‘#exitpopup’).css(‘left’, (window.innerWidth/2 – $(‘#exitpopup’).width()/2));
$(‘#exitpopup’).css(‘top’, (window.innerHeight/2 – $(‘#exitpopup’).height()/2));
if(e.pageY <= 5)
{
// Show the exit popup
$(‘#exitpopup_bg’).fadeIn();
$(‘#exitpopup’).fadeIn();
}
});
$(‘#exitpopup_bg’).click(function(){
$(‘#exitpopup_bg’).fadeOut();
$(‘#exitpopup’).slideUp();
});
});
</script>
<style type="text/css">
#exitpopup
{
text-align:center;
}
#exitpopup h1
{
margin-top:0px;
padding-top:0px;
}
#exitpopup p
{
text-align:left;
}
</style>
<div style="display: none; width:100%; height:100%; position:fixed; background:#000000; opacity: .8; filter:alpha(opacity=0.8); z-index:999998;" id="exitpopup_bg">
</div>
<div style="width:670px; height:450px; margin:0px auto; display:none; position:fixed; color:#ffffff; padding:20px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; z-index:999999; background:rgb(20, 20, 20); background:rgba(0, 0, 0, 0.8);" id="exitpopup">
<h1>Wait!!! Before you go…</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquam interdum enim ut congue. Vivamus erat velit, convallis nec suscipit at, egestas nec nunc. Phasellus in faucibus nunc. Curabitur luctus suscipit faucibus. Phasellus risus risus, bibendum vitae commodo at, gravida in lorem. Nam euismod, turpis non viverra eleifend, leo lorem tempor elit, sit amet hendrerit justo purus at magna. In hac habitasse platea dictumst. Integer sodales pretium libero sed mattis. Aenean suscipit neque ac purus tincidunt iaculis.<br /><br />
Pellentesque ultricies tellus eu orci tempor aliquam vel posuere orci. Nulla in sapien ut tellus malesuada vulputate. Nunc sit amet enim felis, sit amet semper sapien. Vestibulum commodo, nisi vitae faucibus ullamcorper, libero est varius lorem, vel euismod ipsum odio sed elit. Sed risus enim, viverra sit amet pharetra molestie, scelerisque nec tortor.</p>
<a href="#"><img src="letmeinnow.png" style="width:568px; height:190px" border="0" style="border:0px; margin:0px auto;" /></a>
</div>
[/html]
Attenzione che con questo codice non è possibile scegliere ogni quanti giorni mostrare l’exit popup per ogni singolo utente, quindi verrà mostrato ad ogni tentativo di uscita dalla pagina.
Altri link utili
Ecco altri plugin e script interessanti, anche a pagamento.
- https://wordpress.org/plugins/sumome/
- http://www.geckotribe.com/expop/
- http://www.affkit.com/tools/exit-popup-script
- http://stackoverflow.com/questions/16025343/detect-if-user-will-leave-site-like-bounce-exchange
- http://ninjapopups.net/
- http://wickedcoolplugins.com/the-plugins/exit-popup/
- http://bounceexchange.com/
Vantaggi
Potresti usare l’exit popup per:
- Incrementare le conversioni del 300% (questo è un dato preso dalla pagina del plugin PopupAlly. Potrebbe essere anche di meno, ma sicuramente l’exit popup aiuta ad aumentare il numero di conversioni).
- Mostrare il form di registrazione.
- Chiedere un feedback.
- Proporre offerte speciali.
- Proporre prodotti con link d’affiliazione.
- Far scaricare un ebook gratuitamente.
- Mostrare pulsante sociali per acquisire nuovi fan.
- Mostrare immagini, video, audio…
Svantaggi
- Agli utenti potrebbe non piacere.
- Possibili problemi con Google AdWords, non permette i pop-up.
Ti consiglio di controllare sempre le condizioni d’utilizzo dei vari sistemi di monetizzazione/acquisizione traffico prima di usare questo genere di soluzioni.
E se te lo stai chiedendo, un exit popup non ha effetti negativi diretti sulla SEO. Ma se pensiamo che Google vuole il meglio per l’utente, l’exit banner che hai messo serve per aiutare l’esperienza utente oppure solo per i tuoi guadagni? In quest’ultimo caso potrebbe esserci la possibilità (remota?) che un quality rater di Google giudichi negativamente un exit popup aggressivo.
Le mie sono solo ipotesi, infatti ci sono molti siti autorevoli che usano l’exit popup senza alcun effetto negativo apparente.
In ogni caso, ci sono anche altri metodi che dovresti provare per mantenere più a lungo i visitatori sul tuo sito ed aumentare le conversioni.
29/07/2014 alle 14:09
ciao Roberto,
non mi arriva la newsletter (verificato con questo tuo ultimo articolo) e non ho modo di fare il download dei tuoi ebook (ho seguito il procedimento). come faccio? grazie mille ciao
Luca
30/07/2014 alle 17:12
Ciao Luca,
dovrebbe esserti arrivata questa mattina.
In ogni caso, ti ho inviato i link per mail.
Ciao
30/07/2014 alle 07:13
Grazie per l’articolo Roberto! Plug-in molto interessante.
30/07/2014 alle 14:13
Non è chiaro però come faccio a collegare la newsletter… esiste un modo per avere una lista dei contatti inseriti dagli utenti?
30/07/2014 alle 17:14
Ciao Lu,
vai alla pagina del tutorial http://ambitionally.com/popupally/tutorials/, alla sezione “2.a Integration”.
12/08/2014 alle 19:18
Ottimo plugin ma non ti sembra che spam e di siti aggressivi ce ne siano anche troppi in giro?
19/08/2014 alle 00:43
Bel plugin! Per caso ne conosci uno per ottimizzare i video per mobile? Ne ho provato uno che si chiama responsive video, ma non li ottimizza benissimo :/ Te ne conosci qualcuno migliore?
Oppure nel codice html sai cosa devo scrivere per farlo diventare responsivo?
Ad esempio in questo codice posso inserire qualcosa per farlo diventare responsivo?
Grazie mille in anticipo!