一個能同時比較好幾個具名計數的點擊計數器,會先為你想追蹤的每一件事,建立一個帶有標籤的面板,接著在那個面板裡使用「增加」與「減少」,讓每一個數值與合計的當日總數一起更新。Multi Counter 一開啟就會提供兩個可以重新命名的面板,只有在真的需要多做一項比較時,才讓你加入新的具名面板,並把整個工作區上限訂在二十個具名計數器,讓它維持是一個瀏覽器工具,而不是一個資料庫。每一個數值,都會依照你裝置上的本機日曆日期儲存,因此頁面會顯示每個面板當天的數字、頂部所有面板加總後的總和,以及 Daily history 中較早的日期。因為這個工作區存放在瀏覽器 localStorage 中、屬於這個工具的專屬鍵值下,所以不會上傳任何內容、不需要建立帳號,清除瀏覽器資料就會移除已儲存的比較結果。Export PNG 會產生一張 1080 x 1350 的圖片,內含合計總數與最近幾天的日期列,但不含網址,也不含使用者輸入的名稱;Export CSV 則會寫出一個檔案,內含一個 Date 欄位,以及目前每一個計數器名稱各自對應的一個欄位,方便在試算表中開啟。

how to make a click counter
如何製作一個點擊計數器

「製作一個點擊計數器」實際上能帶給你什麼

搜尋「如何製作一個點擊計數器」,通常代表三件事其中之一:寫一個小程式、安裝一個 App,或是直接打開瀏覽器裡已經有的東西就開始用。這三種做法裡最快的是第三種,但大多數線上計數器,給你的都只是一個沒有標籤、點擊就會遞增的數字。這種單一數值的形式,適合用來快速計數,但一旦你開始要並排比較兩樣東西——哪一條隊伍移動得比較快、哪一天完成的組數比較多、今天早上哪一個結帳台比較忙——它就會失去價值。

Multi Counter 把這種單一數值的形式,延伸成同一個分頁裡好幾個帶有標籤的面板。這個工具是一個用來同時比較好幾個具名數量的本機瀏覽器工作區,所有數值會一起維持可見,而不是分散在你得記得來回切換的好幾個分頁裡。標籤才是重點:一個標示為北邊隊伍的面板,加上另一個標示為南邊隊伍的面板,構成的是一項比較;而兩個沒有標籤的 +1 按鈕,就只是兩個計數而已。如果只是想做一個沒有比較用意的單按鈕計數,一個單純的線上計數器就夠了。如果是為了比較,多面板的版面配置,就能把這個點擊計數器變成一眼就能看懂的東西。

為什麼開始點擊之前,要先為每個面板命名

這些標籤並不只是裝飾。每一個具名計數器,都帶有一個穩定的內部識別碼,即使你更改了顯示名稱,這個頁面仍然會保留它。正是這個細節,防止了當你為了清楚起見而重新命名某個計數器時,舊的數值悄悄跑到另一個計數器上。把「北邊早上」重新命名成「北邊上午」,並不會把早上的數值合併進一個新的「上午」分類,也不會把昨天的上午紀錄,指派給今天的下午面板。

同一個識別碼,也會在你移除一個計數器時,保護已儲存的數值。刪除一個面板,會把它儲存的數值從這份本機比較結果中移除,而不會留下一個依附在被回收名稱上的隱藏數字。當一項比較已經結束,隔天要在同一個工作區開始新的比較時,這一點特別重要。這個頁面至少會保留一個可用的計數器,並允許最多二十個具名計數器,這足夠應付一般的並排檢查。這個上限是刻意設計的:一個單純的瀏覽器工具,不應該悄悄變成一份有著數百個未命名欄位的試算表。

在瀏覽器裡設定你的點擊計數器

設定過程很簡短,因為大部分的工作就是命名與點擊。打開 Multi Counter,依照以下步驟,製作一個能比較好幾個計數的點擊計數器。

  1. 重新命名一開始的兩個計數器,讓每一個面板都能描述你想比較的數值,例如「北邊隊伍」與「南邊隊伍」。標籤要盡量簡短,才能放進面板標題裡。
  2. 只有在真的需要多做一項比較時,才加入另一個計數器,最多可以有二十個具名計數器。如果兩個面板就已經足夠完成任務,可以跳過這個步驟。
  3. 每次事件發生時,在對應的面板中點擊 Increase。如果需要在不離開工作區的情況下修正某筆紀錄,就點擊 Decrease。
  4. 留意頁面頂部的合計總數,會與對應的面板一起更新。這個總數,是目前本機日曆日期中,所有具名數值的加總,而不是一個無關的終身累計分數。
  5. 如果想查看更早的本機日期,可以打開 Daily history。即使新的一天開始後,可見的面板會重設為零,每一個已儲存的日期,仍然會保留自己的數值。

Increase 與 Decrease 都設有界限,因此計數不會悄悄變成負數,也不會發生溢位。如果你發現某個數值的行為異常,最常見的原因,是不小心重新命名了某個面板,接著點錯了面板——這正是為什麼會有這個穩定識別碼存在的原因。

解讀跨面板的每日比較

每一個數值,都與你裝置上的本機日曆日期綁定。頂部顯示的合計總數,是那一天所有具名數值的加總,而不是橫跨所有時間持續累計的分數。當新的本機日期開始時,可見的面板會從零開始,而先前非零的日期,則會保留在 Daily history 中。這正是「比較今天各面板」的點擊計數器,與「持續往上累計」的終身計數器之間的關鍵差異。

Daily history 檢視畫面,正是把點擊計數器變成一項比較的關鍵所在。如果星期一「北邊隊伍」結束時是 47,「南邊隊伍」是 22,而星期二結束時分別是 31 與 38,這兩天就會並排顯示,不需要手動計算,就能看出優勢的變化。舉一個簡單的實際範例:如果「北邊隊伍」是 12,「南邊隊伍」是 8,「後勤辦公室」是 3,頂部顯示的合計總數就是 12 + 8 + 3 = 23。當本機日期改變時,這三個面板會重設為零,而同一組數值,會出現在 Daily history 中新的那一天底下。

當你需要檔案時,匯出這份比較結果

兩種匯出選項,涵蓋了大多數的審查需求。Export PNG 會產生一張帶有 Lizely 標誌、合計總數與最近日期列的 1080 x 1350 圖片。這張圖片刻意不含網址,也省略了使用者輸入的計數器名稱,降低分享出去的截圖洩漏私人標籤的機率。當你想要一張方便放進聊天訊息、投影片,或列印文件中的每日比較圖片時,就可以使用這個選項。

Export CSV 會建立一個 Date 欄位,再加上目前每一個計數器名稱各自對應的一個欄位。這個檔案,每一個已儲存的本機日期都佔一列,並包含那一天並排呈現的數值,因此可以乾淨地在試算表中開啟審查。這兩個檔案,都是由瀏覽器直接使用原生的 canvas 與 Blob API 建立的,不會有任何內容被送到匯出服務。這份比較結果會維持私密,直到你自己選擇要分享這個檔案為止。

Multi Counter 不做什麼,以及該改用什麼

這個工具不會推論標籤的含義、不會收集感測器資料,也不會宣稱使用者輸入的數字經過了獨立驗證。它是一種手動的並排計數,而這個範圍限制正是重點所在。如果某個標籤需要的形式,不只是單純的整數點擊計數,這個類別中的其他計數器,會是更合適的選擇。

需求更合適的工具
一個沒有比較用意的一般點擊數值Online Tally Counter
維持方向性的進出計數,並帶有容量提示People Counter
一個預設的標籤,並跨日期記錄連續天數Daily Habit Counter
好幾個具名計數並排比較,涵蓋今天與歷史紀錄Multi Counter

隱私是這項承諾的一部分,而不是一句行銷話術。計數器名稱、數值與每日歷史紀錄,只會保存在瀏覽器 localStorage 中,屬於這個工具的專屬鍵值下。這裡沒有帳號、沒有上傳、沒有共享面板、沒有雲端同步、沒有 API 請求,也不會跨裝置合併資料。清除瀏覽器資料,就會移除已儲存的比較結果,而另一支手機或另一台電腦,會有各自獨立、空白的紀錄。如果瀏覽器儲存功能被停用或已滿,目前的頁面仍然可以用於當下正在進行的互動,並會顯示無法儲存歷史紀錄——這比暗示一項重要的比較已經被備份,但實際上並沒有,要來得妥當。

如果你的比較已經告一段落,已儲存的日期不再重要,可以移除過時的計數器,讓工作區縮回你仍在使用的那些欄位。每一次移除,都會把該計數器儲存的數值,從這份本機比較結果中刪除,而不會留下一個隱藏的數字,這樣隔天就能從一個更乾淨的畫面開始。

延伸閱讀:Count People at an Event With a Manual Counter

延伸閱讀:Does Water Intake Counter Recommend How Much to Drink?