随着移动网络和设备的蓬勃发展,互联网接入终端的屏幕尺寸大小也越来越多样化,这些终端设备包括PC、笔记本电脑、智能手机和平板电脑等。同一个网页,在不同屏幕大小的设备上的浏览效果和用户体验可能千差万别。对于网站管理员而言,如何让自己的网站在不同设备上浏览时都具有良好的体验,是设计时需要解决的一个关键问题。而当你的网站上放置有Google AdSense 广告的话,如何让Google AdSense 广告针对不同的设备自动调整大小,同样也是提高用户体验和广告点击率需要考虑的重要因素。
为了达到这一目的,只需要使用一段简单的 JavaScript 代码即可针对不同设备的屏幕尺寸自动调整网站内容和 AdSense 广告形式,这就是所谓的“响应式设计”。实现步骤如下:
一、首先在Google AdSense 管理后惕啊制作多种不同尺寸的广告,例如常见的728x90、468x60 和 300x250。
二、然后,采用“if-else” JavaScript 代码段实现根据用户设备的屏幕尺寸投放适合的广告尺寸。具体代码如下所示:
<script type="text/javascript">
google_ad_client = "ca-publisher-id";
if (window. innerWidth >= 800) {
google_ad_slot = "1234567890";
google_ad_width = 728;
google_ad_height = 90;
} else if (windows.innerWidth < 400) {
google_ad_slot = "2345678901";
google_ad_width = 300;
google_ad_height = 250;
} else {
google_ad_slot = "3456789012";
google_ad_width = 468;
google_ad_height = 60;
}
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
需要特别说明的是:上述针对网站自适应屏幕大小进行的响应设计JavaScript代码是Google 允许的,这也是Google唯一建议修改的代码。而根据AdSense 合作规范,其它未经Google许可擅自对Google AdSense 代码进行任何更改都是违反AdSense计划政策的。
此外,Google 也在不断地广告形式进行优化,最近又针对移动设备做了一些改动:为了使移动设备的文字广告外观和感觉和电脑的更一致,Google给移动设备上的AdSense 文字广告加了一个新的可点击箭头图标,此外,对字体大小、间距、边内补白和文字版式也进行了优化。
没有评论:
发表评论