Adsense无广告展示，展示广告空缺图

AdSense 广告单元会在发出广告请求后进行更新，以指明广告单元是已填充广告素材，还是处于广告空缺状态。您可以通过查看 AdSense 报告中的平均覆盖率，了解广告空缺的广告单元所占的百分比。

当广告单元完成对广告的请求后，AdSense 会向 <ins> 元素添加一个名为 data-ad-status 的参数。注意：请勿将 data-ad-status 与 data-adsbygoogle-status 相混淆，后者由我们的广告代码用于广告处理目的。

根据系统是否返回广告，此参数将更新为以下项之一：

AdSense 如何处理广告空缺的广告单元

当 AdSense 广告单元处于“广告空缺”状态时，我们会尝试隐藏该广告单元，或展示空白区域。我们仅会在广告单元不会导致网页自动重排的情况下隐藏它们，也就是说，我们仅会隐藏位于视口之外的广告单元。对于所有其他广告空缺的广告单元，我们会保留广告单元大小，并展示空白区域。

如何隐藏广告空缺的广告单元

（高级）您可以决定使用 CSS 还是 JavaScript 来改进此行为。例如，如果您想要隐藏所有广告空缺的广告单元，可以使用 CSS 向元素应用 display: none !important; 样式。

示例 1：使用 CSS 隐藏广告空缺的广告单元

您可以将以下 CSS 样式添加到网页中，以自动隐藏广告空缺的广告单元：

HTML
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-1234567890"
     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;
}

示例 2：仅在广告单元出现广告空缺时展示图片

如果广告单元未展示广告，您可以改为选择展示自家广告：

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-1234567890"
     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;
}

或者，如果您更愿意使用 JavaScript 来更新网页，那么可以使用 MutationObserver 检测 data-ad-status 参数发生的更改，并根据这些更改执行 JavaScript 代码。

限制

data-ad-status 参数仅会添加到顶级窗口上的广告单元中。这意味着，对于通过跨网域窗口投放的广告单元，data-ad-status 参数不会添加到其中。

此外，我们不建议您通过以下方式加载 AdSense 广告单元：最初处于隐藏状态，旨在在 data-ad-status 参数发生更改后显示出来。如果广告单元最初并未在网页上显示，那么我们可能不会针对其执行广告请求。