自訂Google AdSense回應式廣告大小，依照螢幕設定不同的廣告單元

Google AdSense有提供回應式廣告，在對於RWD響應式網頁來說是滿方便的。但有時候會遇到一個問題，就是官方廣告的單元樣式，有時收益可能不會來的我們自訂的大小理想，這時候我們可以利用人工修改，設定讓廣告根據不同螢幕出現我們指定的類型，這樣一來在行動裝置和電腦版就能透過限制廣告大小，讓效益比較差的版型不要出現。

先前往你的AdSense帳戶新增一個回應式的廣告，將產生程式碼中的data-ad-client和data-ad-slot編號記下來。

1.複製以下程式碼，將內文中的XXXXX改成你自己AdSense發佈商和廣告編號。
2.把Techmarks修改成你自己取的名稱。
3.自行調整width、height在各個螢幕顯示下的顯示廣告條件。

<style>
.Techmarks { width: 300px; height: 100px; }
@media(min-width: 500px) { .Techmarks { width: 336px; height: 280px; } }
@media(min-width: 800px) { .Techmarks{ width: 970px; height: 250px; } }
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Techmarks -->
<ins class="adsbygoogle Techmarks"
style="display:inline-block"
data-ad-client="ca-pub-XXXXXXXXX"
data-ad-slot="XXXXXXX"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

將上方修改好的程式碼，貼到要顯示廣告的地方即可。

設定橫向、直向或矩形廣告，請參考官方延伸教學

參考來源：如何修改Adsense回應式廣告程式碼

 

---

 

延伸閱讀：AdSense網路賺錢