實現Google AdSense廣告自適應設計

2014-01-09 09:31:13來源:月光博客作者:

早先我們在《自適應網頁設計的方法》一文中說明了網站自適應的修改方法,今天我們將著重討論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廣告內容也可以正常在手機上展示了。

贊助商鏈接:

牛牛视频