转载 

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

分类:前端    312人阅读    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

点击广告,支持我们为你提供更好的服务

小众时尚单品在线电子商务网站模板

html5 svg夜空中星星流星动画场景特效

中小型创意设计服务公司网站模板

响应式太阳能能源公司网站模板

css鼠标跟随文字模糊特效

HTML5 Canvas竖直流动线条背景动画特效

响应式咖啡饮品宣传网站模板

响应式时尚单品在线商城网站模板

有机水果蔬菜HTML5网站模板

canvas炫酷鼠标移动文字粒子特效

HTML5数字产品服务公司网站模板

现代时尚家具公司网站模板

js+css3抽奖转盘旋转点餐代码

css+js实现的颜色渐变数字时钟动画特效

HTML5现代家居装潢公司网站模板

html5 canvas进度条圆环图表统计动画特效

html5图标下拉搜索框自动匹配代码

html5 canvas彩色碎片组合球形旋转动画特效

网页设计开发公司网站模板

jQuery右端悬浮带返回顶部特效

点击广告,支持我们为你提供更好的服务
 工具推荐 更多»
点击广告,支持我们为你提供更好的服务