Täyttämättä jääneiden mainosyksiköiden piilottaminen data-ad-status-parametrin avulla

AdSense-mainosyksiköt päivittyvät mainospyynnön lähettämisen jälkeen sen osoittamiseksi, täytettiinkö mainosyksikkö mainoksella vai ei. Voit tarkistaa täyttämättä jääneiden mainosyksiköiden prosenttiosuuden katsomalla AdSense-raporteistasi, mikä on keskimääräinen kattavuutesi.

Kun mainosyksikkö on lähettänyt mainospyynnön, AdSense lisää <ins>-elementtiin data-ad-status-parametrin. Huom. data-ad-status on eri asia kuin data-adsbygoogle-status, jota mainoskoodi käyttää mainosten käsittelyyn.

Riippuen siitä, johtiko mainospyyntö mainoksen palauttamiseen vai ei, parametrin arvoksi päivittyy jompikumpi seuraavista:

data-ad-status="filled"	Mainos palautettiin, ja mainosyksikössä näkyy mainos.
data-ad-status="unfilled"	Mainosta ei palautettu, ja mainosyksikkö on tyhjä.

Mitä AdSense tekee täyttämättä jääneille mainosyksiköille?

Kun AdSense-mainosyksikkö jää täyttämättä, järjestelmä pyrkii tiivistämään sen tai jättää sen kohdalle tyhjän tilan. Mainosyksiköitä tiivistetään vain, jos siitä ei aiheudu sivun uudelleenlaskemista, eli ainoastaan näkymän ulkopuolelle jäävät mainosyksiköt tiivistetään. Kaikkien muiden täyttämättä jääneiden mainosyksiköiden koko säilyy samana, ja niiden sijasta näkyy tyhjä tila.

Näin piilotat täyttämättä jääneet mainosyksiköt

 (kokeneet käyttäjät) Voit halutessasi parantaa tätä toimintatapaa joko CSS:n tai JavaScriptin avulla. Jos esimerkiksi haluat piilottaa kaikki täyttämättä jääneet mainosyksiköt, voit määrittää CSS:n avulla elementtiin display: none !important; ‑tyylin.

Esimerkki 1: Täyttämättä jääneiden mainosyksiköiden piilottaminen CSS:n avulla

Voit lisätä sivullesi seuraavan CSS-tyylin, jos haluat piilottaa täyttämättä jääneet mainosyksiköt automaattisesti:

HTML
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-1234567890123456"
     data-ad-slot="1234567890"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

CSS
ins.adsbygoogle[data-ad-status="unfilled"] {
    display: none !important;
}

Esimerkki 2: Mainosyksikön korvaaminen kuvalla vain, jos yksikkö on jäänyt täyttämättä

Jos mainosyksikössä ei näy mainosta, voit korvata yksikön esimerkiksi oman yrityksesi mainoksella:

HTML
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:inline-block;width:300px;height:250px"
     data-ad-client="ca-pub-1234567890123456"
     data-ad-slot="1234567890">
    <a href="/page"><img src="/backup.jpg" width="300px" height="250px"></a>
</ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

CSS
ins.adsbygoogle a {
    display: none !important;
}
ins.adsbygoogle[data-ad-status="unfilled"] a {
    display: block;
}

Toinen vaihtoehto on päivittää sivu JavaScriptin avulla. Voit käyttää MutationObserveria data-ad-status-parametrin muutosten havaitsemiseen ja suorittaa muutosten perusteella JavaScript-koodin.

Rajoitukset

data-ad-status-parametri lisätään vain päällimmäisessä ikkunassa oleviin mainosyksiköihin. Tämä tarkoittaa, että data-ad-status-parametria ei lisätä yksiköihin, joiden mainospyynnöt tulevat toisen verkkotunnuksen ikkunasta.

Muista myös, että AdSense-mainosyksiköitä ei kannata ladata aluksi piilotettuina, jotta ne alkaisivat näkyä vasta, kun data-ad-status-parametri muuttuu. Jos mainosyksikkö ei näy aluksi sivulla, kyseisen yksikön mainospyyntöä ei välttämättä suoriteta.