Google Adsense也可以放在響應式(Responsive)網頁

2 / 14, 2013 AdSense , Google , JS

Responsive Design應該很多人聽過吧,如果沒聽過,那你聽過安麗嗎(誤),Responsive中文稱響應式網頁,就是能隨著螢幕or視窗大小,網頁做大小更動,版面也不太一樣,像本站就有Responsive Design,不信拉一拉視窗,本站的版面絕對不會超過視窗大小(Google Adsense例外,等一下會說為什麼),Google Adsense則是Google推出的「超好賺廣告」,不過有個缺點,就是廣告大小為固定長寬,遇到Responsive Design的網頁就悲劇啦~,於是有神人做出了回應式Adsense(不知道是不是Google做的,但至少Google已經說了這是允許範圍內,不用擔心),簡單幾條Javascript,就完成啦~

<script type="text/javascript">
    google_ad_client = "發佈商ID";
    if (window.innerWidth >= 800) {
        google_ad_slot = "廣告單元1";
        google_ad_width = 728;
        google_ad_height = 90;
    } else if (window.innerWidth < 400) {
        google_ad_slot = "廣告單元2";
        google_ad_width = 300;
        google_ad_height = 250;
    } else {
        google_ad_slot = "廣告單元3";
        google_ad_width = 468;
        google_ad_height = 60;
    }
</script>
<script type="text/javascript" 
 src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

發佈商ID可以從Adsense源碼看到(源碼中google_ad_client=後面那一串),官網也可以查到,像小弟的就是ca-pub-6086252679557509(註:如果是從官網查到,記得最前面還要加ca-)
adsense-responsive
廣告單元123則是廣告的ID,一樣可以從Adsense源碼查到(源碼中google_ad_slot=後面那一串),像小弟就是8552206002

最後記得,這是三個廣告單元,每個大小都不一樣,分別為728 X 90(第一個)300 X 250(第二個)468 X 60,依序填入資訊,就完成了!

註:由於Javascript是在網站載入時就偵測了,網站載入完成後,視窗變更大小,adsense不會隨之變更,所以測試時請先調好視窗大小,在重新整理網頁做測試
以上資訊來自Adsense官方部落格

  • Ben Wong

    Google 已推出Responsive Ads,幾很方便的. 方面的話,可以做個鏈接哦: http://www.sthshare.com 我做英文Technology 網站,多多指教.