在 Google Sites 中，由於系統環境較為封閉，無法直接像傳統網頁那樣修改 HTML 源碼來加入計數器。不過，結合您熟悉的 Google Apps Script (GAS) 和 Google Sheets，我們可以手動打造一個「點閱率紀錄器」。

這不僅能達成功能，更是一個絕佳的 Web API 實作教案。

一、核心運作邏輯

1. 資料庫 (Google Sheets)： 儲存各頁面的名稱與對應的點閱數。

2. 後端 (Apps Script)： 撰寫一個 Web App，當它被讀取時，會將Google試算表中的數值 $+1$ 並回傳。

3. 前端 (Google Sites)： 在每一頁嵌入一個小型的「嵌入程式碼」，呼叫該 Web App。

二、實作步驟

1. 準備資料庫 (Google Sheets)

建立一個試算表，命名為 Website_Analytics。

• A 欄 (PageName)： 首頁, 課程資訊, 部落格... 等。

• B 欄 (Views)： 初始值填入 0。

• C 欄 (Update)： 初始值填入當天 0

2. 撰寫後端 API (Apps Script)

在試算表中點擊「擴充功能」>「Apps Script」，貼入以下代碼：

JavaScript

function doGet(e) {

  // 防止直接點擊執行按鈕報錯

  if (!e || !e.parameter) {

    return ContentService.createTextOutput("請透過網址訪問，勿直接在編輯器點擊執行。")

           .setMimeType(ContentService.MimeType.TEXT);

  }

  var pageName = e.parameter.page;

  var ss = SpreadsheetApp.getActiveSpreadsheet();

  // 優先抓取名為 Website_Analytics 的分頁，若找不到則抓取第一個分頁

  var sheet = ss.getSheetByName("Website_Analytics") || ss.getSheets()[0];

  var data = sheet.getDataRange().getValues();

  var now = new Date(); // 取得當前時間

  // 遍歷資料尋找 PageName (A欄)

  for (var i = 1; i < data.length; i++) {

    if (data[i][0] == pageName) {

      var newCount = (Number(data[i][1]) || 0) + 1; // 數值 +1 ..這樣就可以知道這是哪個網頁被點選

      sheet.getRange(i + 1, 2).setValue(newCount);      // 更新 Views (B欄)..這樣就可以知道這網頁收歡迎程度

      sheet.getRange(i + 1, 3).setValue(now);           // 更新 UPDATE 時間 (C欄)..這樣就可以知道多久沒人看網頁了

      return ContentService.createTextOutput("米柚茶水間：本頁瀏覽人次 " + newCount)

             .setMimeType(ContentService.MimeType.TEXT);

    }

  }

  // 如果找不到頁面，則新增一行紀錄：[PageName, Views=1, UPDATE=現在時間]

  sheet.appendRow([pageName, 1, now]);

  return ContentService.createTextOutput("歡迎首次來到米柚茶水間！");

}

• 部署： 點擊「部署」>「新增部署」，類型選擇「網頁應用程式」。

• 權限： 執行身分選「我」，存取權限選「所有人」。

• 複製網址： 取得部署後的網頁應用程式 URL（例如 [https://script.google.com/.../exec](https://script.google.com/.../exec)）。

3. 前端嵌入 (Google Sites)

在 Google Sites 的每一頁中：

1. 點擊右側的 「內嵌」。

2. 選擇 「內嵌程式碼」。

3. 輸入以下 HTML（請替換您的 GAS 網址）：

HTML

<div style="font-family: sans-serif; color: #666; font-size: 14px;">

  <iframe src="您的GAS部署網址?page=首頁" 

          frameborder="0" width="100%" height="30"></iframe>

</div>

(每一頁的 page=xxxx 請改為該頁面的名稱，如 page=course_info)

三、嵌入 Google Sites

第一步：取得 Apps Script 部署網址

1. 回到您的 Google Apps Script 編輯器。

2. 點擊右上角「部署」 > 「管理部署」。

3. 確認「誰可以存取」已設定為「所有人 (Anyone)」。

4. 複製「網頁應用程式 (Web App)」的 URL 網址（應以 /exec 結尾）。

第二步：編寫內嵌 HTML 程式碼

為了讓計數器美觀地顯示在橫幅下方，我們需要一段簡單的 HTML 與 JavaScript。請將下方代碼中的 您的指令碼網址 替換成剛才複製的 URL。

HTML

<div id="counter" style="font-family: 'Microsoft JhengHei', sans-serif; color: #8B7500; text-align: center; font-size: 16px; font-weight: bold; padding: 10px;">

  載入人次中...

</div>

<script>

  // 設定您要記錄的頁面名稱，例如 "首頁" 或 "找本想讀的書"

  const pageName = "Index"; 

  const scriptUrl = "您的指令碼網址?page=" + encodeURIComponent(pageName);

  fetch(scriptUrl)

    .then(response => response.text())

    .then(data => {

      document.getElementById('counter').innerText = data;

    })

    .catch(error => {

      document.getElementById('counter').innerText = "計數器暫時無法顯示";

    });

</script>

第三步：在 Google Sites 中插入

1. 開啟您的 Google Sites 編輯頁面。

2. 在右側工具欄選擇「插入」 > 「內嵌」。

3. 切換到「內嵌程式碼」標籤頁。

4. 貼上剛才準備好的 HTML 程式碼，然後點擊「下一步」並「插入」。

5. 調整位置： 將插入的區塊拖曳到 橫幅 (Banner) 正下方 的位置。

6. 調整大小： 縮小區塊高度，讓它看起來像是一行簡潔的副標題。

第四步：發佈與測試

1. 點擊 Google Sites 右上角的「發佈」。

2. 重新整理您的公開網站網址。

3. 查看橫幅下方是否出現「米柚茶水間：本頁瀏覽人次 X」的字樣。

4. 同時檢查您的「Website_Analytics」試算表，確認 Views (B欄) 是否自動增加，以及 UpDate (C欄) 是否更新為現在時間。

四、執行順序

1. 先跑通 Google Sheets + GAS： 確保在瀏覽器輸入網址時，試算表的數字會跳動。

2. 再嵌入 Google Sites： 調整嵌入框的大小，使其看起來像是網頁原生的一部分。

這個功能實作後，就能親眼看到「前端觸發、後端運算、資料庫儲存」的完整 三層式架構 (3-tier architecture)。

五、預估增加費用

• 費用：$0。這完全利用 Google 的免費配額即可達成。