Cerca:
Link sponsorizzati

Gestire gli interstitial con Javascript

Articolo scritto da Max Bossi
Pagina 2 di 2

Nella prima parte di questo articolo abbiamo visto come gestire la visualizzazione dello spot al momento della chiamata della pagina di contenuto; nella seconda parte di questa breve trattazione vedremo il codice della pagina pubblicitaria (la pagina che contiene lo spot) e le funzioni (dinamiche) che essa deve svolgere.

Una volta raggiunta la pagina pubblicitaria, infatti, è necessario gestire alcune esigenze:

  • per prima cosa è necessario impostare un timer che gestisca il tempo di visualizzazione della pagina;
  • scaduto il tempo di visualizzazione dobbiamo lanciare un redirect dell'utente verso la pagina voluta;
  • è altresì consigliabile stampare a video un link per saltare lo spot (per gli utenti disinteressati) e raggiungere direttamente la pagina di contenuto richiesta senza attendere che sia trascorso il tempo di visualizzazione assegnato allo spot.
Tutte queste cose possono essere gestite, ancora una volta, con Javascript.

Per prima cosa abbiamo bisogno di una funzione per recuperare la URL che abbiamo passato nella querystring (la funzione in oggetto è stata oggetto di un recente articolo pubblicato su questo sito).
Vediamo quindi il codice sorgente della nostra pagina pubblicitaria: 

<html>
<head>
<title>Pagina pubblicitaria</title>
<script type="text/javascript">
// funzione per recuperare i valori dalla querystring
function parseGetVars()
{
  var args = new Array();
  var query = window.location.search.substring(1);
  if (query)
  {
    var strList = query.split('&');
    for(str in strList)
    {
      var parts = strList[str].split('=');
      args[unescape(parts[0])] = unescape(parts[1]);
    }
  }
  return args;
}

// funzione per la gestione temporizzata del redirect
// la funzione viene lanciata al caricamento della pagina (evento onload del tag body)
// questa funzione richiede due parametri:
// - la URL di destinazione
// - il numero di secondi prima del redirect
function doRedirect(goURL,sec)
{ 
  window.setTimeout('location.replace(\'' + goURL + '\')', (parseInt(sec) * 1000))
}

// recupero i valori dalla querystring
// nel nostro caso recupero la URL della pagina di ritorno
var get = parseGetVars();
var backURL = get['backURL'];

// definisco il numero di secondi prima del redirect automatico
var sec = 10;
</script>

</head>
<body onload="doRedirect(backURL,sec);">

<script type="text/javascript">
// stampo a video un link per saltare lo spot senza attendere il redirect automatico
document.write('<p><a href="#" onclick="window.location=\'' + backURL + '\';return(false);">');
document.write('Salta lo spot (il redirect avverrà automaticamente dopo ' + sec + ' secondi).</a></p>');
</script>

<p>
Metto qui la mia pubblicità...<br>
Metto qui la mia pubblicità...<br>
Metto qui la mia pubblicità...<br>
Metto qui la mia pubblicità...<br>
Metto qui la mia pubblicità...<br>
Metto qui la mia pubblicità...<br>
Metto qui la mia pubblicità...
</p>

</body>
</html>
I commenti all'interno del codice credo siano sufficienti a far comprendere il funzionamento dei vari script.

Lo scopo della nostra pagina pubblicitaria è mostrare lo spot per un numero predeterminato di secondi; scaduto il tempo parte automaticamente il redirect verso la pagina di contenuto materialmente richiesta dall'utente che, se lo desidera, può "saltare lo spot" cliccando sul link apposito.

(L'articolo continua più sotto...)

Per chi lo desiderasse è possibile scaricare lo script completo a questa pagina.

Nella stessa categoria...
E-Learning
Corso AJAXCorso AJAX
Applicazioni Web 2.0 basate su AJAX con ASP, ASP.NET e PHP. A partire da 39 €.
Corso CSSCorso CSS
Web Design ed Accessibilità secondo il W3C con CSS ed XHTML. A partire da 29 €.
Corso JavascriptCorso Javascript
Guida completa allo scripting lato client. A partire da 39 €.
Link sponsorizzati