Blogger Visitor Counter dengan Google Apps Script V.2

Table of Contents

Blogger Visitor Counter with Google Apps Script V.2 - Perbaikannya pada post.html di Apps Script, sehingga loading tidak mempengaruhi konten lain. Silahkan bandingkan Versi 1 dan Versi 2.

Point Update V.2 ini adalah:

1. Cache Local Storage
2. Animasi count-up
3. Format K / M (angka ribuan, misal menjadi 1.2K)
4. Format Local ID (angka ribuan, misal 1000 menjadi 1.000)

Pembuatan Project Google Apps Script

Untuk pembuatan projek sama seperti sebelumnya -> Visitor Counter Apps Script V.1 (silahkan kunjungi dulu halaman tersebut). Ketika akan Edit Widget HTML, silahkan kembali ke tutorial ini.

Menyimpan Script di Widget HTML

Kalau V.1 menggunakan yang ada di post.html yang ada di Apps Script, untuk Versi 2 silahkan pilih script yang ada di bawah. Kalau sebelumnya sudah menggunakan script tersebut, ganti dengan yang di bawah ini.

Sebelum disimpan, silahkan ganti dulu pada const API_URL dengan Link Projek kalian. Saya tulis panjang dengan keterangan, silahkan scroll untuk melihat isi script. Sript di bawah ini Versi K/M, artinya angka ribuan tidak ditulis penuh seperti 2550 tapi 2.5K

<script>
const API_URL = "https://script.google.com/macros/s/AKfycbzJKnzp1W3QZi8zVD3J4kB76zDZpPohN5wbfe6RwW_R5zit5m767JO0pIt1VMew6AR1-w/exec";

(function () {

  /* ===============================
     1. Cari target penempatan
  =============================== */
  const target =
    document.querySelector(".item-view .post-header") ||
    document.querySelector(".item-view .sharing") ||
    document.querySelector(".post-view .post-header") ||
    document.querySelector(".post-view .sharing") ||
    document.querySelector(".page-view .post-header") ||
    document.querySelector(".page-view .sharing");

  if (!target) return;

  /* ===============================
     2. Konfigurasi URL & cache
  =============================== */
  const POST_URL = location.href.split("#")[0].split("?")[0];
  const CACHE_KEY = "post_view_" + POST_URL;

  /* ===============================
     3. Buat struktur DOM
     <div>
       <div style="display:flex">
         svg + span
       </div>
     </div>
  =============================== */
  const outer = document.createElement("div"); // TANPA style

  const inner = document.createElement("div");
  inner.style.display = "flex";
  inner.style.alignItems = "center";

  inner.innerHTML = `
    <svg width="1rem" height="1rem" viewBox="0 0 24 24" fill="none"
      stroke="currentColor" stroke-width="2" stroke-linecap="round"
      stroke-linejoin="round" style="margin-right:4px">
      <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
      <path d="M10 12a2 2 0 1 0 4 0"/>
      <path d="M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6
        c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6"/>
    </svg>
    <span id="postViews">0</span>
  `;

  outer.appendChild(inner);
  target.appendChild(outer);

  const el = inner.querySelector("#postViews");

  /* ===============================
     4. Format angka K / M
  =============================== */
  function formatViews(num) {
    if (num >= 1000000) {
      return (num / 1000000)
        .toFixed(num % 1000000 === 0 ? 0 : 1) + "M";
    }
    if (num >= 1000) {
      return (num / 1000)
        .toFixed(num % 1000 === 0 ? 0 : 1) + "K";
    }
    return num.toLocaleString("id-ID");
  }

  /* ===============================
     5. Ambil cache lokal
  =============================== */
  const cached = Number(localStorage.getItem(CACHE_KEY)) || 0;
  el.textContent = formatViews(cached);

  /* ===============================
     6. Animasi angka
  =============================== */
  function animate(from, to) {
    if (from === to) {
      el.textContent = formatViews(to);
      return;
    }

    let current = from;
    const step = Math.max(1, Math.floor((to - from) / 20));

    const timer = setInterval(() => {
      current += step;

      if (current >= to) {
        current = to;
        clearInterval(timer);
      }

      el.textContent = formatViews(current);
    }, 30);
  }

  /* ===============================
     7. Fetch ke Apps Script
  =============================== */
  fetch(API_URL + "?url=" + encodeURIComponent(POST_URL))
    .then(res => res.json())
    .then(data => {
      if (!data || data.views === undefined) return;
      localStorage.setItem(CACHE_KEY, data.views);
      animate(cached, data.views);
    })
    .catch(() => {
      // fallback → tampilkan cache saja
      el.textContent = formatViews(cached);
    });

})();
</script>

Versi Local ID

Angka standar adalah tanpa titik, misal 3345 akan dirubah menjadi 3.345 (Local ID). Silahkan pilih versi ini atau Versi K/M di atas.

<script>
const API_URL = "https://script.google.com/macros/s/AKfycbwbUR9eATTSzNL6diVCgfbsBqJ6c4DH87bJ2fCyppryjrp4n5FLz8UJsrWSiZMBrB2r/exec";
const CACHE_TIME = 10 * 60 * 1000; // 10 menit
const STATIC_FALLBACK = "0"; // fallback statis

function updatePostViews() {
  const target =
    document.querySelector(".item-view .post-header") ||
    document.querySelector(".item-view .sharing") ||
    document.querySelector(".post-view .post-header") ||
    document.querySelector(".post-view .sharing") ||
    document.querySelector(".page-view .post-header") ||
    document.querySelector(".page-view .sharing");

  if (!target) return;

  const el = document.createElement("div");
  el.innerHTML = `
    <div style="display:flex;align-items:center;gap:4px">
      <svg width="16" height="16" viewBox="0 0 24 24" fill="none"
        stroke="currentColor" stroke-width="2">
        <path d="M10 12a2 2 0 1 0 4 0"/>
        <path d="M21 12c-2.4 4-5.4 6-9 6s-6.6-2-9-6c2.4-4 5.4-6 9-6s6.6 2 9 6"/>
      </svg>
      <span id="post-views">${STATIC_FALLBACK}</span>
    </div>`;

  target.appendChild(el);

  const span = el.querySelector("#post-views");
  const pageUrl = location.href;
  const cacheKey = "post_views_" + pageUrl;

  /* =====================
     1️⃣ CACHE
  ====================== */
  const cache = localStorage.getItem(cacheKey);
  if (cache) {
    try {
      const data = JSON.parse(cache);
      if (Date.now() - data.time < CACHE_TIME) {
        span.textContent = data.views;
        return; // STOP → tidak fetch
      }
    } catch (e) {}
  }

  /* =====================
     2️⃣ FETCH (OPTIONAL)
  ====================== */
  fetch(API_URL + "?url=" + encodeURIComponent(pageUrl))
    .then(r => r.json())
    .then(r => {
      const views = r.views || STATIC_FALLBACK;
      span.textContent = views;
      localStorage.setItem(cacheKey, JSON.stringify({
        views: views,
        time: Date.now()
      }));
    })
    .catch(() => {
      // fallback total → statis
      span.textContent = STATIC_FALLBACK;
    });
}

updatePostViews();
</script>

Kode HTML

Script ini tidak memerlukan penempatan kode HTML, untuk mempermudah. Apabila tidak muncul, silahkan edit selector pada Script.

Semoga bermanfaat...