2013年7月27日

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

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



三、小結

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


更多實用工具:

53 則留言:

  1. 報告~~~我已經安裝好了,速度真的快了很多,跟網頁同時載入耶d(`・∀・)b
    回覆你在Google+提過的問題,我在 "工作表1" 能看到讀取的 GA 數據~完全沒問題。
    感謝WFU這麼好用的程式碼和詳細的安裝教學~

    回覆刪除
  2. <6110451710354513960>(以上內容請勿刪除,從括號之後開始留言)謝謝 Totoa 的測試 ^^

    原本的安裝方法還需要自行安裝試算表裡面的 js, 為了節省安裝步驟,想出複製試算表的方法,還好不會出問題,這樣就方便多了~

    回覆刪除
  3. 報告Wayne大大:
    B & I:這兩行的綠色字串"pv1"如果在網頁像您一樣文章右上方顯示一次,分享區塊再顯示一次,分享區塊那邊的我已經改為"pv2",可是如果一起放的話,文章右上方的就會消失,請問我應該還要注意哪邊呢? 再麻煩您撥空回答~ 謝謝囉!

    回覆刪除
  4. <7692909501911894824>(以上內容請勿刪除,從括號之後開始留言)結果真的不行...因為這個方法是直接複製舊版的方法,沒想到程式碼會打架,不好意思~

    所以我修改了作法,請見「2013.8.26 修訂」的部分,這樣應該就可以了!

    回覆刪除
  5. 報告Wayne大大:
    謝謝您的幫忙~ ^^"
    現在兩個一起顯示的話沒問題了~ 但如果畫面中只有一個的話,兩個都不顯示耶? @@"
    我是仿製您的blog,首頁標題右方顯示一次~ 內文右上一次,底下分享區一次~ 結果內頁正常,首頁不顯示了 @@"

    回覆刪除
  6. <7328245480946669805>(以上內容請勿刪除,從括號之後開始留言)唉呀~我犯邏輯上的錯誤了,我修正了「2013.8.26 修訂」第 2 點的程式碼,請將紅色字串挪到後面即可。(首頁沒有第二個id區塊,當紅色字串在前時,讀取不到那個區塊,js就先當掉了)

    哈哈,你把我首頁的讚與+1按鈕搬去用了,前幾天還有訪客在問這個功能怎麼裝呢,由於還沒時間寫所以尚未整理安裝步驟,看來閣下功力深厚喔!

    回覆刪除
  7. 哈哈~那個好像就是我問的~
    本來疑似搬好了~但是首頁和內文的數字同步的好像有點慢,我不知道是sharedcount.com會延遲~ 還是我語法的問題,所以拿掉了~

    後來回想起您那一篇建議我,直接用可以按的方式放進去,我再用一個透明的DIV擋在上面才會不能按的~ 哈哈!

    不過用可以按的模式,首頁和內文都好像必須用~

    來指定網址~ 如果內文只用

    的話我發生過裡外數字不同的情況~ (可能是google用不同方式判斷吧~我指定網址後數字就都正常了~)

    另外這樣的方式,網頁載入速度似乎比用sharedcount.com快了一些喔~ 提供您參考~

    您過獎了~ 小弟功力粗淺,只是愛玩~ 透明DIV蓋在上面我搞了半天~ 我一直問自己:[啊!可以按會怎樣???被多按一下不好嗎?],哈哈! p.s. 我不是處女座 @@"

    再次感謝您快速地回覆啦!!!

    回覆刪除
  8. <8896031183903565183>(以上內容請勿刪除,從括號之後開始留言)真的是深藏不漏啊~原來你也會透明div這招(過一陣子剛好要寫相關主題的文章),還以為真的不能按 XD。不過我不解的是,可以按幹嘛不給按呢...

    關於 sharedcount.com,第三方服務本來就會有流量限制,不可能即時更新資訊的,就像本文將資料放在試算表,我也是建議一小時更新一次。

    不過將來我會研究,能否將 sharedcount.com 的資料轉換到試算表,這樣就不會發生本文舊版資料放在 oocharts 的事件了。

    回覆刪除
  9. 不給按的原因有主要影響是因為您的也不能按~ 加上某一篇文章您提及您處女座的毛病 所以我自己把它解讀為:[在首頁文章下方按讚的閱讀者可能沒看過文章,那這樣的讚或+1等於同情票,那我寧願選擇"真誠的讚"而不是"自爽的讚"!],不過不一定哪天想通了,我就讓它可以按了! XD

    想要的幾乎都搞定了~ 可以安心寫文章了,再次感謝Wayne大大的協助,未來還要再向您多多請教了~ 對了! 我還要再搬一個東西走,就是[本站使用的hack及工具]把我修改的東西紀錄一下,並且連回您的網址~ 以便日後有網友看到有興趣,可以直接向您請教~ 再次感謝~

    回覆刪除
  10. <8896031183903565183>(以上內容請勿刪除,以下引言請自行刪減) [quote]哈哈~那個好像就是我問的~本來疑似搬好了~但是首頁和內文的數字同步的好像有點慢,我不知道是sharedcount.com會延遲~還是我語法的問題,所以拿掉了~後來回想起您那一篇建議我,直接用可以按的方...[/quote]

    咦? 上一篇留言指令碼都沒出現~ 還重貼了那麼多次~ 真不好意思~ 再麻煩您處理版面了 @@"

    上述文章應加入:

    -------------------------------------------------------------
    不過用可以按的模式,首頁和內文都好像必須用~
    < g:plusone expr:href='data:post.url' size='medium'/ >

    來指定網址~ 如果內文只用
    < g:plusone size='medium >

    的話我發生過裡外數字不同的情況~ (可能是google用不同方式判斷吧~我指定網址後數字就都正常了~)
    -------------------------------------------------------------

    回覆刪除
  11. <6279204758334109638>(以上內容請勿刪除,從括號之後開始留言)不客氣 很高興對你有幫助~
    另外 難得看到會對本站的設計深入解析
    你一定有心理方面的專長 這的確是當初的考量之一
    文章都還沒看怎麼能判斷讚不讚呢? :)

    回覆刪除
  12. <1804845079317108239>(以上內容請勿刪除,從括號之後開始留言)blogger留言會封鎖標籤, 所以一些字元無法顯示,不過看來你找到方法了(就是用 "&lt;" 代替 "<" 這樣)

    看了你的 code, 這樣子的確會有問題, 請"詳讀"「Blogger 無預警轉換區域網址的影響及因應之道」可得知來龍去脈,一定要指定網址,而且必須用 "data:post.canonicalUrl" 取代 "data:post.url",將來數據才會正確。

    你目前看起來正常是因為剛好都是 .tw 訪客的數據,如果有其他國家、區域的訪客(例如hk, us),就無法正確統計了。

    回覆刪除
  13. <1804845079317108239>(以上內容請勿刪除,從括號之後開始留言)再補充一下好了, 其實我上面提的 data:post.canonicalUrl 這件事是針對 fb 的讚按鈕。

    +1 按鈕的話, data:post.canonicalUrl 或 data:post.url 應該都可抓到正確數據, 畢竟這件事是他們自己搞出來的, 所以內部的 code 應該會自己處理。

    但是在首頁 +1 按鈕還是得指定網址,否則首頁同時顯示多個不同文章的 +1 按鈕, 就分不出要去抓那個網址的數據了。

    回覆刪除
  14. <2391095586237999640>(以上內容請勿刪除,從括號之後開始留言)

    了解! 看完了文章! 我馬上去改!

    回覆刪除
  15. <6877058761925039773>(以上內容請勿刪除,從括號之後開始留言)

    那請問Wayne大,有必要把html中所有的data:post.url及data:blog.url,通通做修改嗎?

    回覆刪除
  16. <1010192992320699958>(以上內容請勿刪除,從括號之後開始留言)如我那篇文章所提的,主要是社交分享按鈕及外掛(如果這個外掛會用到網址參數的話)需要修改。其他非分享按鈕、外掛的地方,不改是沒有影響的。

    回覆刪除
  17. Wayne兄你好,我寫了一篇新文章介紹香港朋友用這個程式,希望更多朋友可以用到。

    回覆刪除
  18. <4970869824735277648>(以上內容請勿刪除,從括號之後開始留言)謝謝您的介紹啊~不過忘了附網址啦!

    剛好我的文章也沒附 GA 的安裝步驟,就把您的文章網址(安裝 GA 的心得補充)放到「一、準備動作」了 :D

    回覆刪除
  19. <8819037535612894290>(以上內容請勿刪除,從括號之後開始留言)

    網址是這個嗎?

    程式詳細安裝方法來自:http://wayne-fu.blogspot.hk/2013/07/blogger-post-page-views-update.html

    回覆刪除
  20. <5000277443421970004>(以上內容請勿刪除,從括號之後開始留言)哈哈,您誤會了,我是指「您來這裡留言,表示寫了一篇新文章,但是忘了附您的文章的網址」,這樣其他人看到這則留言,還是不知道您的文章網址啊~

    不過沒關係,如我 #9 的回覆,我把您的文章網址放到本文「一、準備動作」了。

    回覆刪除
  21. <9084482122257613483>(以上內容請勿刪除,從括號之後開始留言)

    哈,明白了。我的文章不值得看,所以沒有貼上網址。

    本來應該早點來拜訪留言,不過之前好像只有G+留言(?),現在有blogger留言區,方便好多。

    因為Yahoo Blog結束,香港blog友大多選blogger,所以應該有更多香港朋友來拜訪。

    謝謝你的程式分享。

    回覆刪除
  22. <3250198634756597662>(以上內容請勿刪除,從括號之後開始留言)是先有 blogger 留言區才有 G 留言框 ^^

    '因為Yahoo Blog結束,香港blog友大多選blogger,所以應該有更多香港朋友來拜訪。'
    看來我未卜先知,一早來了 blogger XD

    回覆刪除
  23. <3250198634756597662>(以上內容請勿刪除,從括號之後開始留言)不客氣~不過您謙虛了,我知道您的 blogger 相關文章,有很多 hk 朋友在看的~

    關於本站的留言,如 #12 ken 所提,一直都有 blogger 留言。因為最近改留言的版面,我猜之前因為 G+ 留言框擺在 Blogger 留言框上面,所以可能您沒注意到吧!

    回覆刪除
  24. <4743532070736077893>(以上內容請勿刪除,從括號之後開始留言)的確是你跑得快~~XD

    P.S. ken 你可以用引言功能喔~

    回覆刪除
  25. 不好意思我又來討教了 XD
    很努力的看完了這系列的文章教學也終於改了出來
    然後遇到了一個問題是試算表只會算安裝 GA 以後的統計
    也就是安裝這個工能之前的文章數閱讀數是否就無解了?

    回覆刪除
  26. <5928791099715961777>(以上內容請勿刪除,從括號之後開始留言)這是個好問題~不過,你怎麼知道安裝這個小工具之前的文章閱覽數是多少呢?^^

    當然,既然有了試算表當資料庫,那麼資料庫裡的數據也可以隨我們高興,愛填多少就填多少了~~XD

    除了一方面要手動記錄(或"製作")所有文章的歷史瀏覽數,另一方面要放入資料庫中,也是需要一點試算表的操作技術。等過一陣子研究一下方法,整理後再另開新文說明好了!

    回覆刪除
  27. <755893918680374714>(以上內容請勿刪除,從括號之後開始留言)瞭解了,真的可以自己甜瀏覽數自嗨一下 XD

    回覆刪除
  28. <6585999676646739399>(以上內容請勿刪除,從括號之後開始留言)
    有好像不行…
    再跑一次 js 填好的啟始值就被蓋回去
    不管了
    能夠排除掉討人厭的機器人就好了

    回覆刪除
  29. <8910854434705907961>(以上內容請勿刪除,從括號之後開始留言)試算表每小時更新一次,而更新的時候就會覆蓋原資料了。

    所以要新增一欄資料,用來儲存歷史pv。而真正讀取的那一欄儲存格,其算式要修改,加入歷史pv的數據。

    以上為所謂的"試算表的操作技術",如果不瞭解怎麼操作的話,就等我一陣子吧。

    回覆刪除
  30. <2523760749565667495>(以上內容請勿刪除,從括號之後開始留言)
    ok

    回覆刪除
  31. 版大~~~您好
    我照著這篇的操作,一步步完成哩~
    但用好後我的頁面還是沒有顯示單篇文章瀏覽次數,不曉得問題是出在哪裡?!
    可以麻煩您幫我看一下嗎?謝謝哦!
    http://alisha0110.blogspot.tw/

    回覆刪除
  32. <830140989062806894>(以上內容請勿刪除,從括號之後開始留言)你的網站看不到安裝碼喔!你可能裝到行動範本的內容去了。你可以詳細描述一下你把程式碼安裝到哪裡,比較能找出原因。

    回覆刪除
  33. 哈囉~~~版大謝謝囉~~
    我已經處理好了!我原本是把安裝碼放在第一個< div class='post-header' >之後
    後來你講完後,我想乾脆對調一下,結果就OK了~
    可能我的行動碼是第一個吧!(和別人不一樣XD)

    回覆刪除
  34. <971910345829522403>(以上內容請勿刪除,從括號之後開始留言)Alisha, 實在太謝謝你的回報了,我檢查了一下範本,發現我竟然過去的文章寫相反了...第一個搜尋結果是行動版才對!真是不好意思 ><

    我也很納悶,過去所有成功安裝的讀者,看來都是有兩把刷子的~Anyway,我修正了舊文章的敘述,至少以後不會再出錯!

    回覆刪除
  35. hello! 版大,我也照著這篇文章 hand-by-hand 的處理完成了!
    感謝您的教學!

    另外,我剛剛安裝過程中,發現 google 可能有點更新

    在將試算表「發佈為RSS」的那個部分,已經沒有 "RSS" 的選項可以選擇了~
    但其他的選項依然可以看到參數
    所以,影響也許不大吧...Q__Q

    回覆刪除
  36. <2889180769525688061>(以上內容請勿刪除,從括號之後開始留言)謝謝你的回報,不過我試了一下,用 Opera、Chrome 都可看到 "RSS" 的選項啊~不曉得你使用的瀏覽器及版本是?

    不過其實能夠取得"試算表代號"就好,恭喜你安裝成功了!

    回覆刪除
  37. 咦@@?
    我剛剛再回去看,確實還是沒有 RSS 的選項~

    我是用 Chrome 31.0.1650.57 的版本

    謝謝版大熱心教學,才能安裝成功呀!!

    <5704077234351121750>(以上內容請勿刪除,從括號之後開始留言)

    回覆刪除
  38. <2876798319103494429>(以上內容請勿刪除,從括號之後開始留言)不客氣~
    我用的是 Opera15、Chrome28,不曉得是否為版本的問題,先把這件事記錄一下了!

    回覆刪除
  39. [quote]我剛剛再回去看,確實還是沒有 RSS 的選項~[/quote]不如試試其他的發布格式,從中找到 pubkey, Google Drive 或者 Google Spreadsheets 生成的鏈接表達為 pub?key=XXXXXXXXXX<2876798319103494429>(以上內容請勿刪除,從括號之後開始留言)

    回覆刪除
  40. <2452282817246777148>(以上內容請勿刪除,從括號之後開始留言)謝謝,已補充在上一篇的操作步驟。

    回覆刪除
  41. 版大您好,

    最近發現一個問題,我的文章每隔3篇,就會出現1篇沒有顯示出人數,從現在往回數出現3次循環,但是在更早以前的文章就沒有這個問題,推測那些文章是在安裝顯示人數前就先建立的。

    http://goodmonik.blogspot.tw/
    分別是3/15的文章和2/14那篇(2/14那篇的日期也不見了... 怪怪的O_O,2014開頭的標題)

    是我有哪個步驟錯了嗎?
    還是我該提供甚麼資料請您幫忙看呢?

    真是不好意思 O_O"
    謝謝您~

    回覆刪除
  42. <3643304664444424731>(以上內容請勿刪除,從括號之後開始留言)哪裡哪裡 Moni K,不用不好意思,是我要不好意思了,看過了您的網站 goodmonik.blogspot.tw,麻煩請參考「導覽列」→「關於/諮詢」→「版權聲明/版權圖示」→「二、版權圖示」及「三、本站對移除版權圖示的態度」。

    您移除了這個小工具的 "出處連結",所以不好意思您得自個兒想辦法了~

    您可以參考該篇文章「五、移除版權圖示的管道」來贊助本站,該點有詳細的說明。

    回覆刪除
  43. 老天!感謝您的告知!因為我不曉得被移除的是哪個部分,所以已經請朋友幫忙整個重新更新。
    無論如何,教學來自版大這兒,就該完整呈現的啊!
    真的十億萬分的抱歉,剛剛更新完畢了!

    謝謝您的告知~ 謝謝。

    回覆刪除
  44. 您好,想請教您.....舊文章回去更改內容,造成該篇文章計數器歸零,這樣是正常的嗎?

    回覆刪除
  45. <5434518282143614493>(以上內容請勿刪除,從括號之後開始留言)正常來講不會,除非不小心還原成草稿、再重新發布,造成網址不一樣,才會歸零。所以目前看不出什麼原因導致你提到的狀況。

    不過過一陣子我會寫一個小工具(不確定多久),能調整歷史數據,你可以訂閱本站RSS,注意這件事。

    回覆刪除
  46. 哎呀! 我的確有手殘不小心點到還原成草稿,謝謝你的解答,期待您的那篇小工具文章

    回覆刪除
  47. 初步上我已經安裝好一個位置的單篇流量計數器,但是....要安裝第二個位置的部分我一直看不懂修訂那邊的說明,也自己嘗試解讀並做了下面兩種做法

    1.
    修訂那邊寫著請安裝以下程式碼, 就只剩下第一點跟第二點,所以我只要把程式碼簡化成只有第一點的一行跟第二點說的p行全部(包括後方新增的紅綠字部分)? <== 做了一樣看不到計數器

    2.安裝(二)安裝程式碼的全部,但是B行取代為增訂版的第一點以及P行也改成修訂版的 <==做了也看不計數器

    請問這是甚麼原因呢QQ?

    回覆刪除
  48. <7120097189472247355>(以上內容請勿刪除,從括號之後開始留言)恭喜~第一個能顯示就沒問題了,其他都是小問題。我在你的網頁原始碼看不到 "pv2" 這個字串,所以你一定是把 pv2 的程式碼裝到行動範本去了,所以再檢查一下吧!

    BTW,有發現你的導覽列異常嗎?可以自己練習修看看~

    回覆刪除
  49. <1797563315491735327>(以上內容請勿刪除,從括號之後開始留言)有!我發現導覽列怪怪的很久了只是都沒再管它! 我再來找找看哪邊出問題吧!
    BTW....我要先把這第二個計數器搞定再去修導覽列

    回覆刪除
  50. 我又遇到奇怪的狀況了!
    我把pv2的裝到addthis的下方然後看我的網誌首頁跟點進單篇文章裡面卻連標題下方的計數器也不見了,然後我再把pv2那邊的程式碼整組在移除掉儲存,文章標題下方的計數器又出來了!!

    我的PV2程式碼是修訂版的只改了原程式碼B行成修訂版第一點以及P行也改為修訂版的,PV值也確認全都改成PV2了,這樣裝上去就會造成上面我說的靈異現象

    請問我是哪邊手續有錯嗎??@@

    回覆刪除
  51. <2986299237905481275>(以上內容請勿刪除,從括號之後開始留言)你程式碼裝了兩次喔~這樣應該會打架的!pv2 那裡只要裝一行就好了~

    回覆刪除
  52. 剛入門blogger,很多都還待研究~

    要謝謝Wayne大詳細的說明,照著一篇一篇的文章去執行,雖然花了很多時間但總算成功了!!^^

    回覆刪除
  53. <6077120306808722649>(以上內容請勿刪除,從括號之後開始留言)恭喜~這篇難度很高的!welcome to Blogger~

    回覆刪除

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
提問請附網址、詳細描述狀況,如提供的資訊不足,則無法回覆。
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 若詢問 CSS 、非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 若發現留言不見了,通常是因為 "複製貼上" 的內容常被系統判定為垃圾留言,請不用擔心,我會定期將留言恢復。
◎ 本站「已關閉自刪留言功能」。