Back
Featured image

[Tech] 如何為網站文章簡單加上瀏覽次數統計 - GoatCounter

如何為網站文章簡單加上瀏覽次數統計 - GoatCounter

前言

最近無聊，簡單幫 blog 文章加上得 View Counter (aka. 瀏覽次數) 的統計，來簡單分享記錄一下怎麼做的

View Counter

其實這件事很久以前就想做了，知道有不少靜態網頁 framework 如 hexo 熱門的主題其實已經有文章瀏覽次數統計 (e.g. LeanCloud) 的功能

但我的 blog 主要是 ghost，就想有沒有一些替代方案，也想盡量以 open source、private first 安全輕量為主

原本其實也有使用 Google Analytics (GA) 來統計一些流量，但畢竟 GA 只像是後台整體的統計和分析，沒辦法簡單做到頁面上直接呈現統計資訊

心血來潮就來想一下

雖然吐槽一下顯示瀏覽次數這一定程度上也是違反了隱私紀錄或追蹤啦XD，但總是有時候好奇想看一些自己文章被查閱了幾次

Goatcounter

查了查，GoatCounter 似乎是個很好的選擇，輕量基本也免費為主，需要要自己架也可以

GoatCounter 是一個的分析服務，並提供基本簡潔的 API，設定好後，只需要簡單撰寫一些 HTML 和設定好一些 CORS 設定，就能讀取和統計頁面的瀏覽紀錄

也是感謝服務提供者 @arp242 提供如此服務 (_ _，有興趣看他的一些心得理念可以從他的文章 Why I made GoatCounter 略知一二

簡單分享一下在我 blog 配合 GoatCounter 是怎麼做出來的，其實也不限於 ghost，一般網頁都可以，就純 js + html

Integrtation Guide

1. 首先去 GoatCounter 官網 註冊一個帳號

https://www.goatcounter.com/ (有需要其實自己架也行)

註冊過程中 ID 很重要，因為他即是網站追蹤辨別用的 url

如果是第一次註冊完，且沒有資料被 tracking，GoatCounter 會提示一些指引流程，請你嵌入一段簡單的 JS 到網站上

   <script data-goatcounter="https://<your-id>.goatcounter.com/count" async src="//gc.zgo.at/count.js"></script>

這邊就看網頁 framework 怎麼處理了，ghost 來說就是透過提供的 Code injection 就可以輕易做到了

2. Validation & Start statistics

當 js 設定好之後，可以嘗試打開一篇文章並 refresh 一下頁面，讓數據開始統計

一旦有資料開始被接收，前往 GoatCounter 後台 (https://<your-id>.goatcounter.com/)
即會顯示個頁面瀏覽次數資料了

如果沒有看到資料進來可以注意一下自己是不是有開一些 Adblock / 擋廣告軟體

頁面瀏覽次數統計

到這裡為止，如果只是想要單純在後台統計自己的文章瀏覽次數，到這邊就可以了，真的很簡單

但如果想要 render 瀏覽次數到前端呈現，還需要多啟用一些安全設定才能達成
因此以下步驟是 Optional 的

3. Enable Allow adding visitor counts on your website Settings (Optional)

前往自己 GoatCounter 後台的 Settings，在畫面左上方，開啟 Allow adding visitor counts on your website 的設定

這主要是為了後面我們讓前端可以 fetch GoatCounter 的統計 API render 用

Default 是 off 的，如果只是想在 GoatCounter 後台看到一些數據，這個選項是可以不用開的，

多少有點安全考量，因為開了等於你的網站一些統計資料開放讓人讀取 (畢竟要在 User 端讀取渲染)

4. Set up Site's Domain to prevent CORS issue

還有一個很重要的設定在 Settings 頁面裡面
在 Your site 欄位，需要填寫你網站的 domain name

否則會遇到 CORS 保護問題導致 js fetch 請求被擋下來

5. Render the view counter statistics in your post

當上述步驟都準備好後，我們就可以實踐 render 資訊在前端上了

GoatCounter 提供簡單的 API 能夠輕易抓取頁面頁面的瀏覽次數統計資料

https://${your-id}.goatcounter.com/counter/${encodeURIComponent(path)}.json

因此我們可以寫一段很簡單的 html 配合 js 嵌入在頁面中

步驟像是

  1. 請求 GoatCounter API 抓取該頁面是否有統計資料
  2. 若有，顯示在前端；若無則隱藏 (Progressive Disclosure)
  3. 在配合一些 html css 設定一些 style 美化 (Fontawesome 加一些 icon)

簡單範例如下

HTML

一段 html 預設配合 style 調整，在數據還沒載載入時，預設隱藏

<span id="views-container" class="article-meta-item" style="display: none;">
    <i class="fa fa-bar-chart" style="margin-right: 2px;"></i>
    <span>Views: </span>
    <span id="stats-views"></span>
</span>

JS

請求 GoatCounter API 抓取瀏覽次數，並讓瀏覽次數顯示在頁面上

    <script>
        (function () {
            const goatCounterCode = '<your ghost id>';
            const path = window.location.pathname;

            const viewsValue = document.getElementById('stats-views');
            const container = document.getElementById('views-container');

            if (viewsValue && container) {
                fetch(`https://${goatCounterCode}.goatcounter.com/counter/${encodeURIComponent(path)}.json`)
                    .then(response => response.json())
                    .then(data => {
                        if (data && data.count > 0) {
                            viewsValue.innerText = data.count.toLocaleString();
                            container.style.display = 'inline';
                        }
                    })
                    .catch(err => { });
            }
        })();
    </script>

就可以達成如下的效果啦

結尾

算是補了一塊自己曾經一直很想有的功能，也是感謝提供這些服務的人讓我能輕易實現目標😇

那這篇文章就簡單到這裡了，有緣下篇再見~

Written by setsal.lan in