Blogger Visitor Counter dengan Google Apps Script

Table of Contents

Blogger Visitor Counter with Google Apps Script - Kalau pada postingan sebelumnya saya menjelaskan bagaimana Membuat Blogger Realtime View Counter dengan Firebase V.2, saat ini saya akan menjelaskan dengan menggunakan Google Apps Script. Dengan GAS ini, saya rasa lebih akurat, berbeda dengan menggunakan Firebase, terkadang ada ketimpangan jumlah dengan dashboard Blogger.

Demo Visitor Counter

Pembuatan Project Google Apps Script

Langkah #1

Buat salinan Project ke Google Drive, dari link ini https://docs.google.com/spreadsheets/d/17G-icBeFygcoV5qOXKL4GXIV96BbrZGxF-RUfTIW-CQ/copy, (Google Drive yang sudah penuh tidak bisa meng-copy projek). Klik seperti pada gambar:

Langkah #2

Setelah salinan terbuat, klik pada Ekstensi -> App Script.

pada postViews.js edit dengan blog yang diizinkan untuk menampilkan Visitor counter, kemudian simpan. Contohnya seperti gambar dibawah.

Langkah #3

Klik Terapkan -> Deployment baru

Jenis -> Web App, isi kurang lebih seperti di bawah. Klik Terapkan

Copy Link yang diberikan, klik Selesai.

Langkah #4

pada post.html, ganti

 const url = "UPDATE THE VALUE HERE WITH YOUR WEB APP URL";

dengan link yang dicopy sebelumnya, kemudian Simpan. Jadinya seperti ini:

const url = "https://script.google.com/macros/s/ZSAKfycbw_0HoH6r0JZVefPcY3u7Eceu-KBa0jS1jopOtM3lNYQ/exec";

Menyimpan di Blog

Buka Dasboard Blogger -> Tata Letak -> Buat Widget HTML/JavaScript. Copy seluruh kode yang ada di post.html dan simpan di Widget yang dibuat. Kemudian Simpan Widget.

Catatan

Apabila tidak muncul, rubah selectornya, sesuaikan dengan lokasi yang akan ditempatkan. Edit selector yang seperti ini.

 /**
     * The page views will be display in post header first
     * If post header is not found, the sharing header will be used
     */
    const sharing =
      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");

Edit Jumlah View

Untuk mengedit jumlah view dan menyesuiakan dengan Dashboard Blogger, klik pada Setelan Project

kemudian Edit Properti Skrip dan rubah nilainya, Simpan.

Resource
https://automatetheboring.blogspot.com/2024/03/add-count-view-to-your-post-with-google.html