Overlayer con jQuery per le campagne pubblicitarie

L’overlayer è uno strumento di advertising basato su un div posizionato in primo piano e sovrapposto ai contenuti della pagina. Questa versione è basata su jQuery ^[1] e richiede il plugin jQuery.cookie ^[2] come requisito primario.

E’ possibile visualizzare la demo dello script in questa pagina ^[3].

L’implementazione è semplice e non richiede più di qualche minuto per la personalizzazione. Prima di tutto apriamo il file jquery.overlayer.js e modifichiamo le variabili principali:

/****************************/
/*	CONFIGURATION	    	*/
/****************************/
var ol_defaults = {
        ol_pagesdir   	        : 'http://www.sito.it/advertising/jquery.overlayer',
	ol_cssurl	 	: 'http://www.sito.it/advertising/jquery.overlayer/css',
	ol_imgdir	  	: 'http://www.sito.it/advertising/jquery.overlayer/img',
	ol_closetime		: '30 sec',
	ol_cookielife		: '20 min',
	ol_advpage		: 'overlayer.htm',
	ol_advwidth		: '400',
	ol_advheight		: '400',
	ol_id			: 'ol',
	ol_fadefx		: 'y',
	ol_speedfx		: 'fast',
	ol_imgname		: 'ol_close.png',
	ol_opacity		: 'y',
	ol_opacname		: 'opacity.png',
	ol_margintop		: '20',
	ol_maindomain		: 'n',
	ol_showborder		: 'y'
};
// set array to hide (visibility=hidden) some elements which may contain flash stuff
ol_hide_elem = new Array();
// set array to hide (display=none) some elements which may contain flash stuff
ol_none_elem = new Array();
// set main domain if you have some subdomains in the same site
ol_site_cookname = new Array();
/****************************/
/*	END CONFIGURATION   	*/
/****************************/

Analizziamo ogni singolo parametro:

• ol_pagesdir

  Indica l’URL assoluto che porta alla cartella in cui avete caricato i file dell’overlayer. Nessuno slash finale.

• ol_cssurl

  Indica l’URL assoluto alla cartella in cui sono contenuti i fogli di stile. Nessuno slash finale.

• ol_imgdir

  Indica l’URL assoluto alla cartella in cui è contenuta l’immagine del bottone di chiusura. Nessuno slash finale.

• ol_closetime

  E’ il tempo di chiusura automatica dell’overlayer. Sono ammesse le seguenti unità di tempo: “sec“, “min“, “hou“, “day” rispettivamente per secondi, minuti, ore e giorni. Es.: “30 sec”.

• ol_cookielife

  E’ il tempo che deve intercorrere tra una visualizzazione e l’altra dell’overlayer. Sono ammesse le seguenti unità di tempo: “sec“, “min“, “hou“, “day” rispettivamente per secondi, minuti, ore e giorni. Es.: “20 min”.

• ol_advpage

  E’ la pagina (html, php, asp, etc) contenente il codice della campagna advertising. Deve essere posizionata nella cartella definita precedentemente da “ol_pagesdir“.

• ol_advwidth

  Indica la lunghezza del banner o dell’annuncio espressa in pixel. Vanno inseriti solo numeri senza unità di misura.

• ol_advheight

  Indica l’altezza del banner o dell’annuncio espressa in pixel. Vanno inseriti solo numeri senza unità di misura.

• ol_id

  E’ un prefisso identificativo del cookie. Se viene utilizzato un overlayer alla volta basta lasciarlo così altrimenti è necessario personalizzarlo ad ogni chiamata. Successivamente verrà spiegato come fare.

• ol_fadefx

  Se impostato su “y” verrà visualizzato un effetto “fade” sull’overlayer. L’alternativa è “n”.

• ol_speedfx

  Se viene attivato l’effetto “fade” potete scegliere la velocità di esecuzione. Possibili parametri: “slow” e “fast”.

• ol_imgname

  Indica il nome dell’immagine per il bottone di chiusura. L’immagine viene cercata all’interno del percorso impostato con la variabile “ol_imgdir“.

• ol_opacity

  Se impostato su “y” attiverà l’effetto “opacità” sulla pagina. L’alternativa è “n”.

• ol_opacname

  E’ il nome dell’immagine utilizzata per l’effetto “opacità”. Normalmente non dovrebbe essere cambiata.

• ol_margintop

  Indica la distanza dell’overlayer dal margine superiore della pagina (in pixel). Inserire solo numeri senza unità di misura.

• ol_maindomain

  Normalmente dovrebbe essere lasciato su “n”. Viene impostato su “y” quando è necessario visualizzare lo stesso overlayer su siti di terzo livello appartenenti allo stesso dominio.
  Un esempio chiarirà meglio la situazione. Si supponga di avere http://www.sito.it e http://terzo.sito.it. Impostando la variabile su “n” ed inserendo un overlayer in ciascuno dei due siti, al primo caricamento l’utente vedrà entrambi gli annunci senza che il cookie del primo influenzi la visualizzazione del secondo. Viceversa mettendo la variabile su “y”, il cookie dato all’utente al caricamento del primo annuncio varrà anche per il secondo sito.

• ol_showborder

  Mostra o meno un bordo intorno all’overlayer. Possibili parametri: “y” e “n”.

Questo per quanto riguarda le variabili principali. Rimangono 3 array da poter personalizzare in base alle necessità:

• ol_hide_elem = new Array();

  Indica gli ID degli elementi html che devono essere nascosti al caricamento dell’overlayer. Ad esempio un div, o un qualsiasi altro contenitore di filmati flash, crea problemi alla corretta visualizzazione dell’overlayer. Per risolvere basta inserire gli ID di quegli elementi che vogliamo momentaneamente nascondere. Torneranno visibili alla chiusura della campagna pubblicitaria. Es.: new Array(‘elem1′,’wrapper’);

• ol_none_elem = new Array();

  Simile al parametro precedente tranne per il fatto che viene utilizzata la direttiva “display” al posto di “visibility“. Ciò significa che gli elementi inseriti in questo array verranno nascosti e modificheranno “lo spazio” nella pagina. Torneranno visibili alla chiusura della campagna pubblicitaria. Es.: new Array(‘elem1′,’wrapper’);

• ol_site_cookname = new Array();

  Facciamo un passo indietro e torniamo alla variabile “ol_maindomain“. Se impostata su “y” è necessario inserire i domini per cui far valere il cookie. Nell’esempio precedente è stato fatto il caso di due siti: “http://www.sito.it” e “http://terzo.sito.it”. In questo caso basta inserire il dominio di secondo livello “sito.it” nell’array (senza www o altro prefisso).

L’opera di personalizzazione è terminata. Passiamo alla fase di inserimento del codice richiamando i javascript necessari nell’head della pagina:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script>
<script type="text/javascript" src="jquery.overlayer.js"></script>

Le prime due righe, come è evidente, caricano il framework “jquery” e il plugin “jquery.cookie”. L’ultimo script, invece, è l’overlayer.

Subito dopo inseriamo la chiamata alla funzione principale:

<script type="text/javascript">
$(document).ready(function() {
	$().overlayer();
});
</script>

Visto che abbiamo personalizzato il codice direttamente nel file “jquery.overlayer.js“, è stata inserita solamente la funzione senza parametri.

Supponiamo, invece, di voler utilizzare overlayer diversi nello stesso sito. Possiamo sovrascrivere le variabili di default, impostate precedentemente, in questa maniera:

<script type="text/javascript">
$(document).ready(function() {
	$().overlayer({
		ol_timetoclose: '20 sec',
		ol_cookielife: '15 sec',
		ol_advpage: 'pagina2.htm',
		ol_margintop: '50',
		ol_opacity:'n',
		ol_id:'camp2'
	});
});
</script>

In questa maniera otteniamo l’importante risultato di poter attivare overlayer diversi e indipendenti (nel cookie, nella pagina da richiamare, nelle opzioni, etc) richiamando sempre e solo gli stessi file javascript. Possiamo inserire e sovrascrivere tutte le variabili viste in precedenza.

Per essere ancora più chiari facciamo un esempio. Nella index del sito potremmo avere questo codice:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script>
<script type="text/javascript" src="jquery.overlayer.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$().overlayer({
		ol_timetoclose: '20 sec',
		ol_cookielife: '15 sec',
		ol_advpage: 'pagina1.htm',
		ol_margintop: '50',
		ol_opacity:'n',
		ol_id:'ol1'
	});
});
</script>

Mentre in una pagina interna potrebbe essere necessario richiamare un file html diverso o impostare parametri di durata differenti dal primo caso. Avremo quindi un codice simile a questo:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script>
<script type="text/javascript" src="jquery.overlayer.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$().overlayer({
		ol_timetoclose: '50 sec',
		ol_cookielife: '30 min',
		ol_advpage: 'pagina2.htm',
		ol_margintop: '150',
		ol_opacity:'y',
		ol_id:'ol2'
	});
});
</script>

Oltre alla personalizzazione dei parametri basilari, prestate attenzione alla variabile “ol_id“: sono differenti nei due casi. In questa maniera avremo cookie diversi per overlayer diversi. Se invece avessimo voluto utilizzare lo stesso cookie per le due campagne sarebbe bastato assegnare lo stesso nome o, meglio ancora, omettere direttamente la variabile.

Il codice è stato testato sui più diffusi browser in circolazione e non dovrebbero esserci problemi di compatibilità.

Download

Il pacchetto .zip contiene tutti i file necessari (compresi jQuery ed il plugin jquery.cookie). Per scaricare lo script cliccate sul link: Saibal jQuery Overlayer ^[4]