2013年7月1日 星期一

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

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

Wayne Fu 0 A+

(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 範本內容的讀者,可能會是個難題。如果不清楚想擺什麼位置,建議可參考以下文章──


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


以上 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 點相同



三、小結

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


更多實用工具:
0 0
如這篇文章對你有幫助,歡迎「分享」到 FB、「追蹤」粉絲團、「訂閱」最新文章
TOP