WpGuida

Guida Wordpress è una raccolta di tutorials e guide su temi, plugin e sviluppo in wordpress

Ti trovi qui: Home / Wordpress Development / Come creare un Exit Popup senza plugin
Come creare un exit popup senza plugin su wordpress

Come creare un Exit Popup senza plugin

di Lascia un commento

Da ormai diversi anni vanno di moda gli exit popup, piccoli riquadri che compaiano nel momento in cui un utente sta per abbandonare il vostro sito o a distanza di alcuni minuti da quando inizia a navigare tra le vostre pagine. I vantaggi degli exit popup rispetto ai popup tradizionali sono molteplici:

  • non possono essere bloccati dai browser o dai sistemi di ad blocking
  • permettono di aumentare il tasso di conversione
  • attirano l’attenzione dell’utente dandovi un’ultima occasione per comunicargli qualcosa di importante

Con il passare del tempo numerosi sviluppatori si sono quindi dedicati alla realizzazione di plugin per la gestione degli exit popup e delle loro varianti. Wpbeginner a febbraio ha inoltre fatto un articolo dove vengono messi a confronto alcuni di questi per valutarne caratteristiche e prestazioni.

Sul mio blog ho avuto modo di testare il plugin gratuito Icegram ma come spesso accade ho optato nel giro di pochi giorni per la sua rimozione. Alla fine mi rendo sempre conto che di tutto quel javascript e di tutto quel css che viene caricato a me bastano poche righe quindi utilizzare un plugin significherebbe ridurre drasticamente i tempi di caricamento per qualcosa che può essere ottenuto scrivendo pochissime righe di codice. Vediamo insieme come fare.

Exit Popup – Ouibounce

Per la realizzazione del nostro exit intent popup utilizzerò un piccolo script gratuito chiamato Ouibounce. Considerate che la versione minificata pesa appena 1.5Kb quindi praticamente nulla. Il primo step da eseguire consiste nel fare in modo che lo script venga caricato all’interno delle nostre pagine e possibilmente nel footer. Non è necessario caricare lo script sul server in quanto è disponibile tramite CDN all’indirizzo:

https://cdnjs.cloudflare.com/ajax/libs/ouibounce/0.0.12/ouibounce.min.js

In passato ho scritto un articolo su come creare un plugin per il vostro sito con lo scopo di inserire al suo interno eventuali modifiche che vorrete apportare. Se non lo avete ancora letto vi consiglio di dargli uno sguardo prima di procedere alla lettura di questa guida. In alternativa sappiate che il codice necessario al caricamento dello script nel footer può anche essere inserito all’interno del file functions.php del vostro tema.

Il codice da inserire all’interno del plugin o del file functions.php è il seguente:

//Carico il file JS per l'exit popup
function load_popup_script() {

	if(is_front_page()) {
		wp_enqueue_script( 'popup-script', 'https://cdnjs.cloudflare.com/ajax/libs/ouibounce/0.0.12/ouibounce.min.js', array(), '0.0.12', false );
	}
}

add_action( 'wp_enqueue_scripts', 'load_popup_script' );

Nel codice sopra riportato ho aggiunto una condizione

if(is_front_page())

questo vuol dire che lo script verrà caricato solo nella home page. Volendo potete rimuovere la condizione oppure modificarla sostituendola per esempio con is_page().

Adesso provate ad aprire la vostra homepage, analizzate il codice sorgente e verificate se nel footer è stato correttamente caricato lo script.

ATTENZIONE

Il codice CSS ed HTML che segue è stato prelevato dalla pagina demo del plugin e non è di mia creazione. Per ulteriori demo fate riferimento alla pagina dello script presente su GitHub

Exit Popup – CSS

Aggiungete il seguente codice CSS al foglio di stile del vostro tema:

#ouibounce-modal {
  font-family: 'Open Sans', sans-serif;
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#ouibounce-modal .underlay {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0,0,0,0.5);
  cursor: pointer;
  -webkit-animation: fadein 0.5s;
  animation: fadein 0.5s;
}
#ouibounce-modal .modal {
  width: 600px;
  height: 400px;
  background-color: #f0f1f2;
  z-index: 1;
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 4px;
  -webkit-animation: popin 0.3s;
  animation: popin 0.3s;
}
#ouibounce-modal .modal-title {
  font-size: 18px;
  background-color: #252525;
  color: #fff;
  padding: 10px;
  margin: 0;
  border-radius: 4px 4px 0 0;
  text-align: center;
}
#ouibounce-modal h3 {
  color: #fff;
  font-size: 1em;
  margin: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
}
#ouibounce-modal .modal-body {
  padding: 20px 35px;
  font-size: 0.9em;
}
#ouibounce-modal p {
  color: #344a5f;
  line-height: 1.3em;
}
#ouibounce-modal form {
  text-align: center;
  margin-top: 35px;
}
#ouibounce-modal form input[type=text] {
  padding: 12px;
  font-size: 1.2em;
  width: 300px;
  border-radius: 4px;
  border: 1px solid #ccc;
  -webkit-font-smoothing: antialiased;
}
#ouibounce-modal form input[type=submit] {
  text-transform: uppercase;
  font-weight: bold;
  padding: 12px;
  font-size: 1.1em;
  border-radius: 4px;
  color: #fff;
  background-color: #4ab471;
  border: none;
  cursor: pointer;
  -webkit-font-smoothing: antialiased;
}
#ouibounce-modal form p {
  text-align: left;
  margin-left: 35px;
  opacity: 0.8;
  margin-top: 1px;
  padding-top: 1px;
  font-size: 0.9em;
}
#ouibounce-modal .modal-footer {
  position: absolute;
  bottom: 20px;
  text-align: center;
  width: 100%;
}
#ouibounce-modal .modal-footer p {
  text-transform: capitalize;
  cursor: pointer;
  display: inline;
  border-bottom: 1px solid #344a5f;
}
@-webkit-keyframes fadein {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}
@-ms-keyframes fadein {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}
@keyframes fadein {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}
@-webkit-keyframes popin {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 0;
  }

  85% {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
    opacity: 1;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
@-ms-keyframes popin {
  0% {
    -ms-transform: scale(0);
    transform: scale(0);
    opacity: 0;
  }

  85% {
    -ms-transform: scale(1.05);
    transform: scale(1.05);
    opacity: 1;
  }

  100% {
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes popin {
  0% {
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    opacity: 0;
  }

  85% {
    -webkit-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05);
    opacity: 1;
  }

  100% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}

Exit Intent Popup – HTML

A questo punto dobbiamo inserire il codice html del nostro exit popup all’interno delle pagine in cui vogliamo che appaia. Sarà quindi necessario apportare delle modifiche al nostro tema. Per fare ciò andiamo quindi su Aspetto->Editor, scegliamo la pagina da modificare (potrebbe per esempio essere footer.php) ed incolliamo il seguente codice html:

<!-- Ouibounce Modal -->
    <div id="ouibounce-modal">
      <div class="underlay"></div>
      <div class="modal">
        <div class="modal-title">
          <h3>This is a Ouibounce modal</h3>
        </div>

        <div class="modal-body">
          <p>Thanks for stoping by!</p>
          <br>
          <p>You can style your Ouibounce modal however you see fit. You can also include big buttons, an email capture or just plain text. The sky's the limit!</p>
          <br>
          <p>Close this modal by clicking "No Thanks" below or clicking anywhere outside of the modal.</p>

          <form>
            <input type="text" placeholder="you@email.com">
            <input type="submit" value="learn more &raquo;">
            <p class="form-notice">*this is a fake form</p>
          </form>
        </div>

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

La modifica che segue è valida solo per chi usa un tema Genesis e deve essere saltata da chi non ha un tema che si basa su questo framework.

Se invece usate un tema Genesis come me modificate il functions.php ed aggiungete:

//Inserisco il codice per exit popup
add_action( 'genesis_before_footer', 'show_exit_popup' );
function show_exit_popup() { ?>
  <!-- Ouibounce Modal -->
    <div id="ouibounce-modal">
      <div class="underlay"></div>
      <div class="modal">
        <div class="modal-title">
          <h3>Vuoi imparare ad usare WordPress?</h3>
        </div>
 
        <div class="modal-body">
          <img src="https://www.wpguida.it/wp-content/uploads/2015/07/promo.png"/>
        </div>
 
        <div class="modal-footer">
	  <?php echo do_shortcode('[mc4wp_form]'); ?>
        </div>
      </div>
    </div>
<script>
ouibounce(document.getElementById('ouibounce-modal'), {
  sitewide: true,
});

      $('body').on('click', function() {
	$('#ouibounce-modal').hide();
      });

      $('#ouibounce-modal .modal-footer').on('click', function() {
        $('#ouibounce-modal').hide();
      });

      $('#ouibounce-modal .modal').on('click', function(e) {
        e.stopPropagation();
      });

</script>

<?php
}

Exit Popup – Javascript

Sempre nella stessa pagina in cui abbiamo incollato il codice html aggiungiamo queste poche righe di javascript.

<script>
ouibounce(document.getElementById('ouibounce-modal'), {
  sitewide: true,
});
</script>

Lo script presenta diverse opzioni che potrete configurare a vostro piacimento. Ma se lo usate cosi per come ve l’ho proposto si comporterà nel seguente modo: nel momento in cui il cursore del mouse si porta all’altezza della tabella del tab della pagina sul vostro browser il modal si attiva e scrive un cookie che scade dopo 30 giorni. In questo modo il nostro exit intent popup sarà visualizzato una sola volta per ogni visitatore. Se volete essere più aggressivi potete liberamente configurare queste opzioni. Per maggiori dettagli vi rimando alla pagina dello script su GitHub.

Appassionato di Wordpress e del mondo tecnologico in generale, proud to be an apple fanboy and android lover.

Ti è piaciuto questo articolo?

Se vuoi ricevere via email tutti i miei nuovi articoli e tutorials su WordPress compila il box qui a fianco. Tranquillo, non riceverai alcuna email di spam ma solo contenuti di qualità!