Come modificare il codice dell'annuncio adattabile

Se il nostro codice dell'annuncio adattabile non è in grado di soddisfare tutte le tue esigenze, puoi modificarlo per soddisfare al meglio i requisiti del tuo sito adattabile. I seguenti esempi mostrano come eseguire correttamente queste modifiche.

Importante

• Se è la prima volta che utilizzi le query supporti CSS e che modifichi il codice dell'annuncio, ti consigliamo di iniziare dalla sezione Esempio di dimensioni esatte dell'unità pubblicitaria in base alla larghezza dello schermo.
• Se hai già esperienza con le query supporti CSS e con la modifica del codice dell'annuncio, vai direttamente alla sezione Esempi di funzioni avanzate del codice dell'annuncio adattabile.

Nota: gli esempi descritti in questo articolo sono modifiche accettabili del codice dell'annuncio AdSense. Non violerai le Norme del programma AdSense modificando il codice dell'annuncio adattabile in questi modi approvati.

Esempio di dimensioni esatte dell'unità pubblicitaria in base alla larghezza dello schermo

Questo esempio mostra come modificare il codice dell'annuncio adattabile allo scopo di impostare dimensioni specifiche dell'unità pubblicitaria per tre intervalli di larghezza dello schermo, ovvero cellulare, tablet e computer desktop. Per seguire questo esempio, non è necessario avere già avuto esperienze con le query supporti CSS o con la modifica del codice dell'annuncio AdSense.

Di seguito riportiamo un esempio di codice dell'annuncio adattabile modificato che imposta le dimensioni esatte dell'unità pubblicitaria in base alla larghezza dello schermo:

• Larghezza dello schermo fino a 500 px: unità pubblicitaria da 320 x 100.
• Larghezza dello schermo da 500 px a 799 px: unità pubblicitaria da 468 x 60.
• Larghezza dello schermo superiore a 800 px: unità pubblicitaria da 728 x 90.

<style>
.example_responsive_1 { width: 320px; height: 100px; }
@media(min-width: 500px) { .example_responsive_1 { width: 468px; height: 60px; } }
@media(min-width: 800px) { .example_responsive_1 { width: 728px; height: 90px; } }
</style>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
<!-- example_responsive_1 -->
<ins class="adsbygoogle example_responsive_1"
     style="display:block"
     data-ad-client="ca-pub-1234567890123456"
     data-ad-slot="8XXXXX1"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Per adattare questo codice di esempio al tuo sito:

1. Crea un'unità pubblicitaria display nel tuo account AdSense, assicurandoti di lasciare selezionato Adattabile nella sezione "Dimensioni dell'annuncio". Annota le seguenti informazioni che si trovano nel tuo codice dell'annuncio adattabile:
   • Il tuo ID publisher, ad esempio ca-pub-1234567890123456
   • L'ID della tua unità pubblicitaria (data-ad-slot), ad esempio 1234567890.
2. Nel codice di esempio:
   • Sostituisci tutte le occorrenze di example_responsive_1 con un nome univoco, ad esempio Home_Page, front_page_123 e così via.
     Note:

     • Il nome univoco deve contenere solo lettere dell'alfabeto latino (A-Z), numeri e trattini bassi e il primo carattere deve essere una lettera dell'alfabeto latino.
     • È necessario utilizzare un nome univoco diverso ogni volta che adatti questo codice di esempio.
   • Sostituisci ca-pub-1234567890123456 con il tuo ID publisher.
   • Sostituisci 8XXXXX1 con l'ID della tua unità pubblicitaria.
3. Scegli le dimensioni dell'unità pubblicitaria in base alla larghezza dello schermo:
   • Se le dimensioni correnti dell'unità pubblicitaria nel codice di esempio sono già adatte alle tue esigenze, non devi apportare ulteriori modifiche.
   • Se vuoi impostare dimensioni diverse per l'unità pubblicitaria in base alla larghezza dello schermo, apporta le seguenti modifiche nel codice di esempio:
     • Sostituisci 320 px e 100 px con la larghezza e l'altezza dell'unità pubblicitaria da utilizzare per gli schermi con larghezza fino a 500 px.
     • Sostituisci 468 px e 60 px con la larghezza e l'altezza dell'unità pubblicitaria da utilizzare per gli schermi con larghezza compresa tra 500 px e 799 px.
     • Sostituisci 728 px e 90 px con la larghezza e l'altezza dell'unità pubblicitaria da utilizzare per gli schermi con larghezza a partire da 800 px.
4. Copia e incolla il codice dell'annuncio modificato nel codice sorgente HTML della pagina dove vuoi pubblicare l'annuncio.
   Nota: dopo avere inserito il codice dell'annuncio, ti consigliamo di provare gli annunci su dispositivi e schermi diversi per verificare il corretto funzionamento del comportamento adattabile.

Esempi di funzioni avanzate del codice dell'annuncio adattabile

Se scopri che il codice dell'annuncio adattabile non soddisfa le tue esigenze, puoi modificarlo per specificare una dimensione esatta dell'unità pubblicitaria tramite CSS.

Nota: sconsigliamo di utilizzare queste funzioni avanzate se non hai dimestichezza con la modifica del codice dell'annuncio.

Definire una larghezza espandibile e un'altezza fissa

Puoi modificare il codice dell'annuncio adattabile per specificare una larghezza espandibile e un'altezza fissa dell'unità pubblicitaria tramite CSS. Il seguente esempio mostra in che modo puoi apportare queste modifiche:

Esempio di larghezza espandibile con altezza fissa

Questo esempio mostra come modificare il codice dell'annuncio adattabile per specificare un'altezza fissa di 90 px e una larghezza variabile di minimo 400 px e massimo 970 px:
<ins class="adsbygoogle"
   style="display:block;min-width:400px;max-width:970px;width:100%;height:90px"
   data-ad-client="ca-pub-1234567890123456"
   data-ad-slot="5678"></ins>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

Definire dimensioni esatte in base alla larghezza dello schermo

Puoi modificare il codice dell'annuncio adattabile per specificare le dimensioni esatte dell'unità pubblicitaria tramite CSS. Il seguente esempio mostra in che modo puoi apportare queste modifiche:

Esempio di dimensioni esatte in base alla larghezza dello schermo

Se per ogni dispositivo conosci le dimensioni esatte dell'unità pubblicitaria che meglio si adattano al sito adattabile, puoi utilizzare le query supporti CSS3 per impostare le dimensioni dell'unità pubblicitaria adattabile. Il seguente esempio mostra come modificare il codice dell'annuncio per utilizzare le query supporti CSS:
<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>
<ins class="adsbygoogle adslot_1"
    style="display:block;"
    data-ad-client="ca-pub-1234567890123456"
    data-ad-slot="5678"></ins>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

Le regole @media sono una sintassi CSS3 e sono supportate in tutti i browser moderni. Tieni presente che l'impostazione delle dimensioni dell'unità pubblicitaria tramite CSS in fogli di stile esterni non è ufficialmente supportata.

Nascondere un'unità pubblicitaria

In alcuni casi, in particolare sui dispositivi mobili più piccoli, potresti non voler mostrare affatto un annuncio. Se vuoi nascondere un'unità pubblicitaria, puoi impostare un parametro con query supporti CSS, in modo che non venga effettuata alcuna richiesta di annuncio e non venga pubblicato nessun annuncio. Il seguente esempio mostra in che modo puoi apportare queste modifiche:

Nascondere gli annunci per schermi di dimensioni specifiche

Se vuoi pubblicare gli annunci solo per schermi di dimensioni specifiche, puoi utilizzare i fogli di stile (CSS). L'esempio seguente mostra come modificare il codice dell'annuncio in modo da utilizzare le query supporti CSS3 per nascondere gli annunci su schermi di determinate dimensioni:
<style type="text/css">
.adslot_1 { display:block; width: 320px; height: 50px; }
@media (max-width: 400px) { .adslot_1 { display: none; } }
@media (min-width:500px) { .adslot_1 { width: 468px; height: 60px; } }
@media (min-width:800px) { .adslot_1 { width: 728px; height: 90px; } }
</style>
<ins class="adsbygoogle adslot_1"
   data-ad-client="ca-pub-1234567890123456"
   data-ad-slot="5678"></ins>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

In questo esempio, nessun annuncio verrà pubblicato se la larghezza dello schermo è inferiore a 400 px.

Anche con questa flessibilità, ricordati di seguire sempre le nostre norme per il posizionamento degli annunci. Ricorda inoltre che le norme del programma consentono solo modifiche limitate al codice.