AdSense e il Responsive Web Design

Responsive Web Design (Wikimedia)

Articolo originale: How to use Google AdSense Ads on Responsive Websites

Ormai che gli smartphone e i tablet stanno prendendo sempre più piede il responsive web design, cioè un tipo di layout che si adatti automaticamente al tipo di terminale con cui l'utente naviga, sta diventando una necessità (è caldamente consigliato anche da Google). Nel post segnalato si fa riferimento a come inserire facilmente Google AdSense in questo tipo di siti: purtroppo i banner non si adattano automaticamente  ma con un piccolo codice javascript, simile a quello visto per i test a/b, saremo in grado di inserire il banner adatto in funzione della larghezza della finestra del browser:


<script type="text/javascript">

    var width = window.innerWidth 
        || document.documentElement.clientWidth 
        || document.body.clientWidth;

    google_ad_client = "ca-publisher-id";

    if (width > 800) {
    // Load the Leaderboard 728x90 Unit for wide screen
    google_ad_slot = "ad-unit-1"; 
    google_ad_width = 728; 
    google_ad_height = 90;
    } else if ((width < 800) && (width > 400)) { 
    // Load the 300x250 Medium Rectangle 
    google_ad_slot = "ad-unit-2"; 
    google_ad_width = 300; 
    google_ad_height = 250;
    } else { 
    // For small screens, load the 468x60 banner 
    google_ad_slot = "ad-unit-3"; 
    google_ad_width = 468; 
    google_ad_height = 60;
    }

</script>

<script type="text/javascript"
    src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

il trucco sta nell'uso della variabile window.innerWidth che tiene traccia della dimensione della finestra video; il codice tiene conto anche di vecchie versioni di IE che non usano quella variabile. Il codice è stato approvato dal team Google.