自適應網站安裝 AdSense 回應式廣告，三分鐘搞定！

早前介紹『Blogger 放置 Google AdSense 自訂廣告尺寸大小』時，發現 AdSense 有新的廣告在做推播，若是自訂尺寸以「寬 640 高 300」當作矩形廣告基底的話，廣告高度則會以「300」當作高的固定值，寬度則會以「640 ~ 300」間隨機推送。

觀察目前推送的廣告尺寸類型有「640x300」、「640x165」、「435x300」、「360x300」、「336x280」、「300x250」這幾種混合了文字與多媒體類型的廣告，而這幾天在整理網站版型時，心想以上隨機尺寸若是應用在響應式網頁 ( 自適應網站 ) 中，不知道是否可行。

結果測試過後頗為滿意，AdSense 回應式廣告現在已經相當聰明，將高固定於「300」時直接把寬設置為「100%」的情形下，廣告則會依裝置螢幕的寬度，自動填滿設定範圍內的整個區塊 (* 寬 360 以上的螢幕，滿版廣告較少，目前觀察還是隨機推送較多。)，免去了在「CSS @media」內調來調去的麻煩。

以下就以高「300」寬「100%」當作廣告範圍值做為示例，若在你的響應式網頁中需使用「CSS3 Media Queries」的設置方式，可以參考『Blogger 電腦版行動版文章中安裝 AdSense 回應式廣告』。

相關連結

Google AdSense「https://www.google.com/adsense/start/」

AdSense 「廣告政策」

設置流程

1. 網站中放入廣告代碼
2. 無法調整網站 CSS
3. 使用 Blogger 或 Xml 網站

設定教學

Step 1

網站中放入廣告代碼

在網站或部落格平台的廣告位置放入下列廣告代碼，並將「ad-client、ad-slot」相關發佈商號碼做更換。width 為廣告寬度、height 為廣告高度。

<div class="ads">
<ins class="adsbygoogle"
     style="display:inline-block;width:100%;height:300px;"
     data-ad-client="ca-pub-123456789"
     data-ad-slot="123456789"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>

Step1-1. 在網頁的 CSS 中放入置中代碼

接著可以幫廣告做置中的動作！前往網站的 CSS 區塊放置以下 CSS 代碼，width 寬度「100%」、height 高度「自動 auto」，為了使文字不要太靠近廣告 margin 邊界「上 10px、下 10px、左右都為 0」，position 元素位置「relative 相對」，text-align「center 水平置中對齊」。

.ads {width:100%; height:auto; margin:10px 0px 10px 0px; position:relative; text-align: center;}

接著在『</body>』之前放入下列 Adsense 異步腳本 js，就完成設定了。

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

Step 2

無法調整網站 CSS，使用以下代碼

若你的網站無法自由調整 CSS，可以試著使用下面的代碼並放置於網站的 HTML 或 廣告容器中，然後將「ad-client、ad-slot」相關發佈商號碼做更換。

<div class="ads" style="width:100%; height:auto; margin:10px 0px 10px 0px; position:relative; text-align: center;">
<ins class="adsbygoogle"
     style="display:inline-block;width:100%;height:300px;"
     data-ad-client="ca-pub-123456789"
     data-ad-slot="123456789"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>

接著在『</body>』之前添加下列 Adsense 異步腳本 js，就完成設定了。

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

Step 3

使用 Blogger 或 Xml 網站

如果你是使用 Xml 網頁，或是需在 Blogger 範本中放置廣告，可以使用用以下代碼，並將「ad-client、ad-slot」相關發佈商號碼做更換。

<div class='ads' style='width:100%; height:auto; margin:10px 0px 10px 0px; position:relative; text-align: center;'>
&lt;ins class=&quot;adsbygoogle&quot;
     style=&quot;display:inline-block;width:100%;height:300px;&quot;
     data-ad-client=&quot;ca-pub-123456789&quot;
     data-ad-slot=&quot;123456789&quot;&gt;&lt;/ins&gt;
&lt;script&gt;
(adsbygoogle = window.adsbygoogle || []).push({});
&lt;/script&gt;
</div>

接著在『</body>』之前放入下列 Adsense 異步腳本 js，就完成設定了。

<script async='async' src='//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js' type='text/javascript'/>

以上，祝愉快：)

相關文章

Blogger 放置 Google AdSense 自訂廣告尺寸大小

Blogger 電腦版行動版文章中安裝 AdSense 回應式廣告

Blogger 繼續閱讀隱藏廣告和物件

[教學] Blogger 文章中任意位置加入Google AdSense 廣告