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

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

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

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

Google Adsense

解决方案

如同上面我们猜测的一样,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 参数隐藏广告空缺的广告单元

留下评论

您的电子邮箱地址不会被公开。 必填项已用*标注