2016年2月20日

Blogger 行動版改用自適應(RWD) Adsense 廣告, 讓版面更美觀

A+
adsense-rwd-Blogger 行動版改用自適應(RWD) Adsense 廣告, 讓版面更美觀最近幫讀者處理行動版時,發現 Adsense 若改用「自適應(RWD)廣告單元」,效果會比想像中來得好。

使用原始固定尺寸的廣告時,在不同行動裝置的效果都不一樣,小尺寸手機有可能超出頁面,而在大尺寸裝置或平板,則可能版面顯得空曠。總之,有一好就沒兩好。

那麼本篇就來分享測試心得,並舉例說明其優點。

(圖片出處: pixabay.com)


一、Adsense 固定尺寸的效果


1. 手機版尺寸

Adsense 在行動裝置推薦的廣告尺寸有兩種:

  • 320 x 100
  • 300 x 250

這兩個尺寸的寬度,都不超過 320px 的原因是,市面上最小的手機顯示尺寸為 480 x 320,在考量手機直立使用的情況下,320px 是讓版面正常顯示的最大寬度。

只不過這樣的尺寸,在手機橫擺、或大尺寸行動裝置的螢幕上,效果不太好。

adsense-rwd-320x50-bad-Blogger 行動版改用自適應(RWD) Adsense 廣告, 讓版面更美觀

上圖為模擬 iPhone 6s 的效果,紅框部份為原本 320x100 應顯示的範圍,這樣的效果已經讓廣告區塊顯得空曠了,結果剛好又遇到 320x100 的廣告額度用光,只能顯示 320x50 的廣告,整個版面顯得又更突兀了。


2. 非手機版尺寸

什麼情況下使用者會拿 "非手機版的廣告尺寸" 來用呢?最常見的就是在文章中安插了 336x280 這樣的尺寸,當然這樣的考量主要是為了 "網頁版" 的效果。很可惜副作用就是,在小尺寸手機上,這個廣告就會超出頁面了。

adsense-rwd-300x250-bad-Blogger 行動版改用自適應(RWD) Adsense 廣告, 讓版面更美觀

上圖為模擬 iPhone4 直立的效果,在沒有使用 RWD 廣告的情況下,正方形區塊的廣告超出了頁面範圍,讓版面顯得不美觀。

這個舉例並非文章中的版面,而是另一個更常見的情形,在網站底部放置的 Adsense 通用廣告,可讓 "網頁版" 及 "手機版" 都顯示這個廣告。

同樣是有一好沒有兩好,共同使用的廣告單元,在網頁版可正常顯示,但在手機版可能就會破壞版面了



二、自適應廣告的副作用


當初沒有考慮自適應廣告的原因,其中一點是怕誤觸規定,請參考「Adsense 廣告尺寸及版面配置優化技巧整理」→「四、補充事項」→「3. 行動版注意事項」,一進入行動版頁面後,若出現 300x250 這個尺寸的廣告,是違規的行為,這件事知道的讀者並不多,WFU 接觸過的案主曾有因為這一點而被停權

因為怕「自適應廣告」自作主張,在一進入行動版頁面後,自動產生了像 300x250 這樣的大廣告,所以才會不敢嘗試這種廣告。

不過這次幫讀者處理行動版時,發現「自適應廣告」已經將這個因素考慮進去,一進入行動版頁面出現的廣告,會自動顯示小廣告,後面會舉實例展示。

這麼一來,我的疑慮就消除了。不過「自適應廣告」還是有些副作用,以下摘錄「Adsense 官網」的訊息:

  1. 在設備屏幕方向改變之後加載新廣告時,我們會緩存之前展示的原始廣告。如果設備隨後又改用原先的屏幕方向,我們將再次展示原來的廣告,而不是加載其他新廣告。
  2. 因屏幕方向改變而刷新廣告的行為會產生額外的廣告請求,您可能會發現每千次展示收入和點擊率指標存在輕微下滑的現象。但請放心,您的整體收入不會受到負面影響。
  3. 您的網站使用第三方 JavaScript。如果您的網站使用在自適應廣告代碼之前執行的腳本(例如為了在網頁完全加載之前隱藏網頁中的廣告),我們的廣告代碼將無法計算適合自適應廣告單元的尺寸。在這種情況下,您需要使用我們的高級自適應代碼,並使用 CSS 媒體查詢來設置廣告單元的尺寸。
  4. 父級容器未設置寬度。如果您將自適應廣告代碼放在未設置明確寬度的父級容器內(例如浮動元素內),我們的廣告代碼將無法計算適合自適應廣告單元的尺寸。在這種情況下,您需要修改代碼並使用 CSS 媒體查詢來設置父級容器的尺寸。

前兩點的意思是,行動裝置曾轉過方向的話,會重新載入適當尺寸的廣告,而導致 Adsense 後台統計數據失真。

後面兩點一般的讀者應該比較少會遇到,通常是自訂版面、常修改範本才會遇到,不過這類的讀者應該是有辦法自行解決。

另外的缺點是,非官方行動版建議的尺寸(例如 320x100、300x250),廣告數量會比較少,熟客比較會常看到一樣的廣告。這一點要藉由修改程式碼才能改善,後面會有技巧說明。



三、各種 RWD 效果


以下借「熊本一家の生活紀實」的行動版頁面來舉例,展示各種 RWD 廣告的效果:

1. 第一個畫面的廣告尺寸

adsense-rwd-300x50-Blogger 行動版改用自適應(RWD) Adsense 廣告, 讓版面更美觀

上圖為模擬 iPhone4 直立的畫面(320x480),進入行動版後,由於這個版型,左右邊界設定了 padding: 10px,可用的版面寬度剩下 300px,第一個廣告不足以顯示 320x100 尺寸,於是自適應廣告自動選了大約是 "300x50" 這樣的尺寸來顯示(這個位置不會選擇大尺寸廣告來顯示),以符合頁面寬度。


adsense-rwd-460x100-Blogger 行動版改用自適應(RWD) Adsense 廣告, 讓版面更美觀

同一個頁面將 iPhone4 橫擺後(480x320),同樣位置的這個廣告,會重新展示另一個廣告,也就是不重整頁面的情況下,有兩次廣告展示機會

而且版面重新計算的結果,為了符合頁面寬度,這次系統自動選了 "460x100" 這樣的尺寸來展示。


2. 其餘的廣告尺寸效果

這個板面的設計是,每隔三篇文章放一個自適應廣告,這次改用 iPhone 6s(414x736) 來模擬:

adsense-rwd-iphone6s-1-Blogger 行動版改用自適應(RWD) Adsense 廣告, 讓版面更美觀

上圖可看到手機直立的效果,第一個文章之間的廣告、與第二個文章之間的廣告,尺寸不一定會一樣,但都會符合頁面寬度。

第一個紅框的廣告尺寸為 394x62,第二個紅框的廣告為 394x272。


adsense-rwd-iphone6s-2-Blogger 行動版改用自適應(RWD) Adsense 廣告, 讓版面更美觀

上圖為手機橫躺的效果,由於這個橫躺的寬度比較少見,大尺寸的廣告比較少,多半出現較窄的廣告。

第一個紅框的廣告尺寸為 647x60,並沒有完全符合頁面寬度,但至少會盡量以較大的寬度呈現,並且置中。

第二個紅框的廣告為 736x60,這個就有符合版面寬度了。

從本篇以上的所有舉例可看到,展示的廣告會盡量符合頁面寬度,從而讓我們的行動版版面效果保持美觀,比較不會有突兀的廣告尺寸出現



四、安裝及修改自適應 Adsense 廣告


看了本篇的效果,如果要安裝 RWD 廣告也很簡單,請參考這篇官網說明即可:



其實自適應廣告也能調整尺寸,也就是說,若覺得某些 RWD 廣告的尺寸比較罕見,導致出現的廣告都是那幾個,那麼可以修改程式碼,強制出現自訂的尺寸。請參考這篇官網說明:



如果覺得官網說明文謅謅,那麼也可參考友站的這篇修改心得:



經過調整後的自適應 Adsense 廣告,相信就能既兼顧版面美觀,又能保持廣告投放的彈性,不會常常出現一樣的廣告了。


更多 Adsense 相關文章:

2 則留言:

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
提問請附網址、詳細描述狀況,如提供的資訊不足,則無法回覆。
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 若詢問 CSS 、非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 若發現留言不見了,通常是因為 "複製貼上" 的內容常被系統判定為垃圾留言,請不用擔心,我會定期將留言恢復。
◎ 本站「已關閉自刪留言功能」。