AdSense 廣告單元會在發出廣告請求後更新,以指明廣告單元是已填入廣告素材,還是空缺廣告。您可以查看 AdSense 報表中的平均涵蓋率,以掌握廣告單元空缺廣告的百分比。
廣告單元完成廣告請求後,AdSense 會在 <ins>
元素中加入名為 data-ad-status
的參數。注意:請不要混淆 data-ad-status
與 data-adsbygoogle-status
這兩個參數,我們的廣告程式碼會將後者用於廣告處理。
這個參數將依據廣告是否傳回,更新為下列其中一個參數:
data-ad-status="filled" |
廣告已傳回廣告單元,且正在放送。 |
data-ad-status="unfilled" |
未傳回任何廣告,且廣告單元空白。 |
AdSense 如何處理空缺廣告的廣告單元
在 AdSense 廣告單元處於「unfilled
」狀態時,系統會嘗試收合廣告單元或顯示空白區域。只有在不會造成網頁自動重排的情況下,系統才會收合廣告單元;也就是說,只會收合可視區域外的廣告單元。針對所有其他空缺廣告的廣告單元,系統會保留廣告單元大小,並改為顯示空白區域。
如何隱藏空缺廣告的廣告單元
(進階) 您可以選擇使用 CSS 或 JavaScript 改善這項行為。舉例來說,如要隱藏所有空缺廣告的廣告單元,您可以使用 CSS 將 display: none !important;
樣式套用至元素。
範例 1:使用 CSS 隱藏空缺廣告的廣告單元
您可以在網頁中加入下列 CSS 樣式,自動隱藏空缺廣告的廣告單元:
<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>
ins.adsbygoogle[data-ad-status="unfilled"] {
display: none !important;
}
範例 2:只在廣告單元空缺廣告時顯示圖片
如果廣告單元無法顯示廣告,您也可以選擇顯示內部廣告:
<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>
ins.adsbygoogle a {
display: none !important;
}
ins.adsbygoogle[data-ad-status="unfilled"] a {
display: block;
}
或者,如果您想要使用 JavaScript 更新網頁,則可以使用 MutationObserver 偵測 data-ad-status
參數中的變更,然後根據這些變更執行 JavaScript 程式碼。
限制
系統只會在頂層視窗的廣告單元中加入 data-ad-status
參數。也就是說,對於透過跨網域視窗放送的廣告單元,系統不會在其中加入 data-ad-status
參數。
此外,我們也不建議您一開始以隱藏狀態載入 AdSense 廣告單元,目的是希望在 data-ad-status
參數變更後可以顯示這些廣告單元。如果廣告單元一開始並沒有顯示在網頁上,我們可能不會對該廣告單元執行廣告請求。