禁止Google Adsense广告自动展开,避免破坏移动网页样式

近日本站申请的Google Adsense终于通过,但在投放广告后发现,当访客使用手机访问时,Adsense自适应广告的宽度会展开为设备全宽。也就是说,广告宽度超过了父元素的宽度,就像下图所示:

Google Adsense广告宽度超过父元素宽度
Google Adsense广告宽度超过父元素宽度

上图是文章内文广告,侧边栏上的展示广告也无法避免地“撑破”了父元素:

Google Adsense广告宽度超过父元素宽度
Google Adsense广告宽度超过父元素宽度

原本我们的网页设定了左右边距,使得内容更加整齐划一,看起来更加协调,但是Adsense广告自动展开到设备全宽,导致整个页面像是贴了许多牛皮癣广告,看起来很不舒服。

我尝试添加自定义CSS来限定广告的宽度,但失败了,因为广告代码是JS脚本,广告的元素和样式在JS加载并执行之后才能确定,因此自定义CSS无法起到作用。

经过搜索,我发现原来广告自动展开是谷歌刻意的行为:

我们的实验显示,当移动设备处于纵向模式时,全宽的文章内嵌广告可取得更好的效果。为了帮助您实现增收,我们的文章内嵌广告单元可自动展开,以便在设备处于纵向模式时完全占据用户屏幕的宽度。

Google – 文章内嵌广告的全宽版式

根据谷歌的研究,全宽广告可以获得更大收益。但是,我们不仅将网站作为盈利工具,更应该将它看作是思想和信息的传播媒介,是与访客对话的窗口,因此浏览体验更加重要。如果要在收益和访客体验上做抉择,我会选择后者。

我们可以修改广告代码,禁止自适应广告在移动设备上自动展开至全宽。只需在代码<ins>标签内添加一句:

data-full-width-responsive="false"

修改后的代码类似于:

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block; text-align:center;"
     data-full-width-responsive="false"
     data-ad-layout="in-article"
     data-ad-format="fluid"
     data-ad-client="xxxxxxx"
     data-ad-slot="xxxxxxx"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

修改过后会发现,广告已经不自动展开全宽,乖乖地呆在它应该在的地方。

Adsense广告宽度不超出父元素
Adsense广告宽度不超出父元素

上图是内文广告,下图是放置在侧边栏的展示广告:

Adsense广告宽度不超出父元素
Adsense广告宽度不超出父元素

至此,网页重新恢复整洁,看起来更加赏心悦目。相信访客更加愿意停留,我们能够得到更为长远的收益。

本作品采用 知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议 进行许可
支付宝扫码打赏微信打赏

喜欢本文吗?请我喝杯雪碧吧~~

0 0 投票
文章评分
guest
0 评论
Inline Feedbacks
查看所有评论