讓 Google AdSense 廣告配合瀏覽器版面動態變更大小（回應式網頁設計）

這裡介紹如何讓 Google AdSense 廣告配合瀏覽器版面動態變更大小，符合回應式網頁（responsive web）的格式。

所謂的回應式網頁（responsive web）是指網頁的版面會根據裝置的類型或瀏覽器的畫面大小等參數，動態調整版面的呈現方式。如果你的網頁上的 Google AdSense 廣告是使用新版的非同步廣告程式碼，那麼你就可以透過 CSS 與媒體查詢（media queries）來設定 AdSense 廣告的大小。

下面這個是 Google AdSense 官方所提供的範本：

<style type="text/css">
.adslot_1 {
  width: 320px;
  height: 50px;
}
@media (min-width:500px) {
  .adslot_1 {
    width: 468px;
    height: 60px;
  }
}
@media (min-width:800px) {
  .adslot_1 {
    width: 728px;
    height: 90px;
  }
}
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle adslot_1"
  style="display:inline-block;"
  data-ad-client="ca-pub-1234"
  data-ad-slot="5678"></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

這裡的作法其實只是將原本 AdSense 程式碼中 CSS 指定尺寸的部份抽出來，再加入媒體查詢（media queries）而已，這樣 Google AdSense 就會依照 CSS 所指定的大小放送適合的廣告。這個範本的設定是指定當瀏覽器畫面寬度在 500 像素以下時顯示 320 x 50 這個大小的廣告，而當寬度為 500 像素到 800 像素之間時，顯示 468 x 60 這個大小的廣告，而寬度若超過 800 像素時，則顯示 728 x 90 這個超級橫幅廣告。

我們舉個實際的範例來說明如何把一個自己的廣告修改成這樣的形式，假設我們有一個 970 x 90 的大型超級橫幅廣告，其原本的程式碼如下：

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 海豹雜記置底970x90 -->
<ins class="adsbygoogle"
     style="display:inline-block;width:970px;height:90px"
     data-ad-client="ca-pub-7794009487786811"
     data-ad-slot="6855463738"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

假設我們希望廣告的版面大小可以符合下面這個規則：

500 像素以下：顯示 250 x 250 正方形廣告
500 像素到 800 像素之間：顯示 336 x 280 大矩形廣告
800 像素到 1100 像素之間：顯示 728 x 90 超級橫幅廣告
1100 像素以上：顯示 970 x 90 大型超級橫幅廣告

那麼首先就要先根據這個規則設計 CSS 的控制程式碼：

<style type="text/css">
.myadslot {
  width: 250px;
  height: 250px;
}
@media (min-width:500px) {
  .myadslot {
    width: 336px;
    height: 280px;
  }
}
@media (min-width:800px) {
  .myadslot {
    width: 728px;
    height: 90px;
  }
}
@media (min-width:1100px) {
  .myadslot {
    width: 970px;
    height: 90px;
  }
}
</style>

把這段 CSS 程式碼放在網頁中的 <head> 與 </head> 之間。

接著再把原本的 AdSense 程式碼配合上面的 CSS 修改一下，將原本的尺寸刪掉，加入上面定義的 CSS class：

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 海豹雜記置底970x90 -->
<ins class="adsbygoogle myadslot"
     style="display:inline-block;width:970px;height:90px"
     data-ad-client="ca-pub-7794009487786811"
     data-ad-slot="6855463738"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

再把這段廣告程式碼放進網頁中就完成了，這樣 Google AdSense 就會在網頁載入時依據瀏覽器的寬度與這裡定義的 CSS 規則放置適合版面大小的廣告，但是要注意一點，這個程式碼只會在網頁一開始載入時有反應，如果網頁載入後，再自己改變瀏覽器的視窗大小或裝置方向時，它還是會維持一開始的版面大小。

關於 Google AdSense 的廣告尺寸可以參考 Google 的官方說明網頁，從這個網頁中你查詢各種廣告的尺寸與適用情況，選擇適合自己網頁版面的廣告大小。

參考資料：Google AdSense

讓 Google AdSense 廣告配合瀏覽器版面動態變更大小（回應式網頁設計）

沒有留言:

張貼留言

熱門文章