青青子衿, 悠悠我心, 但为君故, 沉吟至今
« 虚拟运营商牌照的8个热点问题解读阿里妈妈还是阿里后妈 »

实现Google AdSense广告自适应设计

  早先我们在《自适应网页设计的方法》一文中说明了网站自适应的修改方法,今天我们将着重讨论Google AdSense广告的自适应设计方法。

  所谓自适应网页设计,就是让同一个网页代码,能够在不同设备上(从桌面电脑显示器到智能手机或其他移动产品设备)都能有更好的浏览体验,基本上对于双栏网站来说修改最简便,只要在HTML头部增加viewport标签,在CSS文件尾部增加针对不同屏幕分辨率的规则,布局宽度使用相对宽度,隐藏侧栏,半小时就能提升网站的手机移动浏览体验。

  但是网站修改完成后,我们会发现原先的Google AdSense广告单元并没有实现自适应,浏览体验并不好,实际上,只要简单的几步操作,就能让Google AdSense广告实现自适应设计。

  最简单的方法是新建一个广告单元,在“广告尺寸”里选择“自适应广告单元”即可,如下图所示,这个我们就不多讨论。

实现Google AdSense广告自适应设计

  现在主要讨论一下原有的旧广告单元如何实现自适应设计。

  首先,如果原有的Google AdSense广告代码类型为“同步”,则必须先将代码修改为“异步”代码,登录Google AdSense后台,在相应的广告单元里,点击“获取代码”,目前默认的代码就是异步代码。

  之后,我们需要对代码进行一些修改,修改的方法有两种:

  原有的示例代码:

<ins class="adsbygoogle"
     style="display:inline-block;width:300px;height:250px"
     data-ad-client="ca-pub-00000"
     data-ad-slot="00000"></ins>

  方法1、智能调整尺寸

  将中间一行ins代码里的style="display:inline-block;width:300px;height:250px"替换为style="display:block",并在后面增加data-ad-format="auto"这个属性。

  修改后的代码变为:

<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-00000"
     data-ad-slot="00000"
     data-ad-format="auto"></ins>

  方法2、高级调整尺寸

  在整段代码前增加<style>样式内容,针对不同分辨率的屏幕展示不同尺寸的广告。

  修改后的代码变为:

<style>
.my_adslot { width: 320px; height: 50px; }
@media(min-width: 500px) { .my_adslot { width: 468px; height: 60px; } }
@media(min-width: 800px) { .my_adslot { width: 728px; height: 90px; } }
</style>

<ins class="adsbygoogle my_adslot"
     style="display:inline-block"
     data-ad-client="ca-pub-00000"
     data-ad-slot="00000"></ins>

  上面两种方法都可以,建议用方法1,简单易用。

  经过这样的修改,原有的Google AdSense广告单元即可实现自适应网页设计。

  有些用户可能会疑虑,这种方法修改了Google Adsense的广告代码是否符合Google的政策,根据Google AdSense的官方网页介绍,如上的自适应设计的代码修改是可以接受的修改,因此与网站相适宜的广告修改并不违反Google AdSense的政策。

  经过这样的修改,最终网站在手机上的展示形式如下图所示,AdSense广告内容也可以正常在手机上展示了。

月光博客

  最后,分享一下Google关于自适应网页设计的讲座的视频地址,在线观看请点这里



  除非注明,月光博客文章均为原创,转载请以链接形式标明本文地址

  本文地址:http://www.williamlong.info/archives/3718.html
  • 文章排行:
  • 1.犀利影评
  • 不是说不能修改代码
    旅海燕网 于 2014-1-14 10:03:37 回复
    可接受的修改
    以下是一些可以接受的修改:
    以下是一些可以接受的修改:
    自适应设计
    A/B测试
    动态设置自定义渠道
    广告代码缩减(务必删除代码注释)
  • 2014/1/5 11:46:49   支持(7)反对(4) 回复
  • 2.旅海燕网
  • 这个的出现不感觉意外,老早就感觉该出现这样的选项了。
  • 2014/1/14 10:00:45   支持(4)反对(3) 回复
  • 3.tkilee
  • 所有广告联盟的广告通通屏蔽,包括google的ad!
    我看不到什么广告的存在!
  • 2014/1/14 23:26:59   支持(5)反对(4) 回复
  • 4.陈金萍
  • 月光博客在诺基亚6120CI下不能很好地自适应
    williamlong 于 2014-1-5 15:57:47 回复
    诺基亚浏览器太老了,不支持css3,建议用iPhone或Android。
  • 2014/1/5 6:54:31   支持(4)反对(4) 回复
  • 6.yuntian
  • 你好,请教个问题碰到过css 代码跟adsense 代码有冲突怎么办,显示不全。而且不能设置成异步的代码,必须用同步才能显示
  • 2016/4/13 1:01:08   支持(0)反对(0) 回复
  • 7.讨厌广告
  • #divAdsense,
    ins.adsbygoogle
    { display: none !important }
    不解释
  • 2014/1/5 4:41:02   支持(3)反对(4) 回复
  • 8.郑永
  • 文章带的图片貌似没有广告吧? 还有这个方法根本不适合,一改就变成其他广告样式。
  • 2014/1/20 22:38:36   支持(4)反对(6) 回复
  • 9.家家
  • 我发现你的网页现在没有自适应……不知道是不是我的浏览器太撮了……
  • 2014/5/7 13:40:52   支持(2)反对(5) 回复

发表评论:

 请勿发送垃圾信息、广告、推广信息或链接,这样的信息将会被直接删除。

订阅博客

  • 订阅我的博客:订阅我的博客
  • 关注新浪微博:关注新浪微博
  • 关注腾讯微博:关注腾讯微博
  • 关注认证空间:关注QQ空间
  • 通过电子邮件订阅
  • 通过QQ邮件订阅

站内搜索

热文排行


月度排行

本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享. 转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议.
This site is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 License.