2012年11月1日 星期四

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

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

Wayne Fu 0 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 系列文章:
0 0
如這篇文章對你有幫助,歡迎「分享」到 FB、「追蹤」粉絲團、「訂閱」最新文章

沒有留言:

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題可至「Blogger 社團」提問。
◎ 請避免使用 Safari 瀏覽器,否則無法登入 Google 帳號留言(只能匿名留言)!
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」;或參考「Blogger 行動版範本修改技巧 」,或本站 Blogger 行動版標籤相關文章。
◎ 非官方範本問題、或貴站為商業網站,請參考「Blogger 免費諮詢 + 付費諮詢
◎ 若是使用官方 RWD 範本,請參考「Blogger 推出全新自適應 RWD 官方範本及佈景主題」→ 不建議對範本進行修改!
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。

TOP