设置Adsense响应式广告单元的最大高度

时间:2014-10-13 10:56:45

标签: css responsive-design adsense

我的网站右侧栏中有2个(300x250)Adsense广告单元

我已使网站响应,并将这些广告单元替换为Adsense响应式广告单元。

我现在遇到的问题是,Adsense现在提供2 x(300x600)广告单元。 Adsense TOS声明您每页只能投放1(300x600)个广告单元

最大宽度显然会被adsense响应广告单元吸收。

但是,当我尝试将父div的最大高度设置为250px时,为了限制每页300x600的广告数量,最大高度会被忽略,而adsense仍会显示300x600

是否有其他人遇到此问题,如果是,您是如何设置自适应广告单元的最大高度的?

提前致谢,

凯斯

9 个答案:

答案 0 :(得分:56)

您可以将data-ad-format="auto"更改为data-ad-format="rectangle"。 (请参阅高级功能> Horizontal shape example。)

我认为您应该在父height上定义max-heightdiv)。

广告高度(自动)由adsbygoogle.js确定(即 智能 调整),如果您想控制广告高度你需要使用data-ad-format("矩形","垂直","水平"或你的preferred combination喜欢"矩形,水平"。)

或(不推荐)你可以"降级"广告代码(删除data-ad-format属性),然后使用@ media指定 完全 尺寸查询。 (见Exact size example。)


编辑 - Google已更新"技术注意事项" " About responsive ad units"页。

  

在某些情况下,您需要采取额外措施   使响应式广告单元正常工作:

     

...

     

父容器具有固定或有限的高度。响应广告不应放置在具有固定或有限高度的容器内,   因为它们在某些设备或浏览器上可能更高。如果你需要   限制自适应广告的高度,您需要修改自己的广告   代码并使用CSS媒体查询来设置父级的高度   容器。了解如何modify your responsive ad unit

答案 1 :(得分:6)

我刚刚设法修复此问题 - 您可以为数据广告格式设置逗号分隔列表。

data-ad-format =“矩形,水平”

如果您已将媒体查询设置为特定尺寸,则会将移动广告设置为水平,将桌面设置为矩形。

谢谢, Wesiwyg

答案 2 :(得分:2)

您可以在<ins style="display:inline-block;......">中使用CSS或指定课程<ins class="adsbygoogle ......">

来完成此操作

示例来自Google AdSense 答案: Specify an expandable width and a fixed height

  

您可以修改自适应广告代码,以通过CSS为广告单元指定展开式宽度和固定高度。以下示例说明如何进行这些修改:

     

可扩展宽度,固定高度示例

     

此示例显示如何修改自适应广告代码   指定90px的固定高度和min-width的可变宽度   400px到最大宽度970px:

<ins class="adsbygoogle"
   style="display:inline-block;min-width:400px;max-width:970px;width:100%;height:90px"
   data-ad-client="ca-pub-1234"
   data-ad-slot="5678"></ins>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

来自Policies and restrictions

  

此外,将强制执行以下大小限制:

     
      
  • 只有一个维度可以大于300个像素
  •   
  • 最小宽度为120像素
  •   
  • 最小高度为50像素
  •   
  • 高度和宽度都不能超过1200像素。
  •   

答案 3 :(得分:0)

要完成此操作,请先将广告容器或广告代码设置为中心。使用此标记:<center>Adsense code here</center>。然后设置最大高度或宽度以及最小高度或宽度,就像我在下面的示例中所做的那样。

<center>
  <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js">
  </script>
  <!--responsive ad -->
  <ins class="adsbygoogle" style="display:block;max-width:specify your maximum width here; max-height: set o your maximum height here; and do the same for min-height:here;min-width:here;"
      data-ad-client="ca-pub-0019"
      data-ad-slot="530000000000"
      data-ad-format="auto"></ins>
  <script>
    (adsbygoogle = window.adsbygoogle || []).push({});
  </script>
</center>`

答案 4 :(得分:0)

我会这样:

            style="display:inline-block;min-width:200px;max-width:300px;width:100%;height:250px"
            data-ad-format="horizontal"></ins>

Google本身就是这样推荐的,它确实对我有用:

https://support.google.com/adsense/answer/9467650?hl=en-GB

答案 5 :(得分:0)

在2020年1月为我工作:

1-禁用了“移动设备的自动尺寸”

2-根据默认值定义“无响应”广告(固定)

3-为什么要使用CSS添加代码并更改其大小。 以我为例:

<ins class="adsbygoogle" style="display:inline-block;width:100%;height:100px" data-ad-client="****" data-ad-slot="****"></ins>

使用此代码,我的广告将始终占据100%的宽度,最大占据100px的高度。我认为您可以添加“最小宽度”和“最大宽度”值。

3种情况可能导致您在不知情的情况下调整广告尺寸:

1-如果广告是“自适应广告”

2-如果激活了“优化移动广告尺寸”参数

3-如果通过“优化现有广告单元?”激活了全局“自动广告”?设置为开。

答案 6 :(得分:0)

截至2020年1月,ins上显示的max-height似乎没有错误(如果您在父容器上执行操作,则存在错误),因此这似乎可行(我在生产中使用它) :

<ins class="adsbygoogle"
     style="display:block; max-height: 336px"
     data-ad-client="ca-pub-XXXXXX"
     data-ad-slot="YYYYYY"
     data-ad-format="auto"></ins>

编辑:从2019年8月开始正式可行,请参见https://support.google.com/adsense/answer/9467650?hl=en

答案 7 :(得分:0)

在2020年10月为我工作:

<ins class="adsbygoogle"
     style="display:inline-block;min-width:320px;max-width:970px;width:100%;height:50px"
     data-ad-client="ca-pub-xxx"
     data-ad-format="fluid"
     data-ad-slot="xxx"></ins>

答案 8 :(得分:-1)

<style>.example_responsive_1 { width: 320px; height: 100px; }@media(min-width: 500px) { .example_responsive_1 { width: 468px; height: 60px; } }@media(min-width: 800px) { .example_responsive_1 { width: 728px; height: 90px; } }</style><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><!-- example_responsive_1 --><ins class="adsbygoogle example_responsive_1" style="display:inline-block" data-ad-client="ca-pub-XXXXXXX11XXX9" data-ad-slot="8XXXXX1"></ins><script>(adsbygoogle = window.adsbygoogle || []).push({}); </script>

试试这个