专栏首页草根博客站长有话说Typecho 的 Handsome 主题下谷歌 AdSense 广告错位修正

Typecho 的 Handsome 主题下谷歌 AdSense 广告错位修正

最近明月在 Handsome 主题“文章页脚广告位”广告位投放了谷歌 AdSense 的“匹配内容”广告样式,这种广告样式的匹配度和对用户的吸引力以及延长访问者持续时间都让明月非常的喜欢,有兴趣了解的明月强烈建议大家看看谷歌官方的 简介 。可惜不知道为啥,在投放过程中发现了一个问题,那就是有时候会出现广告错位现象,主要表现就是广告超出了广告位的尺寸。

图片来自学习笔记Blog

匹配内容是一款免费的内容推荐工具,此工具为您提供了一种向网站访问者宣传内容的简便途径。通过向读者提供更多相关内容,提升网站的网页浏览量、用户在网站上的停留时间、读者忠诚度和广告展示次数,最终为您带来更多广告收入。 系统会根据主题相似度以及每位读者的特点来推荐匹配内容。实验结果显示,推荐匹配内容的网页浏览量平均增加了9%,用户在网站上停留的时间平均延长了 10%。可以说“匹配内容”广告就是专为吸引用户和延长访问者持续时间的

图片来自学习笔记Blog

广告首次载入都是正常的,如上图!在点击了广告内匹配的站内文章链接后进入对应的文章就会出现错位问题,如下图所示:

图片来自学习笔记Blog

经过明月多次测试发现,这个问题几乎是恒定出现的,目前看问题应该是出在广告位CSS容器上,明月的CSS水准是出了名的“渣”(就会复制粘贴而已),所以指望自己修正是不可能了,好在用的是“强大”的谷歌 AdSense ,借助 AdSense 自定义样式来实现针对不同屏幕宽度设置确切广告单元尺寸就可以完美的解决这个问题,明月很早前其实就在博客上分享过,可参考【应对冰桶算法的折腾再次领教了Adsense的强大!】一文,里面有详细的介绍,我就不在这里多费口舌了,下面直接贴出目前使用的广告代码供大家参考:

<style>
.mychicun { width: 280px; height: 200px; }
@media(min-width: 350px) { .mychicun { width: 320px; height: 240px; } }
@media(min-width: 400px) { .mychicun { width: 350px; height: 280px; } }
@media(min-width: 500px) { .mychicun { width: 360px; height: 300px; } }
@media(min-width: 700px) { .mychicun { width: 450px; height: 250px; } }
@media(min-width: 1000px) { .mychicun { width: 650px; height: 400px; } }
@media(min-width: 1280px) { .mychicun { width: 850px; height: 400px; } }
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- mychicun -->
<ins class="adsbygoogle mychicun"
     style="display:block"
     data-ad-format="autorelaxed"
     data-matched-content-rows-num="2"
     data-matched-content-columns-num="4"
     data-matched-content-ui-type="image_stacked"
     data-full-width-responsive="true"
     data-ad-client="ca-pub-6265969660632907"
     data-ad-slot="1932760860"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

上述代码里的data-full-width-responsive="true"这个参数决定自适应广告单元是否会自动展开,以完全占据访问者所用移动设备的屏幕宽度。您以不同方式使用 data-full-width-responsive 参数,自适应广告单元也会呈现出不同的行为方式。这是谷歌 AdSense 官方的一个自适应方法,不过,明月感觉好像不生效,只有借助自定义的CSS才生效。

可以看到为了提高兼容性,明月借助谷歌Chrome浏览器的开发者工具测试了众多的屏幕设备,所以屏幕尺寸参数也比较多,虽然繁琐了很多但换来的是很不错的兼容性,还是很值的!

原文链接:https://www.imydl.tech/ty/628.html

我来说两句

0 条评论
登录 后参与评论

相关文章

  • WordPress 博客微信小程序开发经验分享

    说起微信小程序很多站长们应该都不陌生,刚开始的时候明月对小程序也有过关注,后来因为实在是想不出来自己的需求点在哪里留给淡忘了,上个月在看到【守望轩】博客开源的“...

    明月登楼
  • 使用 Google Publisher Toolbar 扩展管理站点 AdSense 广告

    今天给大家讲讲 Chrome 浏览器明月必装的扩展之一,Google Publisher Toolbar(Google 发布商工具栏)。对于投放了 AdSens...

    明月登楼
  • WordPress 恶意代码的分析和排查方法

    自【网站安全的「灯下黑」隐患:账号安全】一文发表后,明月收到了很多站长们有关 WordPress 站点安全的问题咨询,明月总结分析了一下几乎 90%以上都是“恶...

    明月登楼
  • Typecho 的 Handsome 主题下谷歌 AdSense 广告错位修正

    最近明月在 Handsome 主题“文章页脚广告位”广告位投放了谷歌 AdSense 的“匹配内容”广告样式,这种广告样式的匹配度和对用户的吸引力以及延长访问者...

    明月云服务
  • 初学者接触web前端需要注意什么?避免走上弯路

    初学Web前端要注意什么?如何学好JS模块化编程?JavaScript是前端三要素之一,也是很多初学Web前端的人遭遇的第一条拦路虎。很多同学表示JavaScr...

    用户5827212
  • pudn下载地址的规律

    landv
  • 吉利李书福罕见自述:我是一个放牛娃......

    时逢改革开放40周年。四十年来中国社会沧桑巨变,四十年来中国企业筚路蓝缕,四十年来中国企业家以实践出真知。

    IT派
  • 多柱汉诺塔最优算法设计探究

    多柱汉诺塔最优算法设计探究 引言 汉诺塔算法一直是算法设计科目的最具代表性的研究问题,本文关注于如何设计多柱汉诺塔最优算法的探究。最简单的汉诺塔是三个柱子(A、...

    Florian
  • ETC和IOTA谁将是物联网领域的霸主?

    进入11月份,IOTA市值暴涨了8倍多,一跃进入数字货币排行榜前四,成功击败老牌数字货币瑞波币。IOTA主要服务于物联网,炒作的点也是物联网,而物联网在近两年也...

    企鹅号小编
  • Struts2简单接触

    Struts这个名字来源于在建筑和旧式飞机中使用的支持金属架。这个框架之所以叫“Struts”,是为了提醒我们记住那些支撑房屋,建筑,桥梁,甚至踩高跷时候的基础...

    the5fire

扫码关注云+社区

领取腾讯云代金券