2012年11月16日

[教學]Blogger 自訂安裝 Google Adsense 的各種位置及方式

A+

(Pic from: Installation sous Linux : Autopackage)
本篇的內容為紀錄我安裝 Google Adsense 各種方式及位置的筆記;因篇幅及方便閱讀的關係,如何運用本篇的筆記來進行部落格廣告位置優化的各種應用,留待下一篇詳述。

一般而言,Google Adsense 最簡單的安裝方式為使用官方的小工具,而小工具能拖曳到的位置有限,例如拉到側邊欄、導覽列上方、文章區塊上方、文章區塊底部等,簡言之就是所有「文章區塊」以外的位置。不過想要找出最好的擺放位置,只測試這幾個地方是不夠的,以下提供我安裝到範本中「文章區塊」的位置、以及限制各種條件下的方法。


一、範本內的安裝法

如果不知道怎麼取得安裝碼的話,請參考「官網說明」。安裝碼大致長得像以下這樣:

<script type="text/javascript"><!--
google_ad_client = "ca-pub-8931283480311879";
/* 468 ad */
google_ad_slot = "5644049134";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

而要裝在範本裡的「文章區塊」需要做幾個步驟的整理:

A. 必須限定在「文章」頁面時才顯現,否則在首頁也出現的話,由於首頁可能顯示不只三篇文章,而 Google Adsense 限制一個頁面只能出現三個 "內容廣告單元"(可參考「官網說明」),那麼就會違反規定而被處罰了。

B. 把紅字部分的符號刪除(綠字的註解若不需要也可刪除)

C. 想要版面好看的話得加上置中、空行等語法(有其他樣式需求請自行調整下面的 style 參數)。

經過以上 A~C 處理後,以下是我會使用的安裝碼:

<b:if cond='data:blog.pageType == "item"'>

<p style="text-align: center;">
<script type="text/javascript">
google_ad_client = "ca-pub-8931283480311879";
google_ad_slot = "5644049134";
google_ad_width = 468;
google_ad_height = 60;
</script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</p>

</b:if>

以上就是可放到範本中「文章區塊」內的程式碼樣式,各個重要參數請改為自己的(不小心複製成我的就沒有用了)。接著來看看適合擺放的位置(後台範本 → 編輯 HTML)──

1. 文章標題前後:文章標題的程式碼大概長得像以下──

<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

想把廣告放在文章標題之前,就把前面整理過的安裝碼放在以上程式碼的前一行;想放在文章標題之後,就把前面整理過的安裝碼放在以上程式碼的後面。

2. 文章內容之後:想把廣告放在文章結尾之處,那麼得找到以下程式碼──

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>

以上的程式碼就是「繼續閱讀」的程式碼,把前面整理過的安裝碼放在以上程式碼的後一行,廣告就會接在文章末端出現了。

3. 留言框之後:如果要把廣告放在「留言框」之後、「此文章的連結」之前的位置,請找到以下程式碼──

<div id='backlinks-container'>
應該會找到兩個,在這兩個位置的前一行加入前面整理過的安裝碼即可。



二、文章內的安裝法

將程式碼手動一篇篇裝在文章內算是苦差事,尤其是網站文章數量很多時,因此是否用這個這個安裝法,端視該文章的熱門程度而定。

另外,裝在文章內的程式碼不需要「判斷是否為文章頁面」,因此安裝碼維持以下形式即可──

<p style="text-align: center;">
<script type="text/javascript">
google_ad_client = "ca-pub-8931283480311879";
google_ad_slot = "5644049134";
google_ad_width = 468;
google_ad_height = 60;
</script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</p>

以上程式碼可放在文章中任何地方,儲存前需檢查一下「文章設定」→「選項」→「撰寫模式」→ 勾選「解譯輸入的 HTML」


三、各種條件下的安裝法

1. 限定標籤:

準備動作 A:首先收集一篇文章的所有標籤名稱,可在「一、範本內的安裝法」→「1. 文章標題」的程式碼之前先放以下程式碼──

<script>
var adsensePostLabels = [];
<b:if cond='data:blog.pageType == "item"'>
<b:loop values='data:post.labels' var='label'>
adsensePostLabels.push("<data:label.name/>")
</b:loop>
</b:if>
</script>

準備動作 B:把原本的廣告安裝碼整理成這個形式──

'<scr' + 'ipt type="text/javascript">google_ad_client = "ca-pub-8931283480311879";google_ad_slot = "5644049134";google_ad_width = 468;google_ad_height = 60;</scr' + 'ipt><scr' + 'ipt type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></sc' + 'ript>'
以上有兩個重點,第一點是把程式碼的換行全部去掉,讓所有字串連成一行;這一點千萬別太相信自己的眼睛,最好使用像「notepad++」這類的編輯軟體檢查一下是否全部程式碼連為一行,為了這一點我在需要處理 script 的案例都曾花費非常多的 debug 時間。

第二點是把所有 "script" 字串拆開;這個技巧的原理曾在「部落格廣告(BloggerAds)卡住網頁載入的完整解決方案」→「二、Iframe 安裝方式最佳化」→「2. 變更 script 字串的技巧」解釋過。

完成以上準備動作後──

(1) 排除特定標籤:例如一些站務、公告性質的內容,文章區塊不適合放廣告,或是有特殊需求、某類文章不想放廣告,在「文章區塊」的範圍內可於自訂位置放以下程式碼──

<b:if cond='data:blog.pageType == "item"'>
<p style="text-align: center;">
<script type="text/javascript">
//<![CDATA[
(function() {
var i, ok = "ok", l = adsensePostLabels.length;
for (i = 0; i < l; i++) {
if (adsensePostLabels[i] == "站務") {ok="no"; break;}
}
if (ok == "ok") {document.write(準備動作 B 的程式碼);}
} )();
//]]>
</script>
</p>
</b:if>

藍字部分請填入「準備動作 B」的程式碼,以上的程式碼會讓標籤標籤為 "站務" 的文章均不顯示廣告,其他所有文章都會顯示廣告;可把字串 "站務" 置換為自己的標籤。

(2) 指定特定標籤:假如只有某些性質的文章才想放廣告,例如本站標籤為 "三國志" 的文章才放廣告,那麼將程式碼改為以下──

<b:if cond='data:blog.pageType == "item"'>
<p style="text-align: center;">
<script type="text/javascript">
//<![CDATA[
(function() {
var i, l = adsensePostLabels.length;
for (i = 0; i < l; i++) {
if (adsensePostLabels[i] == "三國志") {
document.write(準備動作 B 的程式碼);
break;
}
}
} )();
//]]>
</script>
</p>
</b:if>

藍字部分請填入「準備動作 B」的程式碼,以上的程式碼會讓標籤為 "三國志" 的文章才顯示廣告,其他所有文章都不顯示廣告;可把字串 "三國志" 置換為自己的標籤。


2. 限定文章標題:實際上本站並沒有 "三國志" 這個標籤,因為使用了「多層樹狀標籤」,所以三國志相關文章有八個標籤,此時若使用「特定標籤」的方法則太麻煩,而從「文章標題」下手做條件篩選會比較簡單,在「文章區塊」的範圍內可在自訂位置放以下程式碼──

<b:if cond='data:blog.pageType == "item"'>
<p style="text-align: center;">
<script type="text/javascript">
(function() {
var t = "<data:post.title/>";
//<![CDATA[
if (t.search("三國志") > -1) {
document.write(準備動作 B 的程式碼);
}
} )();
//]]>
</script>
</p>
</b:if>

限定文章標題的例子不像前兩個標籤的例子需要作準備動作,但藍字部分請依然填入「準備動作 B」的程式碼;以上的程式碼會讓標題含 "三國志" 字串的文章才顯示廣告,其他文章不顯示廣告;可把字串 "三國志" 置換為自己要篩選的文章標題關鍵字。

此細看「//<![CDATA[」的位置,與前兩個範例不一樣,在這個例子中一定要放在 <data:post.title/> 之後的位置,才能抓得到文章標題,這是 Blogger 語法微妙的地方。



3. 限定頁面不顯示:(2014.7.9 新增)

如果要特定頁面不執行 Adsense 程式碼的話,請按以下程式碼修改,並放在範本中

<p style="text-align: center;">
<script type="text/javascript">
(function() {
var t = "<data:blog.url/>";
//<![CDATA[
if (t.search("/2012/11/google-adsense-custom-installation.html") < 0) {
document.write(準備動作 B 的程式碼);
}
} )();
//]]>
</script>
</p>

紅色字串使用本篇文章網址作為舉例,就是去除網域之後的字串,請依照同樣的邏輯,將紅色字串置換為自己不想顯示的頁面網址。以上程式碼代表,本篇文章的頁面不執行 Adsense 程式碼,本篇文章以外的所有頁面都會執行。



四、結語

以上的各種方法主要是因應本站需求而產生,不過對於下一篇的廣告位置優化過程,倒是具備以上的基礎知識會執行的比較快速,節省大量的實驗時間。因此若想要優化部落格廣告擺放位置的站長,可以試著先消化一下本文的內容。


Google Adsense 系列文章:

8 則留言:

  1. 我反應超慢的...
    昨天在介紹你的blogger給我同事的時候
    才突然發現這篇給了我新靈感

    回覆刪除
  2. <411679189779221679>(以上內容請勿刪除,從括號之後開始留言)謝謝推薦, 可是什麼靈感要說啊~不要賣關子喔!

    回覆刪除
  3. 我的blog廣告在版面上配置的靈感~
    順便問一下...我朋友說點廣告是直接把原有的頁面蓋掉...
    我試著點了我同事的發現也是這樣
    這個...有辦法改嗎?
    總覺得這樣來拜訪的網友就不會繼續留在自己的網誌上

    回覆刪除
  4. <6578579080683113400>(以上內容請勿刪除,從括號之後開始留言)google的結果是,使用者無法自行決定,adsense會根據地區決定是否另開視窗;詳細內容請參考「Blogger社群這個討論串

    回覆刪除
  5. 您好,請問我的廣告位置是放在 標頭下方 改如何 讓他在特定頁面或標籤 不顯示呢?

    http://i.imgur.com/NJw8qHI.png

    不好意思 若可以的話麻煩指點一下><

    回覆刪除
  6. <6884344854698258203>(以上內容請勿刪除,從括號之後開始留言)
    1. 標頭在範本中的位置請參考「Blogger 範本__(二)標頭、導覽列、側邊欄、頁尾區塊的程式碼

    2.「特定頁面不顯示」→ 請見 2014.7.9 新增的內容

    3.「特定標籤不顯示」→ 請見「三、各種條件下的安裝法」→「1. 限定標籤」,但限定標籤的時候,你無法將程式碼放在標頭,只能如文中所述,放在文章區塊。而文章區塊的程式碼請參考「文章及留言區塊的程式碼

    回覆刪除
  7. 感謝你得答覆。

    另外我看到一篇 http://freebloggingeasy.blogspot.tw/2010/09/how-to-exclude-adsense-ads-from.html

    若用它的方法 是否可行?


    <8599411321992335916>(以上內容請勿刪除,從括號之後開始留言)

    回覆刪除
  8. <1769384586368061772>(以上內容請勿刪除,從括號之後開始留言)意思是,我幫你把程式碼寫出來,還得幫你測試別人的程式碼可不可行?

    回覆刪除

張貼留言注意事項:

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