谷歌广告联盟AdSense因广告空缺造成空白展示的自动隐藏

在博客上投放谷歌 AdSense 广告的站长们应该都碰到过有时候 AdSense 广告无法显示的话，这个广告位就会在网页里出现一个空白占位，给人很不美观的感觉，出现这个空白主要是因为 AdSense 广告单元处于“广告空缺”状态了，所以默认会保留广告单元大小并展示空白区域。很明显，这是不科学的，好在谷歌 AdSense 代码拥有强大的自定义功能可以很好的由我们来控制这个空白区域是否展示。今天阿影就给大家分享一下具体的方法。

出现这样的空白确实很尴尬了！

注：国内因为目前 AdSense 已经没有国内服务器了，所以是因为网络故障造成的并不是广告空缺，可以考虑将*.gstatic.com、*.google.com等域名后缀加入 VPN 代理来解决。

隐藏广告空缺的广告单元

我们可以使用 CSS 或者 JavaScript 来控制广告空缺的广告单元的隐藏。例如，如果您想要隐藏所有广告空缺的广告单元，可以使用 CSS 向元素应用display: none !important; 样式。

例如：

我们的谷歌广告代码如下：

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

我们可以给这段广告代码的` class` **adsbygoogle** 添加一个如下的样式：

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

其中的 display: none !important; 意思就是让 CSS 类 adsbygoogle 判断data-ad-status值，如果出现广告空缺的话就隐藏广告单元的空白区域展示。这样就不会出现下图这样的空白区域了！

一般情况下我们在博客站点上投放的 AdSense 广告默认都是用的adsbygoogle这个 CSS 类的，所以我们只需要把上述的<style>样式声明放到主题自定义代码里即可，一般放到顶部为最佳（大部分 WordPress 、Typecho 的主题都会支持这类自定义 CSS 代码放置的）。这个是最省事的方法了，也是阿影比较推荐的方法。

当然，还有更高级的玩儿法，如果想了解的话可以接着看下面的：

在广告单元出现广告空缺时展示指定的图片

有时候 AdSense 广告无法显示了，我们又不想仅仅隐藏了事，毕竟每个流量都值得我们珍惜呀，这时候还可以来展示一些自己指定图片的，唯一麻烦的是需要还需要修改 AdSense 广告代码，如下所示：

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

可以看到相对于默认 AdSense 广告代码，上述代码里多了一段<a href="/page"><img src="/backup.jpg" width="300px" height="250px"></a>的代码就是用来指定**广告空缺**后自动展示的图片的，大家根据自己的需要指定图片地址等参数即可。

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

最后，不要忘了添加自定义 CSS 的<style>来生效哦！