mercoledì 1 maggio 2013

Come rendere asincrone le chiamate agli AdServer


Se avete sul vostro sito delle pubblicità saprete che le chiamate agli adserver si inseriscono nel punto in cui il banner deve essere mostrato. Di solito si tratta di una singola chiamata ad una funzione, definita da un file js esterno fornito dall'adserver, richiamato nei meta della pagina. Sarebbe tutto perfetto, ma...

C'è un problema!
Quella singola funzione javascript, che dovrebbe semplicemente iniettare il codice html del banner in quel punto della pagina, il più delle volte inserisce altri script, che richiamano altri script, che richiamano altri AdServer fino a fornirci il banner. In caso di rallentamenti nel recupero di risorse esterne o down momentaneo di qualche server ci si può ritrovare un sito “bloccato” per colpa delle pubblicità. E non è bello.


Possiamo rendere asincrone le chiamate all’adserver?
Gli adserver scrivono utilizzando la funzione javascript document.write(), che inserisce codice html nella pagina nel momento in cui viene eseguito, e quindi nel punto in cui il banner è richiamato.

Se vogliamo per qualche ragione avere un funzionamento asincrono, ovvero poter mettere i banner nelle loro posizioni al termine del caricamento della pagina, c’è una soluzione: 
ridefinire temporaneamente la funzione document.write
In javascript è possibile infatti ridefinire le funzioni, e le funzioni di oggetti come document non fanno eccezione, almeno sui browser su cui ho testato (fatemi sapere). Quindi possiamo creare una document.write che faccia quello che vogliamo noi, per poi rimetterla a posto.

A parole so' bboni tutti
Il tutto si risolve in pochissime righe di codice (ci aggiungo giusto un po’ di commenti), con una funzione come questa:


// copyright Ludovico Grossi, share, enjoy, modify and don’t forget credits!
// http://ludovicogrossi.blogspot.it/
function captureWrites(arg1, arg2) { // adapt the number of parameters for your needs
   var buffer;
   // backup the document.write function
   var document_write_bak = document.write;
   // redefine the document.write function
   document.write = function(input) {
       buffer += input;
   }
   // call the original script
   YourOriginalAdServerCall(arg1, arg2); // PUT YOU ORIGINAL ADSERVER CALL HERE
   // the function called our modified version of document.write, we will return it at the end
   // now we should restore the function
   document.write = document_write_bak;
   // and we finish!
   return buffer;
}



Nel codice HTML, dove dovete mostrare la pubblicità:


<div id=”ad300x250”>
<script type=”text/javascript”>
var ad300x250 = captureWrites(‘arg’, ‘arg2‘); // adapt the number of parameters for your needs
$(function () {
   $(“#ad300x250”).html(ad300x250);
});
</script>
</div>


In questo esempio uso jQuery giusto per inserire il contenuto nel div adibito al banner quando viene scatenato l’evento document.ready, così che venga eseguito subito, pur non bloccando il resto della pagina. Ovviamente potete (dovete) modificarlo secondo le vostre necessità, ad esempio ritardandolo con un


<script type=”text/javascript”>
var ad300x250 = captureWrites(‘arg’, ‘arg2‘);
window.setTimeout(function() {
   $(“#ad300x250”).html(ad300x250);
}, 3000);
</script>


o richiamandolo al window.load (fine del caricamento completo della pagina)


<script type=”text/javascript”>
var ad300x250 = captureWrites(‘arg’, ‘arg2‘);
$(window).load(function () {
   $(“#ad300x250”).html(ad300x250);
});
</script>





LG.