stampa questo articolo
Come già annunciato nel precedente post ho migrato il blog ad un template completamente Responsive.

Questo significa che non sarà necessario fare più versioni del blog stesso a seconda del dispositivo di visualizzazione (desktop, tablet, mobile … ) magari usando plugin specifici, perché il css è strutturato in maniera tale da adattarsi alle dimensioni dello schermo stesso.

Ora la domanda è la seguente :

I nostri codici di Google Adsense (banner) sono anch’essi Responsive?

La risposta è : NO

Questo significa che mentre il nostro website si adatta alla perfezione allo schermo del nostro dispositivo mobile, non accade lo stesso per il banner di Google che rimane della stessa dimensione rendendo completamente illeggibile il nostro blog su dispositivi mobili.

Ho sperimentato la cosa sulla mia pelle appena installato questo nuovo tema (Twenty Twelve) e provato la visualizzazione su un iPhone.


Come ne sono uscito?

Ho chiesto aiuto al caro amico Sirsly che conosco dai tempi di dBlog e che so essere molto “forte” in tema di css, stili e Responsive Design.

Silvio mi ha prontamente consigliato un paio di link che rispondevano proprio al problema da me sollevato:

http://www.9to5blogger.com/responsive-adsense-ads/345/

La soluzione si basa sul controllo in javascript delle dimensioni del browser:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
<script type="text/javascript">
// <![CDATA[ google_ad_client = "ca-publisher-id";     
if (window.innerWidth >= 800) {
        google_ad_slot = "ad-unit-1";
        google_ad_width = 728;
        google_ad_height = 90;
    } else if (window.innerWidth < 400) {         
        google_ad_slot = "ad-unit-2";         
        google_ad_width = 300;         
        google_ad_height = 250;      
} else {         
        google_ad_slot = "ad-unit-3";         
        google_ad_width = 468;         
        google_ad_height = 60;     
} // ]]>
</script>
<script src="https://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript">// <![CDATA[ // ]]>
</script>

Ovvio che dovete sostituire i vostri valori nei campi : ca-publisher-id , ad-unit-1, ad-unit-2, ad-unit-3 dopo aver generato le tre differenti unità pubblicitarie su Google Adsense

In questo modo verrà visualizzato un banner di dimensioni adatte allo schermo del dispositivo, considerando le tre macro aree proposte : desktop, mobile e tablet.

A mio avviso non è una soluzione molto elegante per il semplice motivo che Google consiglia di utilizzare un codice diverso per i dispositivi mobili (Contenuti per cellulari), tuttavia per il momento non ho trovato di meglio.

Devo anche verificare se questa tecnica non viola le google tos

Spero di trovare al più presto una soluzione più elegante e state certi che la pubblicherò sul blog.

 

E tu? Hai riscontrato problemi simili per il tuo tema Responsive? Come hai risolto?

Potrebbe interessarti anche ...

5 Commenti

  1. Per quanto riguarda le policy, mi scrivono da Google che non vi è nessun problema, quindi… 🙂
    Inoltre è in cantiere l’unificazione dell’inventario delle unità pubblicitarie desktop e mobile e probabilmente una beta potrà uscire in questi primi mesi…in questo caso però parlo di DoubleClick for Publisher, non so se è valido anche per AdSense.

  2. Aggiornamento: nel frattempo Adsense ha aperto agli ads reattivi, per cui per chi fosse interessato li trova facilmente già pronti all’uso nell’interfaccia.

  3. Ciao, come hai fatto a rendere responsive i tuoi contenuti corrispondenti?
    Ho provato a modificare con la griglia 4X2 ma mi escono sempre in 3×2 e non coprono interamente.
    Grazie intanto.

LASCIA UN COMMENTO

Please enter your comment!
Please enter your name here