明月登楼

Typecho 的 Handsome 主题下谷歌 AdSense 广告错位修正
最近明月在 Handsome 主题“文章页脚广告位”广告位投放了谷歌 AdSense 的“匹配内容”广告样式,这种...
扫描右侧二维码阅读全文
28
2018/08

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

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

20160527191319.jpg

匹配内容是一款免费的内容推荐工具,此工具为您提供了一种向网站访问者宣传内容的简便途径。通过向读者提供更多相关内容,提升网站的网页浏览量、用户在网站上的停留时间、读者忠诚度和广告展示次数,最终为您带来更多广告收入。
系统会根据主题相似度以及每位读者的特点来推荐匹配内容。实验结果显示,推荐匹配内容的网页浏览量平均增加了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浏览器的开发者工具测试了众多的屏幕设备,所以屏幕尺寸参数也比较多,虽然繁琐了很多但换来的是很不错的兼容性,还是很值的!

最后修改:2018 年 08 月 28 日 09 : 26 AM
如果觉得我的文章对你有用,请随意赞赏

18 条评论

  1. 吹乐了

    博主网站很整洁,不错。留个脚印!

    1. 明月登楼
      @吹乐了

      谢谢支持!

  2. Wai Gor Investment Blog

    这个主题很贊,修掉缺憾就更好用。

    1. 明月登楼
      @Wai Gor Investment Blog

      缺憾?傻缺憾?
      话说英文博客,很少见呀!

  3. Pnnk

    可能是因为我访问AdSense用了所以我的广告在普通状态下怎么就无法显示,只有用了广告才能显示,但是不用*,压根打不开AdSense ..... 这真是个无解

    1. 明月登楼
      @Pnnk

      这个应该没有关系呀!广告不显示一半都是你的内容造成无法推荐相关广告,我感觉你可以使用AdSense区段定位代码让AdSense爬虫更加精准的爬取你站点的文章内容来增加匹配度和广告相关度!

  4. 采果子

    很奇怪的是,我网站上的 Adsense 经常性显示空白

    1. 明月登楼
      @采果子

      嗯,经常性的空白可能跟暂时无法匹配有关系!尽量加大文章数量就好了!

      1. 采果子
        @明月登楼

        不是的,一个导购网站,首页广告显示正常,内容也经常性显示不出来,文章数量已达到19万,另一个科技网,也是一样的问题,文章数量上去了,但还是会经常性显示空白

        1. 明月登楼
          @采果子

          估计是AdSense爬虫抓取你网站信息不完整造成的无法匹配!好像导购类网站就是不好匹配!建议你用AdSense的区段定位代码来提高一下AdSense爬虫抓取的准确率!

  5. 懿古今

    看了实现方法还是比较简单,不过很实用,有空我也折腾试试

    1. 明月登楼
      @懿古今

      是的,谷歌AdSense太强大了!几乎所有的问题都被考虑到了!

  6. 梁兴健

    我感觉我也要折腾一下这种“匹配广告”

    1. 明月登楼
      @梁兴健

      嗯,很有必要的其实!

      1. 梁兴健
        @明月登楼

        找不到这种广告样式

        1. 明月登楼
          @梁兴健

          新站点可能暂时没有权限!匹配内容是需要有一定时间段的站点才可以的!

  7. 清雨

    站长BBS证书过期啦,还有请问楼主有好用的文章头图制作工具或网站?

    1. 明月登楼
      @清雨

      多谢提醒,竟然忘了都!

发表评论