Typecho 的 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浏览器的开发者工具测试了众多的屏幕设备，所以屏幕尺寸参数也比较多，虽然繁琐了很多但换来的是很不错的兼容性，还是很值的！
本文系转载，前往查看
如有侵权，请联系 cloudcommunity@tencent.com 删除。
本文系转载，前往查看
如有侵权，请联系 cloudcommunity@tencent.com 删除。
腾讯云开发者
