Come configurare i banner reattivi Adsense

Fino a qualche giorno fa, quando si creava un nuovo banner reattivo su Adsense, c’era la possibilità di copiare un codice avanzato, che permetteva di configurare 3 diversi formati, in base alle dimensioni dello schermo del dispositivo che si usava.

Adsense

Questo codice STYLE, veniva fornito insieme al codice del banner adsense, in questo modo bastava cambiare le 3 dimensioni per avere 3 tipi di banner diversi utilizzando un solo codice. Da qualche giorno, quando si crea un nuovo banner, adsense non fornisce più questa opzione e non si sa il motivo, però è presente un link alla guida, dove spiega che è ancora possibile utilizzare questa funzione, infatti essa dice:

Se per ogni dispositivo conosci le dimensioni esatte dell’unità pubblicitaria che meglio si adattano al sito reattivo, puoi utilizzare le query supporti CSS3 per impostare la dimensione dell’unità pubblicitaria reattiva. Il seguente esempio mostra come modificare il codice dell’annuncio per utilizzare le query supporti CSS3.

Adesso vediamo come creare un nuovo banner reattivo con impostazioni avanzate. Per prima cosa create il vostro banner reattivo, cercando di utilizzare un nome non troppo complicato e lungo, poi capirete il motivo. A questo punto incollate davanti al codice del banner:

<style type=”text/css”>
.adslot_1 { width: 320px; height: 100px; }
@media (min-width:500px) { .adslot_1 { width: 468px; height: 60px; } }
@media (min-width:800px) { .adslot_1 { width: 728px; height: 90px; } }
</style>

Dove al posto di .adslot1 dovete scrivere il nome del vostro banner, in minuscolo e senza spazi, ecco alcuni esempi:

“banner 1 – reattivo – sopra” -> .banner1-reattivo-sopra
“sito.it – reattivo – metà” -> .sitoit-reattivo-met

Attenzione a :

  • si inizia con il punto .
  • se nel nome scrivete il sito ad esempio miosito.it il “punto” . non lo dovete mettere !
  • non mettere spazi
  • rimuovere le lettere accentate e sostituirle con la stessa lettera ma senza accento

A questo punto dovete modificare ancora 3 parametri, ma nel codice del banner reattivo che vi ha fornito adsense:

  • per prima cose dovete cancellare la riga: data-ad-format=”auto”
  • per ultimo al posto di style=”display:block” dovete mettere style=”display:inline-block”
  • modificare class=”adsbygoogle” con “adsbygoogle sitoit-reattivo-met” ( ATTENZIONE, QUI SENZA IL PUNTO . )

Ecco un codice esempio pronto da utilizzare, basta inserire correttamente il vostro id publisher, il codice del banner e il nome del banner.

<style>
.nomesito-reattiva-inizio-articoli { width: 320px; height: 100px; }
@media(min-width: 500px) { .nomesito-reattiva-inizio-articoli { width: 300px; height: 250px; } }
@media(min-width: 800px) { .nomesito-reattiva-inizio-articoli { width: 728px; height: 90px; } }
</style>
<script async src=”//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js”></script>
<!– nomesito – reattiva – inizio articoli –>
<ins class=”adsbygoogle nomesito-reattiva-inizio-articoli
style=”display:inline-block”
data-ad-client=”ca-pub-xxxxxxxxxxxxxxx
data-ad-slot=”xxxxxxxxxx“></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

A questo punto potete decidere voi le dimensioni del banner da far apparire su ogni piattaforma, attenzione però ad non inserire un 728×90 su smartphone 😉