2015年11月18日

[Blogger] 將 Adsense 廣告放在標籤索引頁面實作

A+
google-adsense-index-page-Blogger 將 Adsense 廣告放在標籤索引頁面實作有的知名部落格會對標籤頁面的 Adsense 廣告,進行版面配置的最佳化,例如「重灌狂人」的標籤頁面是這麼安排的:

1. 文章區塊上方放置 Adsense 700 x 150

2. 隔三篇文章之後放置 Adsense 700 x 150

3. 再隔三篇文章之後放置 Scupio(酷比) 700 x 250

當然不是說這樣一定是收益最大化的配置,因為每個網站的格局、特性都不同,需要進行 A/B 交叉測試,才能找出最佳的結果。

Blogger 要在標籤索引(index)頁面自由擺放廣告,不是一件簡單的事,雖然我們過去已經學會使用「Blogger 七種頁面形態判斷語法」,但這還不足以處理所有的狀況。

本篇將以實例說明如何修改範本,讓 Adsense 廣告可以擺放在各種自訂位置,來方便執行 A/B 交叉測試。


<< 請注意!本篇文章含會員加值文章內容,需點數兌換 >>

(圖片出處: pexels.com)


一、Blogger 預設效果


1. 官方提供的效果

在不修改範本的情況下,其實也能在標籤索引頁面安插 Adsense:

blogger-adsense-below-post-Blogger 將 Adsense 廣告放在標籤索引頁面實作

參照上圖步驟:
  • A. 後台 → 收益 → Adsense
  • B. 在網誌上顯示廣告 → 勾選「是」
  • C. 下拉選單選擇「在我的文章下方顯示廣告」

儲存後,即可在標籤、索引等頁面,看到 Adsense 廣告出現在每篇文章的下方。而顯示的數量,會符合 Adsense 的規範,大致上一個網頁可出現三個 Adsense 廣告,因此最多可能會連續三篇文章的下方出現廣告(如果整個頁面其他地方都沒擺廣告的話)。


2. 官方效果的缺點

這個作法的缺點顯而易見:
  • 無法選擇自訂的廣告尺寸
  • 無法選擇廣告出現的位置
  • 無法將兩個廣告並排顯示
  • 無法放在自訂位置

對於喜歡安排自己版面的站長而言,相信不會想要選擇這個方案,除了效果不一定好,可能也會覺得版面難看。



二、自訂索引頁面廣告位置


以下的步驟,可將廣告擺放在標籤索引(index)頁面的任意位置:

1. 在修改範本之前,如果第一次安裝本站工具的讀者,建議先閱讀「備份範本的訣竅」系列文章。

2. 請到後台「範本」→「編輯 HTML」,游標點進範本區塊,按 Ctrl-F 進行搜尋,想辦法找到以下這一段程式碼:

<b:if cond='data:post.isDateStart'>
&lt;div class=&quot;date-outer&quot;&gt;
</b:if>

3. 找到後,在這段程式碼的前一行,插入以下程式碼:


  • 這段程式碼只會讓廣告在標籤、索引頁面出現,首頁不會出現。若要讓首頁也出現,請移除藍色字串。
  • 綠色字串是廣告區塊的 CSS 參數,請根據自己的版面自行調整。
  • 紅字數字 1 代表會在第一篇文章之後出現廣告,請自行調整這個數字。
  • 紅色字串 "這裡擺放廣告安裝碼" 請改為自己的廣告安裝碼。如要擺放兩個廣告並列,可塞入兩組廣告安裝碼。

4. 修改完之後,先別存檔,從你插入的程式碼位置,在往上個 3~4 行左右,會看到這一行程式碼:

<b:loop values='data:posts' var='post'>
新增紅色字串如下:

<b:loop index='idx' values='data:posts' var='post'>
存檔後即可在標籤索引頁面看到效果,也可在 WFU BLOG 點擊任意標籤,觀看廣告出現的位置及效果。



三、索引頁面更多其他擺放位置


上述的程式碼,可將廣告放在標籤索引頁面的文章區塊,並指定安插在某篇文章,例如第 2 篇、第 5 篇等位置。如果想放在其他位置的話──

1. 文章區塊上、下方

最簡單的操作方法,從後台 → 版面配置 → 新增「HTML/Javascript」小工具,放入安裝碼 → 將小工具的位置,用滑鼠拖曳到「網誌文章」的上方或下方即可。


2. 文章自訂位置

如想放在文章區塊的特定位置,例如標題之前、繼續閱讀之後等等,過去寫了不少相關文章,可以逐一參考:


四、聯絡表單


加值文章關閉留言板功能,使用上有任何問題請用下面的表單與我聯繫:




更多 Adsense 相關文章: