Cách tạo bộ đếm lượt xem Blog bằng Google Sheets và Google Apps Script

Hướng dẫn tạo bộ đếm lượt xem cho blog bằng Google Sheet

Hiện tại mình đang có host trang blog sử dụng Jekyll thay vì các nền tảng CMS phức tạp vì muốn một giải pháp nhẹ nhàng và linh hoạt. Sau khi dành thời gian tùy chỉnh theme, mình nhận ra Jekyll không có sẵn tính năng đếm lượt xem bài viết. Tìm kiếm trên internet chỉ cho ra các plugin phức tạp hoặc yêu cầu tích hợp với các dịch vụ phân tích như Google Analytics.

Loay hoay một hồi thì chợt nhận ra Jekyll cho phép nhúng HTML trực tiếp vào Markdown. Từ đây, nảy ra ý tưởng: sử dụng Google Sheet làm cơ sở dữ liệu cho bộ đếm lượt xem, tận dụng Google Apps Script để tạo API, và nhúng SVG trực tiếp vào trang Jekyll để hiển thị số lượt xem.

Tại sao nên tạo bộ đếm lượt xem riêng?

Trước khi đi vào hướng dẫn chi tiết, hãy hiểu lý do tại sao bạn nên tạo bộ đếm lượt xem riêng:

• Kiểm soát dữ liệu: Dữ liệu lượt xem được lưu trữ trong Google Sheet của bạn, giúp hoàn toàn kiểm soát.
• Không phụ thuộc nền tảng: Hoạt động trên mọi nền tảng blog (WordPress, Jekyll, Blogger…).
• Tùy chỉnh giao diện: Dễ dàng tùy chỉnh hiển thị theo phong cách blog của bạn.
• Miễn phí: Không tốn chi phí cho các plugin hoặc dịch vụ đếm lượt xem cao cấp.

Các bước tạo bộ đếm lượt xem

Giải pháp tổng quan

Giải pháp của hoạt động theo nguyên tắc sau:

1. Sử dụng Google Sheet làm cơ sở dữ liệu lưu trữ lượt xem
2. Tạo API bằng Google Apps Script để đọc/ghi dữ liệu
3. Nhúng SVG từ API vào trang Jekyll để hiển thị số lượt xem
4. Tự động cập nhật lượt xem mỗi khi có người truy cập bài viết

Điều quan trọng là giải pháp hoàn toàn miễn phí và không yêu cầu bất kỳ plugin phức tạp nào.

1. Tạo Google Sheet làm cơ sở dữ liệu

1. Truy cập Google Sheets và tạo bảng tính mới.
2. Tạo hai cột: “PATH” và “COUNT”.
3. Đặt tên cho sheet là “Home”.

2. Tạo Google Apps Script

1. Từ Google Sheet, chọn Extensions > Apps Script.
2. Xóa mã mẫu và dán đoạn mã sau:

function doGet(e) {
  var path = e.parameter.path;
  if (!path) {
    return ContentService.createTextOutput("Path not specified.").setMimeType(
      ContentService.MimeType.TEXT
    );
  }

  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Home");
  if (!sheet) {
    sheet = SpreadsheetApp.getActiveSpreadsheet().insertSheet("Home");
    sheet.appendRow(["PATH", "COUNT"]);
  }

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

  // Tìm kiếm path trong bảng
  for (var i = 1; i < data.length; i++) {
    if (data[i][0] === path) {
      currentCount = data[i][1];
      sheet.getRange(i + 1, 2).setValue(currentCount + 1);
      break;
    }
  }

  // Nếu chưa tồn tại path, thêm mới
  if (currentCount === 0) {
    sheet.appendRow([path, 1]);
    currentCount = 1;
  }

  // Tạo SVG với số lượt xem đã cập nhật
  var svgOutput = createSvg(currentCount);

  // Trả về SVG với đúng MIME Type
  return ContentService.createTextOutput(svgOutput).setMimeType(
    ContentService.MimeType.XML
  ); // Chắc chắn MIME Type là XML
}

function createSvg(count) {
  return `<svg xmlns="http://www.w3.org/2000/svg" width="70" height="20" viewBox="0 0 70 20">
            <defs>
              <style>
                .viewText { fill: #000000; }
                @media (prefers-color-scheme: dark) {
                  .viewText { fill: #ffffff; }
                }
              </style>
            </defs>
            <rect width="100%" height="100%" fill="transparent"/>
            <text x="5" y="50%" dominant-baseline="middle" text-anchor="start" fill="currentColor" font-size="16">
              ${count} views
            </text>
          </svg>`;
}

1. Lưu dự án với tên “View Counter”.
2. Chọn Deploy > New deployment.
3. Chọn loại là Web app.
4. Thiết lập:
   • Execute as: Me
   • Who has access: Anyone
5. Nhấn Deploy và cấp quyền khi được yêu cầu.
6. Sao chép URL web app được cung cấp.

3. Tích hợp vào blog

Đối với Jekyll

Tạo file _includes/view-counter.html với nội dung:

<div id="view-counter-"></div>
<script>
  (function () {
    var counterDiv = document.getElementById(
      "view-counter-"
    );
    fetch(
      "https://script.google.com/macros/s/Deployment_ID.../exec?path="
    )
      .then((response) => response.text())
      .then((svgContent) => {
        counterDiv.innerHTML = svgContent;
      });
  })();
</script>

Thay Deployment_ID bằng Deployment_ID web app của bạn.

Trong front-matter của bài viết, thêm:

---
view_counter_path: "unique-identifier"
---

Trong _layout/post.html, trước thẻ đóng </header> thêm:

<span class="view-count" style="display: inline-flex; align-items: center">
  <span class="view-label">View: </span><div id="view-counter-cách-tạo-bộ-đếm-lượt-xem-bằng-google-sheets-và-google-apps-script"></div>
<script>
  (function () {
    var counterDiv = document.getElementById(
      "view-counter-cách-tạo-bộ-đếm-lượt-xem-bằng-google-sheets-và-google-apps-script"
    );
    fetch(
      "https://script.google.com/macros/s/AKfycbxzlJBvCgGO2_qJNvm_JZ1iHzXJjfO3WC7N_IZfU5IlR7AvHdHfbFIRxaAfKle3yJvU/exec?path=Cách tạo bộ đếm lượt xem bằng Google Sheets và Google Apps Script"
    )
      .then((response) => response.text())
      .then((svgContent) => {
        counterDiv.innerHTML = svgContent;
      });
  })();
</script>

</span>

Đối với WordPress

Thêm đoạn mã sau vào file theme hoặc sử dụng plugin HTML tùy chỉnh:

<div>
  <span>View </span>
  <span></span>
</div>

&lt;script&gt; (function() { var counterDiv =
document.getElementById('view-counter-'); fetch('YOUR_SCRIPT_URL?path=')
.then(response =&gt; response.text()) .then(svgContent =&gt; {
counterDiv.innerHTML = svgContent; }); })(); &lt;/script&gt;

Xử lý các vấn đề thường gặp

Giới hạn truy cập API

Google Apps Script có giới hạn truy cập. Nếu blog của bạn có lưu lượng truy cập cao, hãy cân nhắc:

• Lưu trữ đệm (caching) kết quả
• Sử dụng Vercel hoặc Netlify Functions để tạo API trung gian

Lưu ý quan trọng: Cách này hiện tại mình chưa thêm các phương thức xác minh nên chỉ cần reload lại trang hay F5 là số lượt xem sẽ tự động tăng, có thể dẫn đến số liệu không chính xác so với lượt truy cập thực tế.

Kết luận

Với hướng dẫn này, bạn đã có thể tạo bộ đếm lượt xem cho blog sử dụng Google Sheet. Bộ đếm này không chỉ giúp bạn theo dõi lượt xem mà còn tạo thêm tính chuyên nghiệp cho blog của bạn.

Hãy thử nghiệm và tùy chỉnh để phù hợp với nhu cầu cụ thể của blog bạn. Chúc bạn thành công!

---

Bạn có thắc mắc hoặc gặp khó khăn trong quá trình thiết lập? Hãy để lại bình luận bên dưới, mình sẽ hỗ trợ bạn.