Blogger 放置 Google AdSense 自訂廣告尺寸大小

大致在五月左右在 Blogger 做了測試,發現 Google AdSense廣告單元現在能夠自訂廣告的寬高尺寸大小了!以矩形廣告來觀察,一般傳統的廣告單元能夠使用的尺寸只有「300x250 或 336x280」,廣告在呈現時於靈活度上就有些許的限制。

經由本篇設置,若是自訂尺寸以「高 300」當作矩形廣告高度基底的話,廣告寬度則可以依自己網站模板的橫寬,做自由變化的設定;經由觀察後發現,設定以「640x300」當作廣告單元呈現的範圍,約末會有以下幾種廣告尺寸變化。

當基本的「336x280」大矩形廣告不出現時,AdSense 會推送「300x250」的中矩形廣告及新尺寸「435x300」和「360x300」多媒體廣告,若以上四種廣告大小都沒出現時,則會推送「寬 640x高 300 以內」的文字廣告。

補充 ( 2015/09/01 ):站內找資料時,發現新的多媒體廣告尺寸「640x165」。
補充 ( 2015/09/05 ):新的多媒體廣告尺寸「640x300」。

Blogger 放置 Google AdSense 自訂廣告尺寸大小_001

接下來,要開始動工了!若你的 Blogger 範本為自適應版型,也可以參考「自適應網站安裝 AdSense 回應式廣告,三分鐘搞定」做更靈活的響應式廣告配置應用。



多媒體與文字廣告目前有以下幾種樣式呈現

「336x280、300x250、360x300」
Blogger 放置 Google AdSense 自訂廣告尺寸大小_002
一般矩形廣告



「435x300」
Blogger 放置 Google AdSense 自訂廣告尺寸大小_003
新尺寸多媒體廣告



「640x300、640x190」文字廣告
Blogger 放置 Google AdSense 自訂廣告尺寸大小_004
( 依設置的寬度而定,寬版文字廣告 )



「640x300」列表橫式文字廣告
Blogger 放置 Google AdSense 自訂廣告尺寸大小_005
 ( 依設置的寬度而定,列表式文字廣告,樣式一)



「640x300」列表直式文字廣告
Blogger 放置 Google AdSense 自訂廣告尺寸大小_006
 ( 依設置的寬度而定,列表式文字廣告,樣式二)



「640x165」多媒體廣告 ( 2015/09/01 補充 )
Blogger 放置 Google AdSense 自訂廣告尺寸大小_007
新尺寸多媒體廣告



「640x300」多媒體廣告 ( 2015/09/05 補充 )
Blogger 放置 Google AdSense 自訂廣告尺寸大小_008
新尺寸多媒體廣告




設置流程

  1. 小工具安裝
  2. 安裝在文章中
  3. 加入 Adsense 異步腳本 js

設置前準備

如果需將廣告安裝於文章中,若對編譯 Blogger 的 HTML 模板還不太熟悉,建議先執行『備份 Blogger 模板 (範本)』的動作,以防原始模板資料遺失。



設置教學

Step 1

小工具安裝

將以下代碼中的「ad-client、ad-slot」做更換,並黏貼於小工具中廣告即可置中呈現;『width 為寬、height 為高』可依自己的版型做調整。


<div class="ads" style="width:100%; height:auto; margin:10px 0px 10px 0px; position:relative; text-align: center;">
<ins class="adsbygoogle"
     style="display:inline-block;width:640px;height:300px;"
     data-ad-client="ca-pub-123456789"
     data-ad-slot="123456789"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>



Step 2

安裝在文章中

若需安裝在文章中,可以試著搜尋範本中的『<data:post.body/>』,整個 Blogger 範本若沒更動過大致會有三處;第一個為行動模板、第二個為電腦版模板文章以外的頁面包含「靜態頁 (/p/xxx.html)、首頁、存檔頁(/2015/03/xxx.html) . . .」、第三個為電腦版模板文章頁。

將「STEP 1」代碼經由「這裡」轉換,黏貼在第三個『<data:post.body/>』的上方廣告則會出現在文章上方,黏貼在下方則廣告會出現在文章的下方。

如果你的 HTML 範本中只有兩個『<data:post.body/>』,那就將代碼黏貼在第二個『<data:post.body/>』上方或下方



Step 3

加入 Adsense 異步腳本 js

接著在『</body>』之前放入下列 Adsense 異步腳本 js,就完成設定了。

<script async='async' src='//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js' type='text/javascript'/>



小結

廣告寬度定在「640px」是因為目前網站圖片寬度皆為「640px ( 除了手機文章之外 )」,這樣的配置讓整體畫面較為一致,若以後有推播「寬 640」的矩形多媒體廣告,那就不用再改了。



相關文章

Blogger 繼續閱讀隱藏廣告和物件

Blogger 電腦版行動版文章中安裝 AdSense 回應式廣告

自適應網站安裝 Google AdSense 回應式廣告,三分鐘搞定!

[教學] Blogger 文章中任意位置加入Google AdSense 廣告


留言

  1. 感謝提供測試心得,原來 640x300 還能出現這麼多種形式,只不過我怎麼 reload,多半看到 336x280 圖片廣告跟 640 x300 的文字廣告~~可能我 reload 的次數還不夠多 XD

    回覆刪除
    回覆
    1. 360x300 也蠻多的,435x300 及 640x300 多媒體,這兩個沒記錯應該是在近假日的時候會推送,可能跟時間點有關係!

      航海王的 640x165,可能是因為常在 Youtube 上聽航海王音樂,所以在測試時,才常推播到網站中。

      對了,一開始,真的!大部份只推文字形態的廣告!放久後,在不一樣的時間點多試幾次,應該就能看到不同結果 :)

      刪除
◎ 留言板中提問「代碼」問題,可至『留言代碼轉換器』轉換代碼。

張貼留言

繼續閱讀:

這個網誌中的熱門文章

[教學] LINE 電腦版行動條碼登入設定

[外掛] Chrome 擴充:ColorPick Eyedropper 網頁色碼擷取器

[教學] 使用 PuTTYgen 產生 SSH 連線 RSA、DSA 公鑰與私鑰

Line 分享按鈕:文章分享語法相容網頁版、行動裝置、APP

[教學] Twitter 手機簡訊、APP 兩步驟驗證設定

[教學] Google Compute Engine ( GCE ) 使用 PuTTY SSH 登入實例

[教學] Blogger 自訂網址綁定自有域名

[外掛] Chrome 擴充:Window Resizer 瀏覽器視窗大小調整比例

[密技] Windows OneDrive Dropbox 移至 SD 卡,讓 SSD 使用壽命更長久

[教學] Facebook APP ID 申請,建立應用程式取得 APP 密鑰