转载 

如何修改Google Adsense自适应广告高度?

分类:前端    334人阅读    IT小君  2023-09-17 19:16

 

最近发现投放的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 参数声明,然后按下面的方法来定义/↓↓↓

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

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

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

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

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

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

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

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

 

参考链接

https://support.google.com/adsense/answer/9183460?hl=zh-Hans
https://support.google.com/adsense/answer/9183363?hl=zh-Hans

转载于:https://www.phpvar.com/archives/4586.html

支付宝打赏 微信打赏

如果文章对你有帮助,欢迎点击上方按钮打赏作者

 工具推荐 更多»