赞助商广告

最近发现投放的Google Adsense自适应广告显示的高度太大啦,虽说挂广告是为了赚点广告费,补贴下昂贵的服务器费用,但显示的广告尺寸过大,可以说是严重影响用户体验。

检测google广告加载全显示的代码发现,原本限制广告高度的父元素样式都google自动加了!important声明的代码覆盖啦!google广告代码是异步加载的,而且在标签style属性里面加了!important样式声明,自己再想写CSS去覆盖goolgle的CSS样式声明的方法根本就行不通,不可行!

测试了google 广告单元代码,发现不加 data-ad-format 参数就不会在广告单元标签的父元素上自动添加!important声明。

如果不需要限制广告高度的广告单元 ,其代码标签的data-ad-format 参数可设为true,即data-ad-format ="true";

如果想解决显示的广告单元高度过高这一影响用户体验的问题,首先去掉google广告单元代码中的data-ad-format 参数声明,然后按下面的方法来定义/限制google 广告高度↓↓↓

1、高度固定的可展开宽度示例

以下示例显示如何修改自适应广告代码,以指定高度和宽度,其中:高度为 90 像素(固定),宽度在 400 像素(最小值)到 970 像素(最大值)之间。

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

注意:替换掉自己的发布商ID和参数值;

2、根据屏幕宽度指定确切宽高尺寸

如果知道在每种设备上最适合您的自适应网站的确切广告单元尺寸,则您可以使用 CSS3 媒体查询来设置自适应广告单元的尺寸。下面的示例显示了如何修改广告代码以使用 CSS3 媒体查询:

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

注意:替换掉自己的发布商ID和参数值;

@media 规则是一种 CSS3 语法,当前所有主流浏览器均支持这种规则。如果您想要支持比较旧的浏览器(例如 Internet Explorer 7 或更低版本),建议先指定默认尺寸。这样可以确保即使媒体查询不受支持,广告也可正常展示。请注意,目前尚未正式支持通过 CSS 在外部样式表中设置广告代码的尺寸。

在某些情况下,尤其是在较小的移动设备上,您可能完全不打算展示广告。如果您确实希望隐藏广告单元,可以使用上述提到的 CSS 媒体查询来设置参数,确保不发出广告请求且不展示广告。