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

(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 系列文章：