Come cambiare un banner pubblicitario ad ogni refresh con javascript

Nell’articolo di oggi vediamo come cambiare un banner pubblicitario ad ogni refresh della pagina con javascript, utile per i nostri advertising e per dare un senso di “novità” ad ogni accesso.

Come tutti ormai ben saprete la pubblicità è diventata la vera anima del business sul web. Con l’aumento esponenziale di advertising i designer e developer sono sempre alla ricerca di nuovi modi per rendere gli adv sempre meno “invasivi” cercando di sacrificare al minimo l’usabilità del proprio sito. Molte testate o grossi portali di settore (non facciamo nomi..) tuttavia hanno dimenticato un concetto molto significativo: è giusto guadagnare ma siete davvero sicuri di sacrificare così tanto l’usabilità del vostro sito? Nell’articolo di oggi voglio proporvi una soluzione alternativa, per far ruotare due (o più) banner ad ogni refresh.

[button link=”http://www.targetweb.it/tutorial/2014/adv-change/index.html” color=”blue” target=”blank” size=”large”]Demo[/button]

Creazione del plugin trgAdRotator()

Fatta questa doverosa premessa, vediamo come fare “ruotare” due banner pubblicitari ad ogni refresh della pagina.

Struttura Html

<script>
adRotator();
</script>

Motore Javascript

Ecco la funzione adRotator:

a) Selezionare l’adv da visualizzare a partire da una lista

b) Comporre l’html dell’adv che apparirà nel punto esatto in cui andrete a posizionare la funzione di richiamo adRotator() (Vedi paragrafo “struttura html”).

function adRotator(){

var n_ads =  2;
var now = new Date();
var sec = now.getSeconds();
var ad = sec % n_ads
ad+=1;

if(ad == 1){

var url = "#link";
var alt = "Alt";
var banner = "banner1.jpg";
var width = "728";
var height = "90";

} else if(ad == 2) {

var url = "#link2";
var alt = "Alt2";
var banner = "banner2.jpg";
var width = "728";
var height = "90";

} else {

var url = "#link";
var alt = "Alt";
var banner = "banner1.jpg";
var width = "728";
var height = "90";

}//Else AD

//Creo il banner con link all'interno dell'html dove viene richiamata la funzione
document.write('<a href=\"' +url+ '\" target=\"_blank\">');
document.write('<img src=\"'+banner+'\" width=\"');
document.write(width+'\" height=\"'+height+'\"');
document.write('alt=\"'+alt+'\" border=0></a>');

}//AdRotator

Demo e Download

[button link=”http://www.targetweb.it/tutorial/2014/adv-change/index.html” color=”blue” target=”blank” size=”large”]Demo[/button]

[symple_divider style=”solid” margin_top=”20px” margin_bottom=”20px”]

[symple_column size=”one-half” position=”first”]

Targetweb ti è utile? Offrimi un Caffè e sostieni questo progetto!

Importo minimo della donazione per il download: 1€ -  Entrerai a far parte della mailing list PREMIUM esclusiva di targetweb dove potrai scaricare LIFETIME tutti i contenuti premium del sito.

Per scaricare il file inserisci la tua email paypal e digita l'importo della donazione (minimo 1€)

 
 

[/symple_column]

[symple_column size=”one-half” position=”last”]

Non vuoi donare niente? 🙁 Scarica comunque condividendo questo articolo sui tuoi social preferiti:

[viral-download file1=”http://www.targetweb.it/download/2014/adv-change.zip” name1=”Scarica lo script!” url=”http://www.targetweb.it/come-cambiare-banner-pubblicitario-ad-ogni-refresh-javascript/” message=”Per scaricare il file completo devi condividere l’articolo su un social network. ” tweet=”#Javascript – Adv Rotator ad ogni refresh” thankyou=”Grazie per aver condiviso, clicca sul link qui sotto:”/]

[/symple_column]

[symple_divider style=”solid” margin_top=”20px” margin_bottom=”20px”]

Questo articolo ti è stato utile? Fammi sapere cosa ne pensi nei commenti !

Lascia un commento

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

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.

5-esempi-creativi-siti-web-dark-trarre-ispirazione
Up Next:

5 esempi creativi di siti web "dark" da cui trarre ispirazione

5 esempi creativi di siti web "dark" da cui trarre ispirazione