Popup o modal box in 15 minuti

Pubblicato il 11 gennaio 2014
Autore:
L'articolo tratta di Seo, Web, Web Marketing, Wordpress.

popup-moda-box-wordpress

Ho realizzato qualche giorno fa un sito per un cliente che pretendeva la creazione di una splash screen prima del caricamento della home page; di una pagina, cioè, priva di testo, contenente un’immagine, che conducesse, poi, in maniera automatica, al sito vero e proprio. Si tratta di una pratica molto in voga diversi anni fa, ma utilizzata ancora oggi, specialmente per quei siti in cui coesistono più versioni in lingua o per ospitare inutili animazioni Flash.

Se avessi accontentato il cliente mi sarei macchiato di un “omicidio” a livello Seo: la prima pagina di un sito, quella, cioè, che risponde al nome a dominio, è l’elemento più rappresentativo dello stesso. Privarla di testo e di elementi utili che le consentano di essere caratterizzata all’interno dell’indice dei motori di ricerca è una pratica da evitarsi sempre, senza eccezioni!
Gli stessi backlink (i collegamenti ipertestuali provenienti da altri siti), almeno in massima parte, puntano al nome a dominio, e, se la pagina a cui questo corrisponde è priva di contenuto, perdono, in parte o in tutto, di efficacia.

In secondo luogo l’utente che viene costretto ad attendere e/o a dover effettuare un clic totalmente inutile e, spesso, a visualizzare la stessa immagine ad ogni apertura del sito, potrebbe abbandonarlo senza pensarci due volte!

Pertanto, posta la perentorietà della richiesta del cliente, ho realizzato che l’unica possibile soluzione poteva essere quella di utilizzare un popup a tutto schermo o, come è di moda definirlo in quest’ultimo periodo, di aprire una finestra modale contenente l’immagine sovrapposta al sito vero e proprio. Utilizzando questo escamotage i contenuti della home page vengono comunque processati dal browser e, ci si augura, ben indicizzati dai motori di ricerca.

Il popup o modal doveva possedere le seguenti caratteristiche:

  • essere visibile solo nell’home page del sito;
  • contenere una immagine estesa per tutta la finestra del browser, in modo tale da generare nell’utente l’impressione che si tratti di una pagina vera e propria e non di un popup;
  • garantire la responsività all’immagine in esso contenuta (l’adattamento della stessa, cioè, alle risoluzione utilizzata dall’utente);
  • disattivarsi automaticamente dato un certo lasso di tempo, permettendo all’utente di visualizzare, poi, l’home page vera e propria;
  • contenere comunque un pulsante per la chiusura anticipata della finta pagina sovrapposta;
  • essere visualizzato solo alla prima visita e non alle successive.

Ho deciso di utilizzare un’applicazione di Jquery per soddisfare le condizioni di cui sopra, nella fattispecie Fancybox (ne esistono, ovviamente, anche delle altre).
L’ultima di queste, la visualizzazione del popup solo alla prima visita, tuttavia, non viene gestita direttamente e, pertanto, ho dovuto utilizzare l’ulteriore libreria Cookie di Jquery. Il cookie non è altro che un minuscolo file di testo che viene memorizzato nella cartella dei file temporanei del navigatore (browser) del computer di chi visita il sito e, tramite esso, si stabilisce se l’utente non deve più visualizzare il popup o modal box.

La procedura

tema-wordpressIn primo luogo è necessario scaricare e decomprimere la libreria Fancybox al seguente indirizzo.

Posto che si stia utilizzando WordPress, si copi il suo contenuto in una cartella, denominata nel mio caso proprio Fancybox all’interno del tema usato dal Cms.

Poi bisogna effettuare la medesima operazione per il plugin di Jquery Cookie, scaricabile a questo indirizzo (il solo file jquery.cookie.js è sufficiente).

A questo punto è necessario includere i javascript dell’applicazione all’interno della pagina header.php del tema utilizzando la funzione wp_enqueque.
Il codice che segue va copiato ovviamente in functions.php del vostro tema.

  1. function addfancy() {
  2.    
  3.     if (is_front_page() ) : // check if the page is front
  4.         wp_enqueue_script(
  5.             'cookie',
  6.             get_stylesheet_directory_uri() . '/js/jquery.cookie.js',
  7.             array( 'jquery' )
  8.         );
  9.         wp_enqueue_script(
  10.             'fancybox',
  11.             get_stylesheet_directory_uri() . '/fancybox/jquery.fancybox.pack.js',
  12.             array( 'jquery' )
  13.         );
  14.         wp_enqueue_style(
  15.             'fancybox-css',
  16.             get_stylesheet_directory_uri() . '/fancybox/jquery.fancybox.css'
  17.         );
  18.     endif; // end check if we're in the front page
  19. }
  20. add_action( 'wp_enqueue_scripts', 'addfancy' );
function addfancy() {
	
	if (is_front_page() ) : // check if the page is front
	  	wp_enqueue_script(
			'cookie',
			get_stylesheet_directory_uri() . '/js/jquery.cookie.js',
			array( 'jquery' )
		);
        wp_enqueue_script(
			'fancybox',
			get_stylesheet_directory_uri() . '/fancybox/jquery.fancybox.pack.js', 
			array( 'jquery' )
		);
		wp_enqueue_style(
			'fancybox-css',
			get_stylesheet_directory_uri() . '/fancybox/jquery.fancybox.css'
		);
	endif; // end check if we're in the front page
}
add_action( 'wp_enqueue_scripts', 'addfancy' );

Come si può osservare la condizione iniziale sancisce che i tre elementi vengano caricati solo nella home page del sito. Consiglio inoltre di utilizzare il plugin Jquery Updater per essere certi di disporre della libreria più aggiornata di Jquery.

Il mio è un tema custom, l’home page del sito è caratterizzata dall’elemento index.php del template, per cui ho modificato quel file; nel vostro caso potrebbe essere home.php o un altro elemento se intendete caricare la finestra modale in una sezione differente del sito (ad esempio una pagina specifica o un archivio di categoria, o, ancora, un particolare articolo).

Il codice è estremamente semplice:

  1.     <script type="text/javascript">
  2.     $(document).ready(function(e) {
  3.             $("#apertura").click(function(){
  4.                 $(this).delay(6500).queue(function(next) {
  5.                     $.fancybox.close();
  6.                 });
  7.             });
  8.             if (typeof $.cookie('visto') == "undefined") {
  9.                 $("#apertura").fancybox({ width: '100%', openEffect: 'none' }).click();
  10.                 $.cookie('visto', true, { expires: 365 });
  11.             }
  12.         });
  13.     </script>
    <script type="text/javascript">
    $(document).ready(function(e) {
            $("#apertura").click(function(){
                $(this).delay(6500).queue(function(next) {
                    $.fancybox.close();
                });
            });
            if (typeof $.cookie('visto') == "undefined") {
                $("#apertura").fancybox({ width: '100%', openEffect: 'none' }).click();
                $.cookie('visto', true, { expires: 365 });
            }
        });
    </script>

Nella prima riga compare un link, “ache contiene l’immagine con id “apertura” posto su display:none, che permette l’attivazione del popup. Esso viene nascosto per una questione estetica.

Nella prima parte della funzione si dichiara che qualora il popup venga caricato, debba essere visibile per 6500 millesecondi, per poi chiudersi automaticamente. Ovviamente tale valore può essere modificato a seconda delle vostre esigenze.

Nella seconda si determina che, se all’interno della cache del browser dell’utente è presente un cookie denominato “paola” (perdonate il vezzo di assegnare nomi di donna ai cookie!), allora la finestra modale non deve essere più visualizzabile per 365 giorni (parametro expires), valore che ovviamente è possibile variare a piacimento.

Nella fattispecie: se il cookie non esiste viene eseguito il codice e viene creato, per l’appunto un cookie con una scadenza pari all’anno, altrimenti viene ignorato.

Consideriamo questa riga in particolare:

$(“#apertura”).fancybox({ width: ‘100%’, openEffect: ‘none’ }).click();

Il comando permette l’apertura del box modale: .click() infatti richiama la funzione $(“#apertura”).click(function(){…}); che attende 6.5s e chiude il fancybox. Di fatto viene simulato il clic sul link con id “apertura”.

Fancybox ovviamente dispone di numerosi comandi che trovate in questa pagina.

Nell’esempio ne ho utilizzati due. L’attribuzione del valore di 100% all’immagine che garantisce la responsività alla stessa, alternativamente è possibile attribuire alla finestra una dimensione fissa in pixel e OpenEffect posto su none, che stabilisce che all’apertura del modal box non siano attivati effetti grafici (gli effetti in apertura e chiusura del popup possono essere il fading – la dissolvenza – e l’elastico o nessuno dei due).

L’assenza di effetti in apertura consente di caricare quasi istantaneamente il modal box, dando così l’impressione all’utente che si tratti di una pagina vera e propria.
Un piccolo ritardo è comunque presente, intendo dire cioè che, per una frazione di secondo, prima è visibile l’home page del sito e, poi, la finestra modale.

Ovviamente questa è la configurazione che più si adattava alle mie esigenze, è possibile aggiungere parametri e definire altri comportamenti a vostra discrezione.

A questo punto la procedura si è conclusa, si può salvare il tutto e controllare il risultato!

Altre applicazioni

Modal box all’interno di una specifica pagina di WordPress

Poniamo si voglia creare il popup nella pagina denominata “Contatti” a cui WordPress ha attribuito id pari ad 7. Ebbene è sufficiente scaricare nel vostro pc l’elemento page.php del vostro tema, rinominandolo in page-contatti.php (ovviamente dovrete sostituire “contatti” con il lo slug effettivo della vostra pagina) e seguire le istruzioni precedenti. A quel punto si potrà ricaricare il nuovo file, via ftp, all’interno della cartella del vostro tema.

Modal box modificabile tramite editor

Poniamo, invece, si voglia aggiungere del testo al popup, un form o qualsiasi altro elemento di contenuto e, contemporaneamente, si voglia permettere al cliente finale di modificare autonomamente il popup senza costringerlo a scrivere e/o ritoccare codice. La soluzione è molto semplice: è sufficiente inserire all’interno del div che caratterizza il box modale il loop di una singola pagina. Nella fattispecie, create una nuova pagina che non deve comparire nei menu del sito, individuate il suo id (nel mio caso è pari a 7, la pagina “contatti” di cui all’esempio precedente) e inseritelo all’interno di questo snippet, nella seconda riga:

  1. <!--?php
  2. // Stampa il contenuto della pagina con ID 7
  3.    query_posts('page_id=7');
  4.    global $more;
  5.    $more = 0;
  6. // Loop
  7.    while (have_posts()) : the_post();
  8. // Il contenuto del post
  9.    the_content();
  10.    endwhile;
  11. ?-->
<!--?php 
// Stampa il contenuto della pagina con ID 7
   query_posts('page_id=7');
   global $more;
   $more = 0; 
// Loop
   while (have_posts()) : the_post(); 
// Il contenuto del post
   the_content(); 
   endwhile;
?-->

Per entrambi gli esempi sembra più efficace utilizzare un id di un div quale “ancora” per l’attivazione del popup, piuttosto che il link di cui all’esempio precedente, reso poi invisibile tramite display:none;.

Ringrazio il mio amico Alex Bedendo per la collaborazione.

Alternative tramite plugin per realizzare modal box o popup

Qualora non abbiate alcuna dimestichezza con php, ftp e codice in generale, potete ottenere più o meno lo stesso risultato con un plugin di WordPress ITRO Popup. L’ho testato personalmente e funziona perfettamente allo scopo!

Per concludere sembra quasi pleonastico affermare che il codice sopradescritto può essere utilizzato su qualsiasi altro content management system open source (Joomla, Drupal, ecc.) o anche su sistemi custom con i dovuti accomodamenti.

8 commenti all'articolo “Popup o modal box in 15 minuti”

  1. 13 gennaio 2014 alle 20:31

    Sempre esaustivo e innovativo :-)
    Io per pigrizia utilizzo un terzo metodo, quello del banner interstitial, con openX puoi gestire diversi parametri di visualizzazione, dai giorni della settimana, a quante volte deve essere visualizzato e quando far scadere la sessione, al tipo di browser o lingua dell’ip, etc.

    • 13 gennaio 2014 alle 22:18

      Grazie Gero, tu hai sempre una alternativa, questo è l’importante! :)
      Cmq me lo guardo openX, ho rimossso una parte dell’articolo in cui proponevo a qualche volenteroso di aiutarmi a creare uno script di un popup che si aprisse alla chiusura del browser, magari con il tuo metodo si può fare! :)

  2. 19 gennaio 2014 alle 23:47

    Salve, innanzitutto grazie per aver citato il nostro plugin. Volevamo chiedere se ci poteva riferire i problemi riscontrati con Chrome così da poter trovare il baco ed aggiornare la versione.
    Grazie per la collaborazione.

    Saluti,

    ITRO Team

    • 19 gennaio 2014 alle 23:59

      Salve, mi permetto di risponderti con il tu.
      Allora io ho testato su una decina di pc il popup generato tramite il vostro plugin e su di un paio, entrambi con Windows XP (ma non so dire onestamente se conti qualcosa il sistema operativo) e Chrome aggiornato all’ultima versione, il popup sfarfallava sullo schermo. Sembra impossibile, ma l’ho visto con i miei occhi! :)
      In più non rispondeva responsivamente alle modifiche della dimensione della finestra. Stessi computer, altri browser, tutto ok.
      Sinceramente non ho fatto un’analisi precisa del problema, perché avevo comunque intenzione di realizzare il tutto senza un plugin. Ciò detto, ho provato una decina di plugin per aprire popup e il vostro, sistemato questo piccolo bug, ritengo sia decisamente il migliore e il più semplice da utilizzare. :)

      • 24 gennaio 2014 alle 13:29

        Innanzitutto complimenti per il post, una soluzione molto semplice ed efficace ed una descrizione molto precisa!
        Per quanto riguarda il bug volevamo chiederti un grande favore… Potresti in qualche modo creare una pagina di test su cui attivare il plugin, dove possiamo fare qualche controllo ed eventalmente risolvere il problema?
        Il plugin ormai ha 44.000 download e punteggio 4.8 e vorremmo risolvere tutti i problemi possibili per migliorarlo e saremmo contenti di farlo anche grazie al tuo aiuto!

        • 24 gennaio 2014 alle 13:56

          Certo, datemi qualche giorno e vedo di riprodurre il problema…

          • 25 gennaio 2014 alle 16:37

            Ciao, ho fatto un test, con l’ultimo aggiornamento, i dati nel db non erano stati cancellati e devo dire che lo sfarfallio non si vede più.
            Se siete d’accordo correggo l’articolo.
            Ciao
            Enrico

          • 25 gennaio 2014 alle 17:14

            Certamente! Grazie ancora per aver citato il nostro plugin.

            Un saluto
            ITRO Team

Scrivi il tuo commento

Questo sito utilizza cookies tecnici e analytics e consente l'invio di cookies di terze parti. Proseguendo con la navigazione accetti l'utilizzo dei cookies Maggiori informazioni

Cookie Policy


Informativa estesa sull’utilizzo dei cookie

Uso dei cookie
arceriamarin.it o il “Sito” utilizza i Cookie per rendere i propri servizi semplici e efficienti per l’utenza che visiona le pagine di arceriamarin.it.
Gli utenti che visionano il Sito, vedranno inserite delle quantità minime di informazioni nei dispositivi in uso, che siano computer e periferiche mobili, in piccoli file di testo denominati “cookie” salvati nelle directory utilizzate dal browser web dell’Utente.
Vi sono vari tipi di cookie, alcuni per rendere più efficace l’uso del Sito, altri per abilitare determinate funzionalità.
Analizzandoli in maniera particolareggiata i nostri cookie permettono di:
◦memorizzare le preferenze inserite
◦evitare di reinserire le stesse informazioni più volte durante la visita quali ad esempio nome utente e password
◦analizzare l’utilizzo dei servizi e dei contenuti forniti da arceriamarin.it per ottimizzarne l’esperienza di navigazione e i servizi offerti
Tipologie di Cookie utilizzati da Ranked.it
A seguire i vari tipi di cookie utilizzati da arceriamarin.it in funzione delle finalità d’uso
Cookie Tecnici

Questa tipologia di cookie permette il corretto funzionamento di alcune sezioni del Sito. Sono di due categorie, persistenti e di sessione:
◦persistenti: una volta chiuso il browser non vengono distrutti ma rimangono fino ad una data di scadenza preimpostata
◦di sessione: vengono distrutti ogni volta che il browser viene chiuso

Questi cookie, inviati sempre dal nostro dominio, sono necessari a visualizzare correttamente il sito e in relazione ai servizi tecnici offerti, verranno quindi sempre utilizzati e inviati, a meno che l’utenza non modifichi le impostazioni nel proprio browser (inficiando così la visualizzazione delle pagine del sito).

Cookie analitici

I cookie in questa categoria vengono utilizzati per collezionare informazioni sull’uso del Sito. Arceriamarin.it userà queste informazioni in merito ad analisi statistiche anonime al fine di migliorare l’utilizzo del Sito e per rendere i contenuti più interessanti e attinenti ai desideri dell’utenza. Questa tipologia di cookie raccoglie dati in forma anonimasull’attività dell’utenza e su come è arrivata sul Sito. I cookie analitici sono inviati dal Sito Stesso o da domini di terze parti.

Cookie di analisi di servizi di terze parti

Questi cookie sono utilizzati al fine di raccogliere informazioni sull’uso del Sito da parte degli utenti in forma anonima quali: pagine visitate, tempo di permanenza, origini del traffico di provenienza, provenienza geografica, età, genere e interessi ai fini di campagne di marketing. Questi cookie sono inviati da domini di terze parti esterni al Sito.

Google Analytics è uno strumento gratuito di analisi web fornito da Google, che invia cookies al tuo dispositivo. Le informazioni generate dal tuo utilizzo del sito, compreso il tuo indirizzo IP, sono trasmesse a Google e conservate nei suoi server. Google utilizza queste informazioni per valutare il tuo utilizzo del Sito, predisporre resoconti sull’attività del sito per operatori web e per fornire altri servizi relativi all’attività del sito e all’utilizzo di internet. Google può anche trasferire queste informazioni a terzi se richiesto dalla legge oppure in caso di terzi che elaborano queste informazioni per conto di Google. Comunque Google non associa il tuo indirizzo IP con nessun altro dato che Google possiede.

In particolare, di seguito trovi i cookies utilizzati da Google Analytics:

Nome del Cookie Durata
_utmc Sessione
_utmv 0 minuti
_utmb 30 minuti
_utma Due anni
_utmz Sei mesi
Per ulteriori informazioni su Google Analytics, puoi consultare: https://developers.google.com/analytics/devguides/collection/analyticsjs/cookie-usage e la relativa privacy policy http://www.google.com/analytics/learn/privacy.html.

Cookie per integrare prodotti e funzioni di software di terze parti

Questa tipologia di cookie integra funzionalità sviluppate da terzi all’interno delle pagine del Sito come le icone e le preferenze espresse nei social network al fine di condivisione dei contenuti del sito o per l’uso di servizi software di terze parti (come i software per generare le mappe e ulteriori software che offrono servizi aggiuntivi). Questi cookie sono inviati da domini di terze parti e da siti partner che offrono le loro funzionalità tra le pagine del Sito.

Cookie di profilazione

Sono quei cookie necessari a creare profili utenti al fine di inviare messaggi pubblicitari in linea con le preferenze manifestate dall’utente all’interno delle pagine del Sito.
Arceriamarin.it, secondo la normativa vigente, non è tenuto a chiedere consenso per i cookie tecnici e di analytics, in quanto necessari a fornire i servizi richiesti.

Per tutte le altre tipologie di cookie il consenso può essere espresso dall’Utente con una o più di una delle seguenti modalità:
◦Mediante specifiche configurazioni del browser utilizzato o dei relativi programmi informatici utilizzati per navigare le pagine che compongono il Sito.
◦Mediante modifica delle impostazioni nell’uso dei servizi di terze parti

Entrambe queste soluzioni potrebbero impedire all’utente di utilizzare o visualizzare parti del Sito.

Siti Web e servizi di terze parti

Il Sito potrebbe contenere collegamenti ad altri siti Web che dispongono di una propria informativa sulla privacy che può essere diverse da quella adottata da arceriamarin.it e che che quindi non risponde di questi siti.

Come disabilitare i cookie mediante configurazione del browser:

Chrome
◦Eseguire il Browser Chrome
◦Fare click sul menù presente nella barra degli strumenti del browser a fianco della finestra di inserimento url per la navigazione
◦Selezionare Impostazioni
◦Fare clic su Mostra Impostazioni Avanzate
◦Nella sezione “Privacy” fare clic su bottone “Impostazioni contenuti“
◦Nella sezione “Cookie” è possibile modificare le seguenti impostazioni relative ai cookie:
Consentire il salvataggio dei dati in locale
Modificare i dati locali solo fino alla chiusura del browser
Impedire ai siti di impostare i cookie
Bloccare i cookie di terze parti e i dati dei siti
Gestire le eccezioni per alcuni siti internet
Eliminazione di uno o tutti i cookie

Per maggiori informazioni visita la pagina dedicata.

Mozilla Firefox
◦Eseguire il Browser Mozilla Firefox
◦Fare click sul menù presente nella barra degli strumenti del browser a fianco della finestra di inserimento url per la navigazione
◦Selezionare Opzioni
◦Seleziona il pannello Privacy
◦Fare clic su Mostra Impostazioni Avanzate
◦Nella sezione “Privacy” fare clic su bottone “Impostazioni contenuti“
◦Nella sezione “Tracciamento” è possibile modificare le seguenti impostazioni relative ai cookie:
Richiedi ai siti di non effettuare alcun tracciamento
Comunica ai siti la disponibilità ad essere tracciato
Non comunicare alcuna preferenza relativa al tracciamento dei dati personali
Dalla sezione “Cronologia” è possibile:
Abilitando “Utilizza impostazioni personalizzate” selezionare di accettare i cookie di terze parti (sempre, dai siti più visitato o mai) e di conservarli per un periodo determinato (fino alla loro scadenza, alla chiusura di Firefox o di chiedere ogni volta
Rimuovere i singoli cookie immagazzinati

Per maggiori informazioni visita la pagina dedicata.
Internet Explorer
◦Eseguire il Browser Internet Explorer
◦Fare click sul pulsante Strumenti e scegliere Opzioni Internet
◦Fare click sulla scheda Privacy e nella sezione Impostazioni modificare il dispositivo di scorrimento in funzione dell’azione desiderata per i cookie:
Bloccare tutti i cookie
Consentire tutti i cookie
Selezione dei siti da cui ottenere cookie: spostare il cursore in una posizione intermedia in modo da non bloccare o consentire tutti i cookie, premere quindi su Siti, nella casella Indirizzo Sito Web inserire un sito internet e quindi premere su Blocca o Consenti
Per maggiori informazioni visita la pagina dedicata.
Safari 6
◦Eseguire il Browser Safari
◦Fare click su Safari, selezionare Preferenze e premere su Privacy
◦Nella sezione Blocca Cookie specificare come Safari deve accettare i cookie dai siti internet.
◦Per visionare quali siti hanno immagazzinato i cookie cliccare su Dettagli
Per maggiori informazioni visita la pagina dedicata.

Safari iOS (dispositivi mobile)
◦Eseguire il Browser Safari iOS
◦Tocca su Impostazioni e poi Safari
◦Tocca su Blocca Cookie e scegli tra le varie opzioni: “Mai”, “Di terze parti e inserzionisti” o “Sempre”
◦Per cancellare tutti i cookie immagazzinati da Safari, tocca su Impostazioni, poi su Safari e infine su Cancella Cookie e dati

Per maggiori informazioni visita la pagina dedicata.

Opera
◦Eseguire il Browser Opera
◦Fare click sul Preferenze poi su Avanzate e infine su Cookie
◦Selezionare una delle seguenti opzioni:
Accetta tutti i cookie
Accetta i cookie solo dal sito che si visita: i cookie di terze parti e che vengono inviati da un dominio diverso da quello che si sta visitando verranno rifiutati
Non accettare mai i cookie: tutti i cookie non verranno mai salvati

Per maggiori informazioni visita la pagina dedicata.

Come disabilitare i cookie di servizi di terzi

Servizi di Google
Facebook
Twitter
Questa pagina è visibile, mediante link in calce in tutte le pagine del Sito ai sensi dell’art. 122 secondo comma del D.lgs. 196/2003 e a seguito delle modalità semplificate per l’informativa e l’acquisizione del consenso per l’uso dei cookie pubblicata sulla Gazzetta Ufficiale n.126 del 3 giugno 2014 e relativo registro dei provvedimenti n.229 dell’8 maggio 2014.

Chiudi