[小工具]Blogger「單篇文章瀏覽數」更新版﹍Google Analytics應用

(Pic from: psdgraphics.com,freevectorgraphics.org)2015.3.27 公告：由於 Google 試算表全面強制升級，本篇的程式碼已經無效，請前往新版安裝網頁「Blogger 單篇文章瀏覽數 V2」。


舊版「讓Blogger能顯示單篇文章瀏覽數」使用了第三方的服務 OOcharts，由於從 2013/7/22 開始其改為收費服務，曾安裝過舊版的讀者，此功能已經無法再生效。

這次的更新版使用了不同的解決方案，利用 Google 試算表來存取 Google Analytics 的資料，再將文章瀏覽數據從試算表讀到網頁來顯示。這樣的解決方式反而比舊版的存取速度更快(非外部伺服器)、更安全(Google 不會收費)。

效果就像首頁文章右上角、每篇文章右上角、及文末文章資訊區所顯示的文章計數器，而安裝的整個流程請詳讀本文的說明。


一、準備動作

首先必須在網站安裝 Google Analytics 與建立 Google 試算表檔案，Google Analytics 的安裝在網路上可以找到許多教學。

接著建立 Google 試算表的部分，請參考「如何將 Google Analytics 數據同步到 Google 試算表」的兩篇系列文，按照以下步驟的流程：

1.「(一) 資料查詢與身份認證」→「三、Google 試算表的 GA 參數實例」→ 這一段的步驟做到建立試算表副本完畢即可，之後的參數說明可暫時略過。

接著完成「四、GA 身份認證 API」的所有動作。

2.「(二)試算表操作」→請完成全部的流程。



二、安裝程式碼

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

以下的程式碼可放在文章區塊中、任何想顯示文章瀏覽數的位置。不過對於不熟 Blogger 範本內容的讀者，可能會是個難題。如果不清楚想擺什麼位置，建議可參考以下文章──

• 「Blogger 單篇文章瀏覽數」→「四、擺放位置」
• 「Blogger 範本__(三)文章及留言區塊的程式碼」

若曾安裝過舊版請將舊版程式碼全部移除；以下請在範本中欲顯示文章瀏覽數的地方，加入程式碼：


以上 N 行與 P 行為了節省空間，將程式碼壓縮了。先不要存檔，還有重要參數要改，請見以下行號的說明──

J：這是最重要的參數，請參考「如何將 Google Analytics 數據同步到 Google 試算表__(二)試算表操作」→「三、利用 js 讀取 Google 試算表資料」→ B 點紅色底線字串，請將自己的試算表字串置換此行的綠色字串。

以上 J 行為最重要的參數，若無其他需求可直接存檔，可看本站文章右上角及文末資訊區的文章瀏覽數效果，也可按「首頁」或「文章標籤」看效果，讓訪客有參考的依據。


若有其他需求請繼續參考以下行號的修改──

K：藍色圖片網址可改為自訂圖案網址。

L：藍色的數字如改成其他數字，瀏覽數據就會乘以多少。例如改成 1.5 就會乘以 1.5 倍；改成 5 就會乘以 5 倍。至於為何加入這個參數的功能，請參考「Blogger 後台文章瀏覽數與 Google Analytics 數據差別很大的原因」

B：這一行裡面 style 裡的參數可自行修改 CSS 樣式，例如想要將位置放在最右邊，可加入 float: right; 這樣的參數；而 title 裡面要顯示的字串可自行修改。

B & I：這兩行有同樣的綠色字串 "pv1"，如果一篇文章只有一個地方想顯示文章瀏覽數，就不必變更；若有第二個以上的地方想顯示文章瀏覽數，請將這兩個字串改為不同的參數，例如 "pv2"，然後再將全部程式碼複製到要顯示的位置即可。 請按照以下的方式：(2013.8.26 修訂)

1. 要顯示的位置請貼上以下程式碼，綠字部分的 id 每個位置都不能相同：

<span id="pv2" title='文章瀏覽數'></span>

2. 程式碼 P 行的最後一小段內容 document.getElementById(g).innerHTML=b};，請新增以下紅、綠字的部分：

document.getElementById(g).innerHTML=b;document.getElementById("pv2").innerHTML=b};
請注意：

• 紅色字串最前面有個分號
• 最後面的 }; 是黑字，代表為原程式碼
• 綠字部分的 id 要與第 1 點相同

三、小結

這個更新版的安裝設定步驟，其實也是不下於舊版；不過好處是，若是有安裝過舊版，可以非常明顯感受到顯示速度快很多，這就是不依賴外部伺服器或外掛的優點。


更多實用工具：

• 本站使用的 Blogger hack 及工具整理