adsense广告不出现的处理方式

adsense广告在广告展示失败的时候,需要采取一些措施来保证页面不会出现空白区域等现象,最早是使用了替补游戏来弥补广告不能正常展示。本次处理需要去除这些替补游戏的展示,广告不成功展示或者不展示,直接隐藏处理,来达到不影响其他进行的业务。

背景

当广告单元完成对广告的请求后,AdSense 会向 <ins> 元素添加一个名为 data-ad-status 的参数。 根据系统是否返回广告,此参数将更新为以下项之一:

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

处理方式

  • 1、直接使用CSS 隐藏广告空缺的广告单元ins元素
css 复制代码
ins.adsbygoogle[data-ad-status="unfilled"] {  
    display: none !important;  
}
  • 2、仅在广告单元出现广告空缺时展示替补广告
javascript 复制代码
<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 元素是没有子元素的)
css 复制代码
#xxxx-ad:empty {
    display: none !important;
}
  • 5、当在第四种场景下,同时里面展示了广告,但是广告展示不成功的话,需要使用:has来处里这种场景
xml 复制代码
<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>

参考

相关推荐
1phoenix9 分钟前
JavaScript 实现自定义右键菜单
前端·javascript·css
福娃B34 分钟前
【CSS】面试必会—浮动布局:让元素“漂浮”的艺术
前端·css·面试
PineappleCoder38 分钟前
CSS那些你不得不懂的“潜规则”(二)
前端·css·面试
小楓12013 小时前
0基礎網站開發技術教學(一) --(前端篇)--
前端·javascript·css·html·web開發
有事没事实验室12 小时前
node.js中的path模块
前端·css·node.js·html·html5
未来之窗软件服务15 小时前
免费版酒店押金原路退回系统之【房费押金计算器】实践——仙盟创梦IDE
前端·javascript·css·仙盟创梦ide·东方仙盟·酒店押金系统
ZzMemory20 小时前
深入了解 module.css:前端样式管理的有效方案
前端·css·面试
Dream耀1 天前
CSS过渡 vs 动画:都有哪些技巧
前端·css
拾光拾趣录2 天前
Flexbox 布局:从“垂直居中都搞不定”到写出响应式万能布局
前端·css
编程猪猪侠2 天前
Tailwind CSS 自定义工具类与主题配置指南
前端·css