Visto che mi è stato chiesto da diverse persone, in questo articolo ti voglio spiegare come inserire un exit popup in WordPress simile a quello presente in questo sito. Molto probabilmente, se sei approdato qui, sai già a cosa può servire e come puoi sfruttarlo per aumentare le conversioni del tuo sito web. Tuttavia, proprio perché non voglio dare nulla per scontato, vediamo brevemente a cosa serve e come può essere utilizzato.

Se sei interessato solo alla parte tecnica, clicca pure qui per saltare l’introduzione. Se invece non sai cosa sia un exit popup, ti basterà muovere il puntatore del mouse fuori dal browser in questo momento e ne vedrai subito uno all’opera (tra l’altro, se ti va, clicca uno dei bottoni di condivisione che compariranno nel popup, così mi aiuterai a diffondere questo articolo).

Perché un popup di uscita dovrebbe aumentare le mie conversioni?

Immagina che tu stia facendo una qualsiasi ricerca su Google per risolvere un problema. Magari ti sei finalmente deciso a creare il tuo blog professionale sull’argomento su cui ti senti più preparato, installi WordPress, trovi un tema gratuito che ti piace e ad un certo punto ti rendi conto che questo non ti permette di modificare il footer. Ti metti alla ricerca di una soluzione su Google, cercando qualcosa come “personalizzare il footer di WordPress”, e ti imbatti in questo mio articolo. Apri la pagina web dell’articolo, magari è anche scritto bene e ti da tutte le informazioni che cercavi. Che cosa fai a questo punto? Come credo che faccia la maggior parte delle persone, dopo aver trovato, letto e applicato la soluzione che cercavi, chiudi la pagina e ti rimetti subito al lavoro.

Ebbene, questo accade più di quanto immagini.

Per questo motivo tutti gli esperti di strategie SEO o di web marketing in generale ti consigliano di inserire in ogni articolo dei link che rimandano ad altri articoli del tuo blog, oppure di invogliare in qualche modo l’utente a condividere la tua pagina o iscriversi alla tua newsletter. Altrimenti rischi che l’utente che ti sei appena “conquistato” e meritato per aver scritto un articolo utile, chiaro ed efficace, abbandoni il tuo sito e non torni più.

Uno dei modi migliori per invogliare l’utente a compiere un’ultima azione prima di andarsene è proprio quello di creare un exit popup, ovvero un popup che viene innescato nel momento in cui il lettore sta per uscire dalla pagina del tuo articolo per chiudere il browser o per passare ad un altro sito.

Provalo in questa pagina. Non appena ti muoverai con il puntatore del mouse fuori dalla finestra del browser comparirà un messaggio che ti chiederà di condividere questo articolo (se non lo hai già fatto e questo articolo ti sta piacendo, sentiti libero di cliccare su “condividi” se ti va!).

exit popup wordpress esempio blogwp.it

Esempio di utilizzo di un exit popup in WordPress.

Ovviamente all’interno del popup puoi inserire quello che preferisci, in base al tuo obbiettivo principale: può essere un form di contatto che invita l’utente a contattarti per chiederti un preventivo, un modulo di iscrizione alla newsletter o ancora un prodotto o un servizio particolare che stai proponendo in offerta speciale per i lettori del tuo blog. Questo sta a te stabilirlo.

Il modo più semplice ed efficiente che ho trovato finora per implementare un exit popup come quello che ho appena descritto è quello di installare un plugin gratuito. Il plugin si chiama wBounce e, oltre a scaricarlo da questo link, lo puoi installare direttamente dal backend di WordPress.

Installazione e configurazione di wBounce

Vediamo ora alcuni esempi su come installare questo plugin e configurarlo per sfruttarne al massimo le potenzialità.

Per quanto riguarda l’installazione del plugin, non mi soffermerò più di tanto. Si installa nel solito modo: dal backend di WordPress seleziona Plugin / Aggiungi Nuovo / Inserisci “wBounce” come parola chiave all’interno della search bar e poi clicca su “Installa Ora” e successivamente “Attiva”.

exit popup wordpress wbounce

Installazione wBounce dal backend

Fino ad ora, niente di particolarmente complicato.

Una volta installato e attivato il plugin, all’interno del backend, sotto la voce “Impostazioni”, comparirà l’opzione “wBounce”. Cliccando su questa nuova voce entrerai all’interno della pagina che ti consentirà di configurare e gestire il plugin.

La maggior parte delle opzioni sono intuitive, quindi ora ne vedremo solo alcune. Resta inteso che per qualsiasi ulteriore informazione o chiarimento di cui hai bisogno puoi lasciare un commento in fondo all’articolo e cercherò di risponderti il prima possibile.

La prima opzione su cui vorrei farti porre l’attenzione è forse la più importante, ovvero wBounce content. Questa è l’area dove andrai a definire il contenuto del tuo exit popup.

Il plugin ti fornisce già un esempio, che può essere una buona base di partenza ma che, così com’è, non ti serve a granché, perché non contiene una call to action particolarmente efficace. Ecco il template di esempio del plugin.

<div class="modal-title">
  <h3>Title</h3>
</div>

<div class="modal-body">
  <p>Paragraph</p>

  <form>
    <input type="email" placeholder="[email protected]">
    <input type="submit" value="learn more »">
    <p class="form-notice">*this is a fake form</p>
  </form>
</div>

<div class="modal-footer">
  <p>no thanks</p>
</div>

Puoi partire da questo, inserendo il titolo e il testo che preferisci al posto delle parole “Title” e “Paragraph” per inserire la comunicazione che ritieni più funzionale allo scopo del tuo popup, ma per quanto riguarda il funzionamento vero e proprio, molto probabilmente dovrai ricorrere all’utilizzo di altri plugin.

Mettiamo ad esempio che tu voglia inserire dei bottoni per la condivisione dei tuoi articoli sui social: non dovrai fare altro che installare un plugin per il Social Sharing ed inserire uno shortcode  da qualche parte all’interno del tag <p>.

Per aiutarti a capire ancora meglio, ecco il codice HTML che ho inserito io per creare il popup così come lo vedi in questo sito.

<div class="modal-title">
    <h3>un piccolo favore prima di abbandonare il sito!</h3>
</div>
<div class="modal-body">
    <p>Se ti è piaciuto questo articolo o pensi che possa essere utile a qualcuno dei tuoi contatti, ti chiedo gentilmente di <strong>premiare</strong> il mio impegno <strong>condividendolo</strong> sulla bacheca di uno dei tuoi profili social:</p>
    [wp_social_sharing social_options='facebook, twitter, googleplus, linkedin' twitter_username='your_twitter_username' facebook_text='Facebook' twitter_text='Twitter' googleplus_text='Google+' linkedin_text='Linkedin' icon_order='f,g,t,l' show_icons='0' before_button_text='' text_position='' social_image='']
</div>

<div class="modal-footer">
  <p>no, non voglio</p>
</div>

In questo caso ho usato il plugin WP Social Sharing, che mette a disposizione lo shortcode (evidenziato in grassetto) per inserire i bottoni social in qualsiasi pagina, articolo, widget, ecc.

In modo del tutto analogo potrai inserire lo shortcode di qualsiasi altro plugin, come ad esempio MailPoet o MailChimp per l’iscrizione alla newsletter, Contact Form 7 per inserire all’interno del popup un form di contatto, o WooCommerce per invitare i tuoi clienti direttamente ad acquistare un prodotto.

Dopodiché, sempre all’interno della sezione dedicata alla configurazione di wBounce, potrai cliccare sui tab Options e Styling per personalizzare ulteriormente sia l’utilizzo che lo stile grafico del tuo nuovo exit popup secondo le tue esigenze.

exit popup wordpress configurazione wbounce

Configurazione di wBounce.

Grazie al tab Analytics inoltre, potrai anche attivare il tracciamento degli eventi su Google Analytics che, come effetto collaterale positivo, migliora la misurazione dei tempi di giacenza su una singola pagina da parte degli utenti.

Migliorare le statistiche di Analytics grazie a wBounce

Attenzione perché, da quanto ho potuto verificare personalmente, il monitoraggio degli eventi funziona solo se stai gestendo il tuo sito con il codice di Analytics (che si può installare ad esempio come spiego in questo articolo) ma non con lo script di Google Tag Manager.

Come dicevo, l’ulteriore beneficio che ci ritroviamo gratis con l’installazione di wBounce è che, se selezioniamo l’opzione “Enable GA Events Tracking”, Google Analytics sarà in grato di interpretare meglio i tempi in cui un utente sta sul nostro sito.

In generale, se inseriamo solamente lo script che ci fornisce Analytics nell’header, Google “capisce” quando un utente entra all’interno del nostro sito perché si genera un evento. Tuttavia, se l’utente legge solo il contenuto della pagina in cui è entrato e poi chiude il browser e naviga verso un altro sito, non verrà generato nessun altro evento verso Google. Non avendo nessun altro feedback dalla pagina web che gli consenta di capire per quanto tempo un utente è rimasto all’interno della pagina, registrerà un tempo di giacenza pari a 0:00:00 e un tasso di rimbalzo 100%. Diversamente, se l’utente naviga all’interno di un’altra pagina dello stesso sito, Google avrà modo di ricevere un’altro evento (generato dallo script di Analytics) e il tempo di giacenza misurato sarà più accurato.

Selezionando l’opzione “Enable GA Events Tracking”, invece, sarà il popup stesso a mandare un evento a Google nel momento in cui verrà innescato. In questo caso, è come se Analytics ricevesse un “segno di vita”, da parte dell’utente che naviga nel nostro sito, e fosse in grado di misurare esattamente il tempo in cui l’utente è rimasto sulla nostra pagina. Cosa che altrimenti, senza ricevere altri trigger oltre a quello di apertura della pagina, non avrebbe potuto fare.

Spero che questo articolo ti possa essere utile nel tuo lavoro e, come al solito, ti invito a lasciarmi un commento o contattarmi attraverso il contact form presente nella pagina contatti. Cercherò di risponderti il prima possibile e aiutarti a chiarire qualsiasi dubbio.

2 commenti
  1. Sergio

    Ciao,

    questo plugin è ottimo ma ha due pecche: è da un anno che non viene aggiornato, non ha il tatso chiudi.

    Sapresti, almeno, come fare per aggiungere il tasto chiudi del pop-up? grazie

    Rispondi
    • Massimiliano
      Massimiliano dice:

      Ciao Stefano,

      E’ vero, non viene aggiornato da un po’, ed in effetti anche questo articolo è un po’ datato ormai. Da quando l’ho scritto qualche aggiornamento del plugin c’è stato, ma molto pochi :)

      Tuttavia, all’interno della directory dei plugin di WordPress (https://wordpress.org/plugins/wbounce/) viene riportato come testato fino alla versione 4.9.8 di WP stesso. Questo mi fa pensare che non sia stato abbandonato e che forse, semplicemente, non ci sia stato bisogno di aggiornarlo per mantenerlo compatibile con le versioni successive di WP. D’altro canto, in effetti, c’è da dire che non ci sono state grandi evoluzioni o nuove funzionalità. Personalmente lo trovo molto semplice e immediato, per questo continuo ad usarlo.

      Per quanto riguarda il tasto “chiudi” prova a fare così: alla fine di tutto il testo HTML, inserisci un DIV e assegnagli la classe CSS “modal-footer”; poi dentro al div ci inserisci un semplice BUTTON, come nell’esempio qui sotto.

      <div class="modal-footer">
       <button type="button">Close</button>
      </div>

      Come vedi qui in questo blog, io al posto del bottone ho messo il classico “No, grazie”. Fondamentalmente puoi mettere dentro il DIV quello che vuoi. Basta che clicchi al suo interno e il popup si chiude. Il fatto di inserire il bottone è un escamotage :)

      Prova e fammi sapere se in questo modo risolvi!

      Ciao, grazie!
      Massimiliano

      Rispondi

Lascia un Commento

Vuoi partecipare alla discussione?
Sentitevi liberi di contribuire!

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *