最近幫讀者處理行動版時，發現 Adsense 若改用「自適應(RWD)廣告單元」，效果會比想像中來得好。使用原始固定尺寸的廣告時，在不同行動裝置的效果都不一樣，小尺寸手機有可能超出頁面，而在大尺寸裝置或平板，則可能版面顯得空曠。總之，有一好就沒兩好。
那麼本篇就來分享測試心得，並舉例說明其優點。
(圖片出處: pixabay.com)
一、Adsense 固定尺寸的效果
1. 手機版尺寸
Adsense 在行動裝置推薦的廣告尺寸有兩種：
- 320 x 100
- 300 x 250
這兩個尺寸的寬度，都不超過 320px 的原因是，市面上最小的手機顯示尺寸為 480 x 320，在考量手機直立使用的情況下，320px 是讓版面正常顯示的最大寬度。
只不過這樣的尺寸，在手機橫擺、或大尺寸行動裝置的螢幕上，效果不太好。
上圖為模擬 iPhone 6s 的效果，紅框部份為原本 320x100 應顯示的範圍，這樣的效果已經讓廣告區塊顯得空曠了，結果剛好又遇到 320x100 的廣告額度用光，只能顯示 320x50 的廣告，整個版面顯得又更突兀了。
2. 非手機版尺寸
什麼情況下使用者會拿 "非手機版的廣告尺寸" 來用呢？最常見的就是在文章中安插了 336x280 這樣的尺寸，當然這樣的考量主要是為了 "網頁版" 的效果。很可惜副作用就是，在小尺寸手機上，這個廣告就會超出頁面了。
上圖為模擬 iPhone4 直立的效果，在沒有使用 RWD 廣告的情況下，正方形區塊的廣告超出了頁面範圍，讓版面顯得不美觀。
這個舉例並非文章中的版面，而是另一個更常見的情形，在網站底部放置的 Adsense 通用廣告，可讓 "網頁版" 及 "手機版" 都顯示這個廣告。
同樣是有一好沒有兩好，共同使用的廣告單元，在網頁版可正常顯示，但在手機版可能就會破壞版面了。
二、自適應廣告的副作用
當初沒有考慮自適應廣告的原因，其中一點是怕誤觸規定，請參考「Adsense 廣告尺寸及版面配置優化技巧整理」→「四、補充事項」→「3. 行動版注意事項」，一進入行動版頁面後，若出現 300x250 這個尺寸的廣告，是違規的行為，這件事知道的讀者並不多，WFU 接觸過的案主曾有因為這一點而被停權。
因為怕「自適應廣告」自作主張，在一進入行動版頁面後，自動產生了像 300x250 這樣的大廣告，所以才會不敢嘗試這種廣告。
不過這次幫讀者處理行動版時，發現「自適應廣告」已經將這個因素考慮進去，一進入行動版頁面出現的廣告，會自動顯示小廣告，後面會舉實例展示。
這麼一來，我的疑慮就消除了。不過「自適應廣告」還是有些副作用，以下摘錄「Adsense 官網」的訊息：
- 在設備屏幕方向改變之後加載新廣告時，我們會緩存之前展示的原始廣告。如果設備隨後又改用原先的屏幕方向，我們將再次展示原來的廣告，而不是加載其他新廣告。
- 因屏幕方向改變而刷新廣告的行為會產生額外的廣告請求，您可能會發現每千次展示收入和點擊率指標存在輕微下滑的現象。但請放心，您的整體收入不會受到負面影響。
- 您的網站使用第三方 JavaScript。如果您的網站使用在自適應廣告代碼之前執行的腳本（例如為了在網頁完全加載之前隱藏網頁中的廣告），我們的廣告代碼將無法計算適合自適應廣告單元的尺寸。在這種情況下，您需要使用我們的高級自適應代碼，並使用 CSS 媒體查詢來設置廣告單元的尺寸。
- 父級容器未設置寬度。如果您將自適應廣告代碼放在未設置明確寬度的父級容器內（例如浮動元素內），我們的廣告代碼將無法計算適合自適應廣告單元的尺寸。在這種情況下，您需要修改代碼並使用 CSS 媒體查詢來設置父級容器的尺寸。
前兩點的意思是，行動裝置曾轉過方向的話，會重新載入適當尺寸的廣告，而導致 Adsense 後台統計數據失真。
後面兩點一般的讀者應該比較少會遇到，通常是自訂版面、常修改範本才會遇到，不過這類的讀者應該是有辦法自行解決。
另外的缺點是，非官方行動版建議的尺寸(例如 320x100、300x250)，廣告數量會比較少，熟客比較會常看到一樣的廣告。這一點要藉由修改程式碼才能改善，後面會有技巧說明。
三、各種 RWD 效果
以下借「熊本一家の生活紀實」的行動版頁面來舉例，展示各種 RWD 廣告的效果：
1. 第一個畫面的廣告尺寸
上圖為模擬 iPhone4 直立的畫面(320x480)，進入行動版後，由於這個版型，左右邊界設定了 padding: 10px，可用的版面寬度剩下 300px，第一個廣告不足以顯示 320x100 尺寸，於是自適應廣告自動選了大約是 "300x50" 這樣的尺寸來顯示(這個位置不會選擇大尺寸廣告來顯示)，以符合頁面寬度。
同一個頁面將 iPhone4 橫擺後(480x320)，同樣位置的這個廣告，會重新展示另一個廣告，也就是不重整頁面的情況下，有兩次廣告展示機會。
而且版面重新計算的結果，為了符合頁面寬度，這次系統自動選了 "460x100" 這樣的尺寸來展示。
2. 其餘的廣告尺寸效果
這個板面的設計是，每隔三篇文章放一個自適應廣告，這次改用 iPhone 6s(414x736) 來模擬：
上圖可看到手機直立的效果，第一個文章之間的廣告、與第二個文章之間的廣告，尺寸不一定會一樣，但都會符合頁面寬度。
第一個紅框的廣告尺寸為 394x62，第二個紅框的廣告為 394x272。
上圖為手機橫躺的效果，由於這個橫躺的寬度比較少見，大尺寸的廣告比較少，多半出現較窄的廣告。
第一個紅框的廣告尺寸為 647x60，並沒有完全符合頁面寬度，但至少會盡量以較大的寬度呈現，並且置中。
第二個紅框的廣告為 736x60，這個就有符合版面寬度了。
從本篇以上的所有舉例可看到，展示的廣告會盡量符合頁面寬度，從而讓我們的行動版版面效果保持美觀，比較不會有突兀的廣告尺寸出現。
四、安裝及修改自適應 Adsense 廣告
看了本篇的效果，如果要安裝 RWD 廣告也很簡單，請參考這篇官網說明即可：
其實自適應廣告也能調整尺寸，也就是說，若覺得某些 RWD 廣告的尺寸比較罕見，導致出現的廣告都是那幾個，那麼可以修改程式碼，強制出現自訂的尺寸。請參考這篇官網說明：
簡單舉例幾個狀況：
- 預設的語法參數
data-ad-format 字串值為 "auto"，預設會出現扁平的廣告尺寸(跟字串值 "horizontal" 的效果一樣)。 - 把
data-ad-format 值改為 "rectangle"，就會出現大矩形、符合區塊寬度的廣告。 - 把
data-ad-format 值改為 "vertical"，就會出現直立、符合區塊寬度的廣告。 - 也可為
ins 元素加上 CSS 樣式，例如設定高度 height:250，那麼就會出現這個高度的自適應寬度廣告。
經過調整後的自適應 Adsense 廣告，相信就能既兼顧版面美觀，又能保持廣告投放的彈性，不會常常出現一樣的廣告了。
更多 Adsense 相關文章：
感謝板大協助呀！＾＾
回覆刪除