Rotazione banner in Javascript

Corso jQuery
Creare applicazioni client-side col Framework jQuery

Scritto da Luca Ruggiero nella sezione Javascript

Attraverso un semplice e veloce script possiamo gestire i banner pubblicitari sul nostro sito senza ricorrere a sofisticati e pesanti sistemi lato server, bensì avvalendoci di un sistema lato client: vediamo come costruire un facile sistema di rotazione banner in Javascript attraverso più esempi.

Il nostro script si basa su di un array che gestisce i dati, quindi su un sistema di estrazione casuale di uno degli item dell'array e, in fine, della stampa a video del banner casuale, come dimostrato nel seguente esempio di codice:

<script type="text/javascript">
var arr_banner = new Array();
arr_banner[0] = "<a href='http://www.lucaruggiero.it/'><img src='lucaruggiero.jpg'></a>";
arr_banner[1] = "<a href='http://www.lukeonweb.net/'><img src='lukeonweb.jpg'></a>";
var rnd_banner = Math.round((arr_banner.length - 1) * Math.random());
document.write(arr_banner[rnd_banner]);
</script>

Possiamo incollare lo script in questione nel punto della pagina in cui desideriamo che il banner compaia.

Nel caso in cui volessimo dare più pressione ad uno degli "enne" banner presenti nel nostro circuito, possiamo semplicemente duplicare un item dell'array di cui al banner che ci interessa che sia visualizzato più volte, come nell'esempio che segue:

<script type="text/javascript">
var arr_banner = new Array();
arr_banner[0] = "<a href='http://www.lucaruggiero.it/'><img src='lucaruggiero.jpg'></a>";
arr_banner[1] = "<a href='http://www.lukeonweb.net/'><img src='lukeonweb.jpg'></a>";
arr_banner[2] = "<a href='http://www.lukeonweb.net/'><img src='lukeonweb.jpg'></a>";
var rnd_banner = Math.round((arr_banner.length - 1) * Math.random());
document.write(arr_banner[rnd_banner]);
</script>

Possiamo infatti notare che l'item [1] e l'item [2] dell'array (evidenziati in grassetto per maggiore chiarezza) sono praticamente identici.

In questi due esempi abbiamo creato un unico array per gestire la rotazione banner in Javascript, ma possiamo anche dedicare un item all'immagine ed uno al link. Vediamo come:

<script type="text/javascript">
var arr_ban_img = new Array();
arr_ban_img[0] = "lucaruggiero.jpg";
arr_ban_img[1] = "lukeonweb.jpg";
var arr_ban_lnk = new Array();
arr_ban_lnk[0] = "http://www.lucaruggiero.it/";
arr_ban_lnk[1] = "http://www.lukeonweb.net/";
var rnd_banner = Math.round((arr_ban_img.length - 1) * Math.random());
document.write("<a href='" + arr_ban_lnk[rnd_banner] + "'><img src='" + arr_ban_img[rnd_banner] + "'></a>");
</script>

In sostanza, nel primo array specifichiamo le immagini da mostrare come creatività grafiche della pubblicità, mentre nella seconda matrice (in corrispondenza degli stessi item numerici delle immagini) specifichiamo la URL di destinazione. Creiamo quindi dinamicamente il codice HTML per il collegamento ipertestuale sull'immagine in fase di stampa a video dei dato casuale che verrà estratto.

Questo secondo sistema è sicuramente più completo del primo, ma quest'ultimo ha il grosso vantaggio di consentire di gestire non solo campagne pubblicitarie basate su immagini, ma anche spot video realizzati in Flash o con altre tecnologie del genere, che si basano quindi su un codice HTML differente dal classico link per mostrarlo e per generare il collegamento alla pagina di destinazione.

Tuttavia, è bene precisare che questo sistema ha sicuramente dei vantaggi, ma anche dei limiti:

  1. non consente di attivare e disattivare campagne pubblicitarie da pannello di controllo, a meno che non ci sia un'applicazione lato server alle spalle (sarà quindi necessario intervenire ogni volta manualmente sul codice per ricaricare il file via FTP);
  2. non consente di gestire eventuali orari in cui la campagna pubblicitaria deve girare e, quindi, quelli in quali no;
  3. non consente di tracciare il numero di visualizzazioni dei banner e nemmeno quelli dei click su di essi;
  4. così com'è, lo script consente di far girare formati banner di un solo tipo (728X90, piuttosto che 300X250 e così via) pr cui, nel caso in cui si voglia utilizzare questo sistema per più di un formato per pagina, sarà necessario clonare lo script, rinominando tutti i nomi delle variabili, ad esempio con un suffisso del tipo:
var arr_ban_img_300x250 = new Array();

per quel che riguarda il formato standard 300X250, avendo cura di rinominare tutte le varabili in questione, onde non compromettere il funzionamento dello script.

In conclusione, questo sistema torna utilissimo per la gestione di semplici campagne pubblicitarie senza eccessive pretese (da parte del cliente).

I più cliccati della sezione Javascript

:: jQuery Validation: validazione di un form con jQuery (107.295)

:: Breve guida a jQuery (97.739)

:: Le espressioni regolari in Javascript (84.839)

:: Gestione delle stringhe in Javascript (74.635)

:: Stampare una pagina col Dhtml (42.759)

:: Inserire in automatico lo slash nel formato data gg/mm/aaaa (40.705)

:: Menu orizzontale dinamico in Dhtml (37.093)

:: Gli Array in Javascript (35.808)

:: Temporizzazioni Javascript (31.416)

:: Istruzion condizionali in Javascript: if e switch (28.812)

IN EVIDENZA
DOWNLOAD