Share8
Tweet
WhatsApp
11 Shares

上年寫了一篇有關 Responsive Adsense 的文章，直到最近突然失效，原本應該是 336 x 250 的廣告突然變了 468×60，所以上網找了一下資料，原來 Google Adsense 的 code 更新了，而且簡單了一點。
（事後發覺其實是 WordPress theme 覆蓋了 Adsense 的設定）
在看這篇文章之前，可以先複習一下之前有關 Adsense 的文章。
1. Adsense 小貼士
2. Responsive Adsense 的 breakpoint
3. 新 async Adsense responsive code

在 Adsense 後台，可以看到 Responsive Adsense 廣告碼已經只剩下自動化的廣告碼，沒有了從前可以因應不同螢幕大小而自訂廣告碼的例子。不過根據 Adsense 的說明，其實這個方法依然有效，不過新增了兩個新的方法。

如果大家在 Adsense 後台多數會看到一段類似的 code.
就以這段 code 作例子。

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-12345"
data-ad-slot="67890"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

第一個方法：

可以簡單將 data-ad-format 的 auto 改為 rectangle, vertical, horizontal（方型、垂直、水平）
可以選擇單一個形狀如 data-ad-format=”rectangle” 或同時選擇兩個如 data-ad-format=”rectangle, horizontal”
這樣 Adsense 就會在可行空間內放置最合適的廣告。

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-12345"
data-ad-slot="67890"
data-ad-format="rectangle, horizontal"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

第二個方法：

可以指定空間大小，高度多少，讓 adsense 自動尋找合適的廣告。
例如版面會因為裝置大小，而在 320px 至 970px 之間，指定廣告高度 100px，就可以這樣

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle adslot_1"
style="display:inline-block;min-width:320px;max-width:970px;width:100%;height:100px"
data-ad-client="ca-pub-12345"
data-ad-slot="67890"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

這個範圍內，Adsense 會自動分配如 468×60, 320×100, 320×50, 728×90, 970×90 等廣告。

第三個方法：

其實即是從前的自訂廣告 size，亦即是 新 async Adsense responsive code 可以自訂廣告 size 如 iPhone 5 會出 300×250 廣告，大一點螢幕的 iPhone 6 或 Android 亦出 336×280 廣告

<style type="text/css">
.adslot_1 { width: 728px; height: 90px; }
@media only screen and (min-width: 0px) and (max-width: 340px) { .adslot_1 { width: 300px; height: 250px; } }
@media only screen and (min-width: 341px) and (max-width: 479px) { .adslot_1 { width: 336px; height: 280px; } }
@media only screen and (min-width: 480px) and (max-width: 800px) { .adslot_1 { width: 468px; height: 60px; } }
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:inline-block;"
data-ad-client="ca-pub-12345"
data-ad-slot="67890"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

外傳：

其實除了顯示不同的廣告外，Adsense 現在亦已容許不顯示廣告，方法亦很簡單

<style type="text/css">
.adslot_1 { width: 728px; height: 90px; }
@media only screen and (min-width: 0px) and (max-width: 299px) { .adslot_1 { display: none; } }
@media only screen and (min-width: 300px) and (max-width: 340px) { .adslot_1 { width: 300px; height: 250px; } }
@media only screen and (min-width: 341px) and (max-width: 479px) { .adslot_1 { width: 336px; height: 280px; } }
@media only screen and (min-width: 480px) and (max-width: 800px) { .adslot_1 { width: 468px; height: 60px; } }
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:inline-block;"
data-ad-client="ca-pub-12345"
data-ad-slot="67890"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

將原本設定廣告大小的地方設定為 display: none 就可以了，很簡單。

希望這篇文章能幫助到對 Adsense 設定有困難的朋友。

Share8
Tweet
WhatsApp
11 Shares