Google Adsense 回應式廣告的大小形狀不如預期嗎?試試以下設定讓廣告更美觀吧!

原本我是希望在網站上排邊欄的 Google Adsense 廣告是可以維持在接近正方形的矩形,但如果我直接設定固定寬度 300×200 則會發生佈景主題的 RWD 會出現廣告突出來的狀況。就因為網站有使用 RWD 這個技術,所以連廣告也要來使用可自動變換大小的「回應式廣告」啦!

回應式廣告他會自動偵測裝「他」的容器有多大,再變出可以塞進去的廣告尺寸出來。只不過有時候偵測出來的會跟你預期他會顯示的會有落差,原本想要的是類似正方形的,但是他卻丟給你一個超級高高高的長方形,你的邊欄就會有夠長長長。

Image 018

雖然廣告凸出來的問題解決了,但是現在這樣的詭異現象對於美觀來說也是個享受噩夢。

Adsense 計畫政策還是有給我們一些可以修改廣告程式碼的空間,等等講到的寫法全部都是官方 support 頁面有提到的。

一般的回應式廣告程式碼格式是這樣的

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

我們要修改的地方是「data-ad-format」這個屬性,他有三種可以用的屬性:矩形「rectangle」、直向的「vertical」、橫向的「horizontal」。選一個屬性覆蓋掉 auto 就可以了。

向我把網站邊欄頂部的廣告調成 rectangle 這個屬性,這樣子他就不會出現長長的狀況了。

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

Image 019