Se il nostro codice dell'annuncio adattabile non soddisfa tutte le tue esigenze, puoi modificarlo perché risponda al meglio ai requisiti del tuo sito adattabile. Gli esempi riportati in questo articolo mostrano come apportare correttamente queste modifiche.
Prima di iniziare:
- Se è la prima volta che utilizzi le query supporti CSS e che modifichi il codice dell'annuncio, ti consigliamo di iniziare dalla sezione relativa all'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, puoi andare direttamente alla sezione relativa agli esempi di funzionalità avanzate del codice dell'annuncio adattabile.
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:
- Crea un'unità pubblicitaria display nel tuo account AdSense, assicurandoti di lasciare selezionato Adattabile nella sezione "Dimensioni dell'annuncio". Prendi nota delle seguenti informazioni contenute nel 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.
- Nel codice di esempio:
- Sostituisci tutte le occorrenze di
example_responsive_1con 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-1234567890123456con il tuo ID publisher. - Sostituisci
8XXXXX1con l'ID della tua unità pubblicitaria.
- Sostituisci tutte le occorrenze di
- 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 pxe100 pxcon la larghezza e l'altezza dell'unità pubblicitaria da utilizzare per gli schermi con larghezza fino a 500 px. - Sostituisci
468 pxe60 pxcon la larghezza e l'altezza dell'unità pubblicitaria da utilizzare per gli schermi con larghezza compresa tra 500 px e 799 px. - Sostituisci
728 pxe90 pxcon la larghezza e l'altezza dell'unità pubblicitaria da utilizzare per gli schermi con larghezza a partire da 800 px.
- Sostituisci
- Copia e incolla il codice dell'annuncio modificato nel codice sorgente HTML della pagina dove vuoi pubblicare l'annuncio.
Suggerimento: 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 funzionalità 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.
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:
<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:
<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>
@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:
<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, non vengono visualizzati annunci se la larghezza dello schermo è inferiore a 400 px.
