突然想起多年前流行的訪客計數器,於是在正式開發網站前,我決定先寫一個訪客計數器,為我的網站增添一份懷舊的感覺。同時,這也是一次學習的好機會😁。
由於我選擇在 Google Sites 上構建網站,而 Google Sites不支援 PHP 等後端語言,因此無法使用傳統的後端技術來實現計數器。
我使用Google Apps Script 和 Google Sheet解決這個問題
Google Sheet :
https://docs.google.com/spreadsheets/d/1kTsRsH5q2cyW_nmW4T8MEoJMBOLtSdNg0H7CPY_x7Gc/edit?usp=sharing
Google Apps Script :
function doGet(e) {
var ss = SpreadsheetApp.openById("1kTsRsH5q2cyW_nmW4T8MEoJMBOLtSdNg0H7CPY_x7Gc");
var sheet = ss.getActiveSheet();
var count = sheet.getRange("A2").getValue();
count++;
sheet.getRange("A2").setValue(count);
var result = { "count": count };
var callback = e.parameter.callback;
if (callback) {
var jsonp = callback + '(' + JSON.stringify(result) + ')';
return ContentService
.createTextOutput(jsonp)
.setMimeType(ContentService.MimeType.JAVASCRIPT);
} else {
var json = JSON.stringify(result);
return ContentService
.createTextOutput(json)
.setMimeType(ContentService.MimeType.JSON);
}
}
Google Sites前端代碼 :
<div id="visitorCount" style="text-align: center;">Loading...</div>
<script>
function updateVisitorCount(data) {
document.getElementById('visitorCount').innerText = 'Total Visitors: ' + data.count;
}
(function() {
var script = document.createElement('script');
script.src = 'https://script.google.com/macros/s/AKfycbxZUEXeyMktx_X4qdzfuOGdzb0MFQ7MdLMI-qcCEVsfkiN9WgBGAZSREJbdxfXjfOnzoQ/exec?callback=updateVisitorCount';
document.head.appendChild(script);
})();
</script>