Google广告显示不正确的问题

互联网从业人员相比对于Google Adsense应该非常熟悉,它就像我们生活中常见的楼宇电梯电视广告一样,是互联网上的一种广告类型。每个网站通过安装一块电视,定期的向用户播放广告。只不过Google的这块电视,能够根据网站的内容、用户的访问行为等一系列大数据为每个用户投放最感兴趣的内容。

响应式广告单元

Google Adsense 提供了很多广告类型、种类、主题,这样我们就能够根据自己网站的内容来选择最合适的广告进行投放。在做决定时,最重要的就是广告的尺寸,因为合适的广告尺寸对用户来说更有吸引力,也能通过展示获得更多的点击。

对于布局尺寸固定的网站,确定一个最好的尺寸比较容易。对于一些响应式网站,如何确定最佳的广告尺寸非常困难。因此Google提供了响应式的广告单元。

工作原理

页面加载后,响应式广告单元 Responsive Ad Units 读取父容器的尺寸(高*宽),基于此来决定广告的最佳尺寸。这就让我们在为网站选择广告时变得非常简单,广告的尺寸不需要再固定,它会基于父容器的尺寸而完美的适配展示广告内容。

问题现象

如果有需求要求在PC版上显示广告,而在移动版上隐藏广告内容,这就会与Google Adsense的要求冲突,因为在服务条例中不允许对广告单元使用display:none或者使用其他的HTML元素。

这时会报出以下错误。

Uncaught TagError: adsbygoogle.push() error: No slot size for availableWidth=0

这个错误在容器没有可计算出的width属性时发生,例如将元素隐藏、元素使用了绝对或者浮动布局。

最近我更换了博客模板,在向自己的博客添加Google Adsense时,也不小心触发了这个错误。

官方方案

为满足上面的需求,Google Adsense允许通过CSS3的media queries来对广告单元做特定的修改,具体要求如下:

  1. 不能使用响应式广告控制的特性,例如需要移除广告代码中的data-ad-format
  2. ins标签增加一个class名称,例如right_side_ad
  3. 在CSS Media query中指定什么情况展示广告,什么情况不展示。如果广告父容器是absolute布局,则需要指定高度和宽度。

参考资料

cocowool

A FULL STACK DREAMER!