运用了小小的flex布局,解决了首页广告位错位的问题。在此简单地与大家分享一下解决问题的过程。

2022-5-21更新:我放弃在首页放广告了,我尝试添加自定义CSS来限定广告的宽度,但失败了,因为广告代码是JS脚本,广告的元素和样式在JS加载并执行之后才能确定,因此自定义CSS无法起到作用。经过搜索,我发现原来广告自动展开是谷歌刻意的行为。希望有朝一日能解决这个bug。如果某大佬有解决方案,可以跟我们分享下。

不知道为啥,点击浏览器的刷新按钮,最前方广告位的谷歌广告就直接错位了。但是点击左上角的logo或者导航栏里的首页,广告位却没有错位了。经过一段时间的摸索,最终找到了解决的办法。

错位情况

症状1——溢出广告位到右侧栏

如下图所示,谷歌广告直接溢出去了,这实在是不好看。

错位的症状1

我尝试了各种方法想要去限制住广告为不要溢出,但是没能解决这个问题。

最终发现将广告类型从信息流广告/展示广告改为文章内嵌就能解决这个问题。

内嵌广告

症状2——左边留白

换为文章内嵌之后,是没有溢出来了,但是经常左边留白,像是溢出来了而且居中显示了。随便试试,发现居左显示竟然就可以了!!神器的很。

症状描述

在后台自定义CSS中,添加代码:

ins.myset {
    display: flex;
    justify-content: flex-start !important;
}

然后修改广告代码:

<ins class="adsbygoogle myset"    style="display:block; text-align:center;"      data-ad-layout

主要是在class里面增加一个myset,也就是前面自定义的CSS。

最终效果

这样设置之后,不论怎么刷新,都可以保留好较为完整的广告单元,尽管有时候右侧有一部分被隐藏了,但是基本不影响美观。

最终的效果

(PS:对于静态的广告有用,对于那种放视频的有时候会出现bug,还在进一步探索中......)


前面也写了一些关于谷歌广告GoogleAds的速度优化懒加载相关的内容,感兴趣的朋友可以去看看,希望对你能有所帮助。


博主个人公众号
版权声明 ▶ 本网站名称:陶小桃Blog
▶ 本文链接:https://www.52txr.cn/2022/adsError.html
▶ 本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长进行核实删除。
▶ 转载本站文章需要遵守:商业转载请联系站长,非商业转载请注明出处!!

最后修改:2022 年 06 月 14 日
如果觉得我的文章对你有用,请随意赞赏