Create Blogger Visitor Counter with Google Apps Script

Blogger Visitor Counter with Google Apps Script - If in the previous post I explained how to Create a Blogger Realtime View Counter with Firebase, now I will explain using Google Apps Script. With this GAS, I think it is more accurate, unlike using Firebase, sometimes there is an imbalance in the number with the Blogger dashboard.

Demo

Demo Visitor Counter

Creating a Google Apps Script Project

Step #1

Make a copy of the Project to Google Drive, from this link https://docs.google.com/spreadsheets/d/17G-icBeFygcoV5qOXKL4GXIV96BbrZGxF-RUfTIW-CQ/copy, (Google Drive is full and cannot copy the project). Click as shown in the picture:

Step #2

Once the copy is made, click on Ekstensi -> App Script.

on postViews.js edit with blogs that are allowed to display Visitor counter, then save. For example, as shown in the image below.

Step #3

Click Apply -> New Deployment

Type -> Web App, fill in more or less as below. Click Apply

Copy the given link, click Done.

Step #4

in post.html, replace

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

with the link copied earlier, then Save. It will be like this:

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

Save to Blog

Go to Blogger Dashboard -> Layout -> Create Widget HTML/JavaScript. Copy all the code in post.html and save it in the Widget you created. Then Save the Widget.

Notes

If it doesn't appear, change the selector, adjust it to the location where it will be placed. Edit the selector like this.

 /**
     * 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 Number of Views

To edit the number of views and customize it with the Blogger Dashboard, click on,Project Settings.

then Edit Script Properties and change the values, Save.

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