adsense广告在广告展示失败的时候,需要采取一些措施来保证页面不会出现空白区域等现象,最早是使用了替补游戏来弥补广告不能正常展示。本次处理需要去除这些替补游戏的展示,广告不成功展示或者不展示,直接隐藏处理,来达到不影响其他进行的业务。
背景
当广告单元完成对广告的请求后,AdSense 会向 <ins>
元素添加一个名为 data-ad-status
的参数。
根据系统是否返回广告,此参数将更新为以下项之一:
data-ad-status="filled" |
系统向广告单元返回了一个广告,该广告正在展示。 |
---|---|
data-ad-status="unfilled" |
系统未返回任何广告,广告单元为空。 |
处理方式
- 1、直接使用CSS 隐藏广告空缺的广告单元ins元素
ins.adsbygoogle[data-ad-status="unfilled"] {
display: none !important;
}
- 2、仅在广告单元出现广告空缺时展示替补广告
<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>
<style>
ins.adsbygoogle a {
display: none !important;
}
ins.adsbygoogle[data-ad-status="unfilled"] a {
display: block;
}
</style>
- 3、可以使用
MutationObserver
检测data-ad-status
参数发生的更改,来隐藏样式 - 4、当页面不满足添加adsense广告时,但是页面里已经提起占据了一个位置这时候需要隐藏这个占位,等满足其他条件需要添加广告时候才保留,可以使用
:empty
来处理这种场景(id:#xxxx-ad 元素是没有子元素的)
#xxxx-ad:empty {
display: none !important;
}
- 5、当在第四种场景下,同时里面展示了广告,但是广告展示不成功的话,需要使用
:has
来处里这种场景
<div class="card" id="xxxx-ad">
<ins class="adsbygoogle" data-ad-status="unfilled">
...
</ins>
</div>
<style>
#xxxx-ad:has(ins.adsbygoogle[data-ad-status="unfilled"]) {
display:none;
}
</style>
参考
- support.google.com/adsense/ans…
- developer.mozilla.org/zh-CN/docs/…
- developer.mozilla.org/zh-CN/docs/…
原文链接:https://juejin.cn/post/7349513798698467328 作者:5大大大大雄