靜態頁面訪問統計：AJAX + SAE KVDB 實現非侵入式計數方案

背景痛點：靜態化後統計失效

為了 SEO 與效能，許多站點採用純靜態化（如 WordPress 生成靜態 HTML 至 SAE KVDB）。但靜態頁面繞過 PHP 處理，導致傳統瀏覽量統計（如 wp-postviews 外掛）失效。安裝外掛又會拖慢速度，進退維谷。

解決思路：前端 AJAX + 後端計數器服務

頁面載入時，前端發送兩個 AJAX 請求：
1. action=add — 計數器 +1
2. action=get — 取得最新計數並顯示

後端使用 SAE KVDB 高效讀寫，完全不經過 WordPress 核心，效能極佳。

後端計數器服務 counter.php

<?php
$key = $_GET['key'] ?? '';
if (!$key) exit;

$action = $_GET['action'] ?? '';
$counter = new Counter($key);

if ($action === 'add') {
    $counter->inc();
} elseif ($action === 'get') {
    echo $counter->get();
}

class Counter {
    private $kvdb, $key;
    public function __construct($key) {
        $this->kvdb = new CKvdb();
        $this->key = $key;
    }
    public function inc() {
        $num = $this->kvdb->get($this->key) + 1;
        $this->kvdb->set($this->key, $num);
        return $num;
    }
    public function dec() {
        $num = $this->kvdb->get($this->key) - 1;
        $this->kvdb->set($this->key, $num);
        return $num;
    }
    public function get() {
        return intval($this->kvdb->get($this->key));
    }
}

class CKvdb {
    private $db;
    public function __construct() {
        $this->db = new SaeKv();
        $this->db->init();
    }
    public function set($key, $value) { $this->db->set($key, $value); }
    public function get($key) { return $this->db->get($key); }
}
?>

前端 AJAX 程式碼（jQuery）

<script>
// 從隱藏 DOM 取得文章唯一鍵（如 slug）
var key = $('#postSlug').text();

// 1. 增加計數
$.get('/counter.php', { action: 'add', key: key });

// 2. 獲取並顯示計數
$.get('/counter.php', { action: 'get', key: key }, function(data) {
    $('#viewCount').text(data + ' Views');
});
</script>

頁面佈局建議：

<!-- 隱藏儲存 key -->
<div id="postSlug" style="display:none">article-slug-123</div>

<!-- 顯示計數 -->
<span id="viewCount">0 Views</span>

關鍵優勢

避坑指南

• Key 衝突：使用文章唯一識別符（slug 或 ID）作為 key，避免重複
• 跨域問題：若計數器部署在不同域名，需配置 CORS 或 JSONP
• 重複計數：可結合 Cookie/LocalStorage 標記單次會話已計數
• KVDB 配額：SAE 免費版有容量限制，大流量站點需監控用量

延伸應用

同架構可輕鬆實現：
✅ 文章點讚/踩計數
✅ 按鈕點擊追蹤
✅ 即時線上人數統計
✅ 簡易 API 限流計數器

這是「前後端分離」思想在傳統靜態站點中的輕量級落地，既保留了靜態化的極致效能，又獲得了動態互動能力。