Come adattare AdSense per siti web responsive

Gli annunci Google AdSense sono disponibili in più versioni, ma ogni unità di annunci ha una dimensione ben precisa e questo potrebbe essere un problema nei siti web responsive. Ad esempio basta pensare ad un annuncio leaderboard la cui larghezza è di 728 pixel: in uno smartphone non potrà essere visualizzato correttamente.

Fino a qualche tempo fa le due soluzioni più gettonate erano:

• creare una versione "mobile" del sito con degli annunci dedicati (operazione costosa e complessa);
• utilizzare unità di annunci la cui dimensione massima sia compatibile con uno smartphone orientato verticalmente.

C'è poi una terza soluzione, decisamente più flessibile e semplice da implementare ma fino a quando Google non ne ha confermato la regolarità la sua adozione è stata piuttosto limitata.

Sto parlando della modifica del codice JavaScript degli annunci Google. Cambiare il codice degli annunci Google è una operazione vietata categoricamente dalle norme Google AdSense.

Recentemente è stato approvato un particolare tipo di modifica che permette agli sviluppatori di decidere quale unità di annunci mostrare agli utenti in base alla larghezza della finestra.

Per prima cosa bisogna stabilire quali unità di annunci sono le più adatte per le varie versioni responsive del sito web nella varie posizioni. Ad esempio in una posizione potrebbe essere adatto inserire il formato leaderboard 728x90px nella versione desktop tradizionale, un annuncio 468x60 nella versione tablet ed infine un 200x200 per gli smartphone.

A questo punto si possono creare le unità pubblicitarie tramite l'interfaccia Google AdSense e quindi si può preparare uno script che selezioni l'annuncio più adatto in base alla larghezza della finestra tramite degli "if".

Il codice di esempio fornito da Google è:

<script type="text/javascript">
google_ad_client = "ca-publisher-id";
if  (window. innerWidth  >= 800) {
  google_ad_slot = "1234567890";
  google_ad_width = 728;
  google_ad_height = 90;
} else if  (window.innerWidth < 400) {
  google_ad_slot = "2345678901";
  google_ad_width = 300;
  google_ad_height = 250;
} else {
  google_ad_slot = "3456789012";
  google_ad_width = 468;
  google_ad_height = 60;
}
</script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

Il codice appena illustrato andrà usato al posto dello script standard. La regolarità di questo metodo è stata confermata in un post del blog di Google AdSense. L'ufficialità del sistema non è però ancora stata contemplata nel regolamento AdSense che probabilmente non è ancora stato aggiornato.