Adsense 广告显示空白太难看，添加一行 CSS 代码即可自动隐藏

许多博客和网站都要靠广告才能生存（比如本站），Google Adsense 是最受欢迎的广告平台，其广告投放量大、单价也相比其他大多数平台高。不过广告位不可能永远都得到填充（可以看填充率），未填充的广告位显示一大块空白，破坏了页面的整体性，属实难看。

有没有什么工具（例如：WordPress 插件）能够检测广告位是否填充，自动判断是否显示广告位呢？网页的显示效果主要由 CSS 和 JS 控制，有没有现成的代码能够实现这个目标呢？

其实 Google 早就已经帮我们考虑到了这个问题，并已经提供解决方案。下面先说方法再看原理。

解决方案

如同上面我们猜测的一样，Google 的方法也是通过 CSS 或 JS 来控制。不过 JS 的方法更复杂，不如用 CSS 来得稳妥，Google 也推荐使用 CSS。

1. 隐藏空白单元

如果我们网站本身有足够丰富的内容，那么用这个方案就可以只显示那些有填充的广告单元，没填充的广告单元直接隐藏。

方法很简单，原本的广告代码不用做任何改动：

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

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>

然后再添加 CSS 代码：

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

从上面代码可以看到，一方面需要修改原广告代码，另一方面还涉及到广告和图片尺寸的问题，在响应式设计中不是很方便，因此建议直接隐藏而不是显示自定义图片。

作用原理

当广告单元完成对广告的请求后，AdSense 会向 <ins> 元素添加一个名为 data-ad-status 的参数。

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

`data-ad-status="filled"`	系统向广告单元返回了一个广告，该广告正在展示。
`data-ad-status="unfilled"`	系统未返回任何广告，广告单元为空。

从上面的 CSS 代码可以看出来，原理就是当 data-ad-status 属性为 “unfilled” 时，将 ins.adsbygoogle 元素隐藏，于是广告单元就消失了。

这个方法并非完全完美的，因为 data-ad-status 需要等广告请求完成后才能确定，国内网络加载 Adsense 广告比较慢，所以访客可能会先看到一个空白区域，之后这个区域又消失掉。

对此可能有人想用其他方法来规避，例如先不显示空白单元，等请求完成后再判断，如果有填充则显示广告，无填充则与原网页没有任何变化。对此 Google 的结论是——不建议，具体可参考：使用 data-ad-status 参数隐藏广告空缺的广告单元。

打赏赞