zoukankan      html  css  js  c++  java
  • 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时,也不小心触发了这个错误。

    WX20200327-090646

    官方方案

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

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

    参考资料

  • 相关阅读:
    ECharts之柱状图 饼状图 折线图
    Vue自定义指令(directive)
    HDU 1231 最大连续子序列
    POJ 2533 Longest Ordered Subsequence
    HDU 1163 Eddy's digital Roots
    HDU 2317 Nasty Hacks
    HDU 2571 命运
    HDU 4224 Enumeration?
    HDU 1257 最少拦截系统
    HDU 2740 Root of the Problem
  • 原文地址:https://www.cnblogs.com/cocowool/p/google_adsense_no_slog_size_error.html
Copyright © 2011-2022 走看看