Membuat Blogger Visitor Counter dengan Google Apps Script

Blogger Visitor Counter with Google Apps Script - Kalau pada postingan sebelumnya saya menjelaskan bagaimana Membuat Blogger Realtime View Counter dengan Firebase, 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

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:

Google Apps Script

Langkah #2

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

Google Apps Script

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

Google Apps Script

Langkah #3

Klik Terapkan -> Deployment baru

Google Apps Script

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

Google Apps Script

Copy Link yang diberikan, klik Selesai.

Google Apps Script

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

Google Apps Script

kemudian Edit Properti Skrip dan rubah nilainya, Simpan.

Google Apps Script

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

Berita Lebih Lama
  • mas Dirman
    Profil: https://www.blogger.com/profile/05060689225249751315
    30 Oktober, 2024

    Euuuh... hanas tos nyobian masang anu payerbes, wkwkwkw..

    eh tapi kang pakai apps script ini kayaknya bisa buat telegram api yah? cobain bikin tutor bot penyampai update blog, kang.. kayaknya menarik buat bikin kanal di sana wkwkw.. apa siapa tahu sudah bikin yah? :D

    • Ahmad Zaelani
      Profil:https://www.blogger.com/profile/14241025556115805508
      31 Oktober, 2024

      nah kalau buat di telegram saya sih pengen nyoba tuh, kalau di blog jujur aja nih, menurut pribadi kayak kurang guna kang, pertama sudah ada dari dahsboard, ada anlytics sama console, walaupun saya tadi liat demonya, emang bagus sih kalau diterapkan, kayak nambah kepercayaan orang buat baca artikelnya

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      01 November, 2024

      sya udah pernah nemuin dimana ya.. kayaknya ada yang pernah buat update telegram bot api, tapi nanti coba ulik2

    • mas Dirman
      Profil:https://www.blogger.com/profile/05060689225249751315
      01 November, 2024

      Asiiiik... nuhun kang :D

  • Amir
    Profil: https://www.blogger.com/profile/05062274712424026395
    06 November, 2024

    mantap ini kang. dulu awal ngeblog kaya mustahil bgt krn di blogger cuma single file gak ada akses storage langsung. ternyata bisa pake thrid party. tapi ya jadi eksternal aja. kapan kapan mau pasang

Tambahkan Komentar
comment url
Terima kasih telah berkomentar di Blog Kang Ismet.
  • Untuk menyisipkan Gambar, Kode, atau Kutipan silahkan klik Tab Sisipkan di atas.
  • Emoji yang bisa digunakan pada komentar :), :D, :( <3, :love dan :top
  • Untuk melihat Komentar yang telah ditambah sisipan kunjungi DEMO
Masukkan URL Gambar atau Potongan Kode, atau Quote, lalu klik tombol yang kamu inginkan untuk di-parse. Klik tombol Salin Kode! lalu paste ke kolom komentar.


image quote pre code
5 Komentar