Responsiivisen mainoskoodin muokkaaminen

Jos responsiivisten mainosten koodimme ei vastaa tarpeitasi, voit muokata mainoskoodiasi siten, että se vastaa paremmin responsiivisen sivustosi vaatimuksia. Näistä artikkelin esimerkeistä näet, miten teet muokkaukset oikein.

Ennen kuin aloitat:

• Jos CSS‑mediakyselyt ja mainoskoodin muokkaaminen eivät ole sinulle ennestään tuttuja, aloita esimerkistä, jossa mainosyksikön koko perustuu näytön leveyteen.
• Jos CSS‑mediakyselyt ja mainoskoodin muokkaaminen ovat sinulle jo tuttuja, siirry suoraan esimerkkeihin, joissa käytetään responsiivisen mainoskoodin lisäominaisuuksia.

Huom. Tämän artikkelin esimerkit ovat AdSense-mainoskoodin hyväksyttäviä muokkauksia. Responsiivisen mainoskoodin muokkaaminen näillä hyväksytyillä tavoilla ei riko AdSensen ohjelmasääntöjä.

Esimerkki näytön leveyteen perustuvasta mainosyksikön tarkasta koosta

Tästä esimerkistä näet, miten voit responsiivista mainoskoodia muokkaamalla asettaa tarkat mainosyksikkökoot kolmelle näytön leveydelle (mobiililaite, tabletti ja tietokone). Tämän esimerkin vaiheiden suorittaminen ei edellytä aiempaa kokemusta CSS-mediakyselyistä tai AdSense-mainoskoodin muokkauksesta.

Alla on esimerkki muokatusta responsiivisesta mainoskoodista, jossa määritetään näytön leveyden perusteella seuraavat mainosyksikkökoot:

• näytön leveys enintään 500 kuvapistettä: 320 x 100 -kokoinen mainosyksikkö
• näytön leveys 500–799 kuvapistettä: 468 x 60 -kokoinen mainosyksikkö
• näytön leveys vähintään 800 pikseliä: 728 x 90 ‑kokoinen mainosyksikkö.

<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>

Näin muutat esimerkkikoodin omalle sivustollesi sopivaksi:

1. Siirry AdSense‑tilillesi ja luo Display‑mainosyksikkö. Muista jättää Mainoskoko‑kohdassa Responsiivinen valituksi. Ota responsiivisesta mainoskoodista talteen seuraavat tiedot:
   • Julkaisijan tunnus, esimerkiksi ca-pub-1234567890123456
   • Mainosyksikön tunnus (data-ad-slot), esimerkiksi 1234567890
2. Tee esimerkkikoodiin nämä muutokset:
   • Korvaa kaikki example_responsive_1-kohdat yksilöllisellä nimellä, esim. Home_Page tai front_page_123.
     Hyvä huomata

     • Yksilöllisessä nimessä saa olla vain englantilaisia aakkosia (A–Z), numeroita ja alaviivoja. Ensimmäisen merkin on oltava englantilainen kirjain.
     • Esimerkkikoodia muokattaessa on aina valittava uusi yksilöllinen nimi.
   • Korvaa ca-pub-1234567890123456 omalla julkaisijan tunnuksellasi.
   • Korvaa 8XXXXX1 oman mainosyksikkösi tunnuksella.
3. Valitse eri näytön leveyksiin perustuvat mainosyksikkökoot:
   • Jos olet tyytyväinen esimerkkikoodissa oleviin kokoihin, sinun ei tarvitse tehdä muutoksia.
   • Jos haluat valita eri kokoja, tee esimerkkikoodiin seuraavat muutokset:
     • Korvaa 320px ja 100px niillä mainosyksikön leveys- ja korkeusarvoilla, joita haluat käyttää enintään 500 pikselin levyisillä näytöillä.
     • Korvaa 468px ja 60px mainosyksikön leveydellä ja korkeudella, joita haluat käyttää 500–799 kuvapisteen levyisillä näytöillä.
     • Korvaa 728px ja 90px mainosyksikön leveydellä ja korkeudella, joita haluat käyttää vähintään 800 kuvapisteen levyisillä näytöillä.
4. Kopioi muokattu mainoskoodi ja liitä se sen sivun HTML‑lähdekoodiin, jolla haluat mainosten näkyvän.
   Vinkki: Kun olet sijoittanut mainoskoodin sivustollesi, testaa mainoksia erilaisilla laitteilla ja näytöillä varmistaaksesi, että responsiivinen toiminta on oikeanlaista.

Esimerkkejä responsiivisen mainoskoodin lisäominaisuuksista

Jos responsiivinen mainoskoodi ei vastaa tarpeitasi, voit muokata sitä määrittämällä mainosyksikölle tarkan koon CSS:n avulla.

Huom. Emme suosittele näiden lisäominaisuuksien käyttöä, ellei sinulla ole kokemusta mainoskoodin muokkaamisesta.

Laajennettavan leveyden ja kiinteän korkeuden asettaminen

Voit määrittää mainosyksiköllesi laajennettavan leveyden ja kiinteän korkeuden muokkaamalla reagoivaa mainoskoodiasi CSS:n avulla. Seuraavassa esimerkissä näytetään, miten nämä muokkaukset voi tehdä.

Esimerkki laajennettavasta leveydestä ja kiinteästä korkeudesta

Tästä esimerkistä näet, miten muokkaat responsiivista mainoskoodia niin, että mainoksen kiinteä korkeus on 90 pikseliä ja leveys 400–970 pikseliä:
<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>

Näytön leveyteen perustuvan koon asettaminen

Voit määrittää mainosyksiköllesi tarkan koon muokkaamalla reagoivaa mainoskoodiasi CSS:n avulla. Seuraavassa esimerkissä näytetään, miten nämä muokkaukset voi tehdä:

Esimerkki näytön leveyteen perustuvasta koosta

Jos tiedät, mitkä laitekohtaiset mainosyksikkökoot toimivat responsiivisella sivustollasi parhaiten, voit asettaa responsiivisen mainosyksikön koon CSS3-mediakyselyjen avulla. Tästä esimerkistä näet, miten muokkaat mainoskoodia niin, että siinä käytetään CSS3-mediakyselyjä:
<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-säännöissä käytetään CSS3-syntaksia, ja niitä tuetaan kaikissa nykystandardien mukaisissa selaimissa. Huomaa, että mainosyksikkökoon määrittämistä ulkoisilla CSS-tyylisivuilla ei tueta virallisesti.

Mainosyksikön piilottaminen

Tietyissä tapauksissa, erityisesti pienten mobiililaitteiden kohdalla, et ehkä halua mainoksen näkyvän lainkaan. Jos haluat piilottaa mainosyksikön, voit määrittää CSS-mediakyselyjen parametrin siten, ettei mainospyyntöä tehdä eikä mainosta näytetä. Seuraavassa esimerkissä näytetään, miten kyseisiä muokkauksia voi tehdä:

Esimerkki mainosten piilottamisesta tietynkokoisilla näytöillä

Jos haluat mainosten näkyvän vain tietynkokoisilla näytöillä, tämä onnistuu CSS-mediakyselyillä. Tästä esimerkistä näet, miten muokkaat mainoskoodia niin, että mainokset piilotetaan tietynkokoisilla näytöillä CSS3‑mediakyselyjen avulla:
<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>

Tässä esimerkissä mainokset eivät näy, jos näytön leveys on alle 400 pikseliä.

Huom. Noudatathan aina mainosten sijoittelukäytäntöjä. Muista myös, että ohjelmakäytäntömme sallivat vain rajoitetut koodin muokkaukset.