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

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

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

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

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

经过明月多次测试发现,这个问题几乎是恒定出现的,目前看问题应该是出在广告位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浏览器的开发者工具测试了众多的屏幕设备,所以屏幕尺寸参数也比较多,虽然繁琐了很多但换来的是很不错的兼容性,还是很值的!

本文分享自微信公众号 - 草根博客站长有话说(imydl-blog),作者:明月登楼的博客

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-08-28

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 应对冰桶算法的折腾再次领教了Adsense的强大!

    百度最近的算法调整非常的频繁,特别是针对移动端的冰桶算法4.0的强势登场感觉影响更大,因为冰桶算法4.0主要是针对移动端广告位置、尺寸的,基本上可以理解为是打击...

    明月云服务
  • 行之有效的屏蔽恶意 URL 请求的方法分享

    说起恶意 URL 请求(Malicious URL request)可能很多老站长们应该都知道,URL 恶意请求对于网站来说是很正常的一种“黑客行为”,大家都知...

    明月云服务
  • Handsome 主题实现最新评论首页博客导航栏自动排第一功能

    今天在【知言笔记】上看到了『Typecho实现每评论一次自动排第一功能』一文,终于算是实现了最新评论首页博客导航栏自动排第一功能的功能,一直很想用上这个功能,可...

    明月云服务
  • 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

扫码关注云+社区

领取腾讯云代金券