Google adsense diventa responsive

Google si è decisa a fornire il supporto su adsense per il mobile ufficialmente e google adsense diventa responsive. Questo significa che i banner pubblicitari si ridimensioneranno a seconda del dispositivo che visualizza il sito senza rovinare la grafica del vostro sito.
Per generare banner adsense responsivi basta seguire questi semplici passaggi:
Creare una nuova unit utilizzando la voce Responsive ad unit
resonsive-add-unit-add-sense-beta
Una volta che avete creato il banner cliccate su get code e ti apparirà una maschera di popup simile a questa:
responsive-google-adsense-code
Diamo una scorsa veloce al codice che dovrete incollare nel punto dove volete inserire il banner:

<style>
.responsive-after-the-title { width: 320px; height: 50px; }
@media(min-width: 500px) { .responsive-after-the-title { width: 468px; height: 60px; } }
@media(min-width: 800px) { .responsive-after-the-title { width: 728px; height: 90px; } }
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- responsive after the title -->
<ins class="adsbygoogle responsive-after-the-title"
     style="display:inline-block"
     data-ad-client="ca-pub-xxxxxxx"
     data-ad-slot="xxxxx"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Notare che tutto è basato sulle media query css3 e funzionano solo su browser recenti, su bleah explorer 7 non funzionano. Inoltre nella doc ufficiale c’è scritto che i css in un file di stile esterno non funzionano (bell’accrocco) occorre quindi inserire stile e javascript tutto quanto insieme dentro la pagina.

Una precisazione
Il banner di adsense ogni tanto non si ridimensiona quando si modifica la dimensione della finestra del browser. Inoltre su firefox non funziona molto bene, per fare un test usa chrome, restringi la pagina e premi f5 per il refresh e vedrai che il banner diventa più piccolo come nella foto qui sotto:

banner-responsive

Approfondimenti
https://support.google.com/adsense/answer/3213689
http://exisweb.net/using-google-adsense-async-tags-for-responsive-design

L'articolo ti è stato utile?

Condividilo sulla tua rete di contatti Twitter, sulla tua bacheca su Facebook o semplicemente premi "+1" per suggerire questo risultato nelle ricerche in Google. Diffondere contenuti che trovi rilevanti aiuta questo blog a crescere. Grazie!

One thought on “Google adsense diventa responsive

  1. Pingback: Google adsense diventa responsive | news intern...

Comments are closed.