2013年1月1日 星期二

讓Blogger能顯示「單篇文章瀏覽數」__(一)準備動作

讓Blogger能顯示「單篇文章瀏覽數」__(一)準備動作

Wayne Fu 0 A+

(Pic from: psdgraphics.com,freevectorgraphics.org)
「單篇文章計數器」對大部分部落格而言,是個幾乎都會內建的功能。訪客從文章的瀏覽數,可以方便地辨識出哪些是比較熱門的文章,這是個重要的參考指標,相信也能增加新訪客留在網站的機率。可惜的是 Blogger 只在後台提供「單篇文章瀏覽數」,於網頁上並無法顯示此數據。

如果要裝「單篇文章計數器」這樣的外掛,網路上的選擇很多;只不過很久以前曾裝過「MyHotPost」這個國產計數器,稍微資深一點的部落客應該會知道,結果我才裝一陣子這個服務就掛了,當然所有的數據也都沒了。自此,非官方的外掛程式都很難得到我的信任,除非這個外掛伺服器有辦法跟 Google 的壽命並駕齊驅。

對於此功能,我想到的方法是從「Google Analytics」(本文以下簡稱 GA) 撈單篇文章數據,當然,Blogger 得先安裝 GA 才行。另外,由於 GA 數據不等於 Blogger 數據,建議先看「Blogger 後台文章瀏覽數與 Google Analytics 數據差別很大的原因」來給自己打預防針,以面看到兩者差異時衝擊太大!

以下按例先說明原理,想直接安裝此功能請跳「二、準備動作」。

2013.7.27 公告

本篇的程式使用了第三方的服務 OOcharts,由於從 2013/7/22 起已改為收費服務,此功能對免費使用者將無法再生效,請立即改用「Blogger 單篇文章瀏覽數__更新版


一、運作原理

1. Google Analytics:GA 的資料算是比較隱私,不允許所有人都能讀取。如果站長願意開放自己的 GA 資料,那麼得在程式碼裡加入自己的身份辨識碼,GA 才允許讓數據能讀取。

2. 身份辨識:正常申請身份辨識需利用「OAuth」,只是這還滿麻煩的,看這篇連結的內容就知道,這樣的教學文章無法達到普遍性,因此暫時放棄這個方式。

3. OOcharts:Google 到一個網站「OOcharts」,他提供了一個服務,代替我們做 GA 身份識別的動作,如此事情就簡單很多。而這麼做的風險是,OOcharts 畢竟不算知名網站,我們得提供他存取 GA 的權限,他才能代我們做身份辨識

我的想法是,自己也不是出名的網站,存取我的 GA 數據不覺得有什麼損失,因此倒是不會害怕。如果你的 GA 數據怕被第三者知悉,那麼建議得自行研究第 2 點所提的「OAuth」身份辨識了。

4. API:OOcharts 除了身份辨識,也提供了簡便的 API,能用 js 方便處理撈到的 GA 資料,還能產生圖表、表格等等,不過這些與本文無關,有興趣可自行研究「官方網站的範例」。

5. 產生單篇文章瀏覽統計數據:根據「Blogger 後台文章瀏覽數與 Google Analytics 數據差別很大的原因」→「二、網址參數的差異」,從 GA 撈到的數據,不同網址參數的文章瀏覽數,會被個別統計。

因此為了讓 GA 的數據貼近真實結果,除了利用 OOcharts API 撈出文章瀏覽數資料,還得再將同篇文章、但不同網址參數的所有數據,另行加總處理。

6. cheat 模式:考量到應該不少人看完 Blogger 數據,再看 GA 數據後心裡會產生芥蒂,因此另外提供自訂的參數,能夠對第 5 點產生的數據進行加權(講白話就是數據灌水)。


二、準備動作

1. 安裝 Google Analytics:如何安裝、操作 GA 並非本篇的主題,安裝的話可參考「這個網頁」,而操作的話請自行 google 一下了,網路上很多教學。

但若未曾安裝過 GA 或是剛裝 GA 沒多久,那麼或許安裝本篇功能的動作可以先暫緩,可先等 GA 累積了足夠的、或自認滿意的數據後,再來進行本篇剩餘步驟。


2. 申請 OOcharts 的 OOID:確認 GA 已經在 Blogger 正常運作後,接著就可讓「OOcharts」替我們進行站長身份辨識。請按以下步驟──

A:登入自己的 Google 帳號。

B:進入「這個網頁」,選擇建立自己 Blogger 的那個 Google 帳號




接著系統會要求存取 GA 、及其他的基本資料,必須按下「允許存取」




最後系統會產生一個 OOID,如下圖紅圈內的字串,請記下自己的字串,之後會用到。




3. 找出 Google Analytics Profile ID:這個 Profile ID 並非 GA 安裝碼的 ID(不是 UA-XXXXXXXX-X 這樣的 ID 字串),有兩種方法可以找出這個字串,請擇一使用:

A. 從官網選項找出:進入 GA 官網,登入帳號,選擇部落格後,以下以 GA 最近改版的介面來說明──



按上圖 A → B 的步驟,先按下「管理員」,再按下自己的名稱。




接著一樣按上圖 A → B 的順序,先按下「設定檔設定」,接著「設定檔編號」後面的那串八位數數字,就是自己部落格的 Google Analytics Profile ID,請把這數字記下來,之後會用到。


B.從網址找出:如果你的畫面跟我不一樣,覺得不容易找到這個 Profile ID 的話,另一個方法是,一樣進入 GA 官網,登入帳號,選擇部落格後,把網址複製到文書編輯軟體,格式大概像以下這樣:

https://www.google.com/analytics/web/?hl=zh-TW&pli=1#report/visitors-overview/aXXXXXXXXwXXXXXXXXpXXXXXXXX/

請注意網址最後是以 p 加上八個數字結尾(網址以 "X" 代替數字),將 p 後面的八位數字串記下,這就是該部落格的 Google Analytics Profile ID。


由於文章較長,為了便於閱讀分成兩篇,本篇的準備動作會得到「OOID」與「Google Analytics Profile ID」兩個字串,這兩個字串關係著身份辨識,下一篇的安裝碼會用到。


讓Blogger能顯示單篇文章瀏覽數」系列標題:
一、準備動作
二、安裝程式碼
三、Blogger 後台文章瀏覽數與 Google Analytics 數據差別很大的原因


➢➢ 快速選單:
0 0
如這篇文章對你有幫助,歡迎「分享」到 FB、「追蹤」粉絲團、「訂閱」最新文章

沒有留言:

張貼留言注意事項:

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

TOP