A Free Solution to Add Page Views to Google Blogger: GAS106

March 12, 2024

A Free Solution to Add Page Views to Google Blogger: GAS106

Introduction

If you are looking for a free solution to add page views for every single Google Blogger post and page of yours, you may come to the right place. In this project, I am using Google Apps Script to build an API for saving the blogger page views. And in the blogger, we can add some JavaScript to send the request to fetch and update the views when someone visits your blog post or page.

YouTube

Check this project introduction video on YouTube if you prefer to watch video instructions.

Instructions (7 Steps)

Step 1

Make a copy of my project to your Google Drive with the link below.

GAS106 Add View Count to Your Blogger Posts: GAS106

Step 2

Once you have your copy on Google Drive, open the “Apps Script” editor by going to “Extensions > Apps Script” from the Google Sheets menu.

Step 3

In the file “postViews.js”, update the white list with the prefixes of your blogger website URLs. This can prevent other people from using your API for their blogger. Here is an example of the list with my blogs.

/**

* Ignore requests from other websites

const PREFIX_WHITE_LIST = [

"https://ashtonfei.blogspot.com/",

"https://ashtontheroad.blogspot.com/",

"https://miaomiaofriends.blogspot.com/",

"https://automatetheboring.blogspot.com/",

"https://yougastube.blogspot.com/",

];

Step 4

Follow this guide below to deploy your project as a web app for the page view API, make sure you use these settings below for it. You will get a Web App URL from your deployment and we’ll use it in the next step.

Execute as: Me (youremailaddress@gmail.com)
Who has access: Anyone

A Complete Guide to Deploy GAS as Web App

Step 5

Prepare the JavaScript code for your blogger to display the page views, copy below JavaScript or copy it from the file “post.html” in the project. Replace the value “UPDATE THE VALUE HERE WITH YOUR WEB APP URL” with the Web App URL you got from Step 4.

/** From Ashton (13/Aug/2024):

* This is an updated version of the script for the blogger to use

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

const updatePostViews = async () => {

/**

* 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");

if (!sharing) return;

const svg = `<svg width="1rem" height="1rem" viewBox="0 0 24 24" fill="none"

stroke="currentColor" stroke-width="2" stroke-linecap="round"

stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline

icon-tabler-eye" style="color: var(--main-color); margin:

0px;"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path

d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0"></path><path d="M21 12c-2.4 4

-5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9

6"></path></svg>`;

const eye = `<span class="material-symbols-outlined">visibility</span>`;

const createViews = (views = "...") => {

const element = document.createElement("div");

element.innerHTML = `<div style="display: flex; align-items:

center;">${svg}<span style="margin-left:0.2rem;"

id="blog-post-view">${views}</span></div>`;

return element;

};

let start = 3;

let loading = null;

let element = createViews("...");

sharing.style.display = "flex";

sharing.style.justifyContent = "space-between";

sharing.appendChild(element);

start--;

loading = setInterval(() => {

const views = Array(start).fill(".").join("");

element.querySelector("span").innerText = views;

start--;

if (start === 0) {

start = 3;

}

}, 1000);

const href = location.href;

const api = `${url}?url=${href}`;

const data = await fetch(api);

const { views } = await data.json();

loading && clearInterval(loading);

element.querySelector("span").innerText = views;

};

updatePostViews();

window.onload = () => {

const bloggerSection = document.querySelector(".blogger");

bloggerSection && (bloggerSection.style.display = "none");

};

</script>

Step 6

In your Google Blogger, go to the “Layout” and add a Gadget for “HTML/JavaScript”, paste the JavaScript above to the content field. Make sure the URL in the JavaScript was already updated with your own Web App URL for your page views API.

It should be updated like this.

And it’s recommended that you move the gadget to the page body section.

Step 7

Finally, you can create a new post or open an old one to verify if the page views can be loaded. Depending on the theme you selected, the position of the page views will be displayed in different places. Here is an example with the theme “Soho Light”.