單頁文章網頁瀏覽計數器 ~ 天馬行空

繼"在Blogger上加入網頁瀏覽計數器-Histats"之後, 最近突然想要加一個可以個別計算訪客來訪數的"單頁網頁瀏覽計數器".

前言:優缺點及前置作業

目前找到一個算是容易操作又免費的做法, 就是利用Google Firebase 結合Google Analytics來自動產生一個單頁網頁瀏覽計數器.

唯一的缺點是, 它只能從你安裝成功日起開始計算, 而不是從開站以來的人數算起.

首先, 你要先安裝Google Analytics.

註冊Google Firebase

接下來就可以進入Firebase的官網註冊Firebase帳號了.

第一步自然是按下Get Started鍵了. 然後選擇建立專案

填寫專案名稱, 按下專案ID鉛筆的符號, 就可以自訂好記的專案ID名稱哦.

下一步就是啓用Google Analytics分析功能, 按"繼續"鍵

接下來連結你現有的Google Analytics到Firebase, 然後按下"建立專案"

專案正在建立中, 等建好後按下"繼續"鍵.

現在可以將Firebase加到應用程式裡使用了.

在左邊的列表中選擇"開發"→"Database", 或是直接點選圖片上的Cloud Firestore.

然後選"Realtime Database"

接下來有如下的二個選項, 因為我們是要計算每次來訪訪客的數量, 所以要選"以測試模式啓動", 這個選項才會允許在realtime database上讀寫.

如果選擇"以鎖定模式啟動" 安裝後將無法寫入人數, 無法統計來訪者, 所以要選"以測試模式啟動"

現在按下Project Overview旁的小齒輪後選[專案設定]

然後記下專案ID等下在Blogger後台設定時要用到. 公開名稱可以自行修改(但凡有鉛筆符號在旁邊的, 都可以自行修改)

產生單頁網頁流量計數器

接下來就是把Firebase加到Blogger裡幫忙自動產生一個單頁網頁流量計數器了.

首先, 到Blogger後台, 記得先備份自己現有的主題模版哦.

然後, 後台按[設定]→[編輯HTML], 有三樣東西要加進主題模版內:

1) 加入一個jquery

在編輯畫面先搜尋是否已經有裝jquery了.

用Ctrl+F在搜尋列輸入 jquery 字樣, 只要版本高於1.2.3即可.

如果現有的主題模版內搜不到一個jquery, 或是版本低於1.2.3, 那麼請在<head>之後加入下面的程式碼, 或是直接取代現有的jquery語法.

由截圖可以看到我現有的jquery是高於1.2.3所以可以直接跳過這一步到下一步了.

2) 加入Firebase程式碼

用 Ctrl+F在搜尋列中搜尋</body>, 然後在</body>上面貼入下面的語法. 記得用之前Copy下來自己的專案ID取代下面的專案ID字樣哦.

在這裡有一個比較值得注意的地方就是上面 data.value = 1; 這裡. 為什麼設定為1而不是0呢? 因為我發現, 在安裝後的第一次拜訪, 它不會列入計算.

也就是說, 你所有現有的網頁在安裝後, 第一位訪客來訪該網頁, 它不會計算, 如果起步是0, 它會維持0. 直到第二位訪客來訪, 才會+1.

所以, 覺得起步設為1是比較合理的計算法. 當然啦, 各位看倌可以自行定義0或1囉.

3) 加入顯示單篇文章瀏覽數的程式碼

這個比較麻煩, 我找了半天, 找不到如何放在我的每篇文章的標題旁, 所以最後選個比較好找到的地方, footer.

用Ctrl+F在搜尋列找<div class='post-footer'> 或是 <div class='post-header'>, 然後在這行的下方放入下面的程式碼:

<a expr:name='data:post.id'/> <i class='fa fa-eye'/> <span id='postviews'/> Views

其實最後的這一段程式碼看倌可以試著在你想要出現的地方都試貼看看, 多試幾次, 就會找到你希望瀏覽數字出現的位置了.

其中的<i class='fa fa-eye'/>是眼睛的圖案, 可自行決定用不用, 也可換成其他自己喜歡的圖案. 這裡有其他的選擇可供參考.

只出現卻沒有瀏覽人次?

如果安裝的結果是有出現和Views的字樣, 卻沒有瀏覽人數, 如下圖:

那麼, 問題就是出現在Firebase專案的設定上. 所以, 請登入到firebase的專案上檢查設定:

Realtime Database→選專案名→規則→編輯規則→確保read & write都是設定為true

改完之後, 瀏覽人數就會出現了.

在WordPress網站上加一個單頁文章計數器

相較於Blogger, 要在WordPress的網站上加一個單篇文章的訪客瀏覽計數器真的是簡單方便太多了. 只需要簡單的加上一個外掛即可, 詳情請參考這篇: 如何在WordPress網站上加一個單篇文章瀏覽計數器.

<延伸閱讀>

安裝一個網站流量計數器: Histats

安裝Google Analystics追蹤分析碼

天馬行空 - 365個平凡無奇日子裡的無限可能

或者

請我喝杯咖啡吧!

參考網站:

飛翔的雲, WFU Blog-擺放位置

本篇文章包含贊助內容，當您單擊某些鏈接時，我可能會獲得奬勵。