How to get View Count in every single page in blogspot / blogger?

Before we start let me answer some of your following questions that you might be thinking...
 
Q. What is "View Count" anyways?
Ans. With View count you can keep track on how many people have visited your blog site with a total number of counts displayed in your blog.
It also gives you a better idea how many people are coming to your blog daily.

Q. Blogspot / Blogger already has this feature so what so special about this tutorial?
Ans. Yes, I agree blogspot does have this feature and its great no coding involved but you cannot do this...
Suppose you have made 2 posts: Page A, Page B.
Whatif you want to know how many people visited Page A Vs Page B.
Suppose people visited Page A - 100 times and Page B - 5 times.
Blogspot View Count will show you only total visits i.e. 105 visits. And not for Page A or Page B specifically. 

So to see Views for Each page... this is how to I did.
Just copy paste this code on your blogspot page and you are good to go.

<!--- //////////View Count + COPY PASTE THIS CODE IN EVERY PAGE////////////////// --->
<script>
window.onload = function() {
    var xhr = new XMLHttpRequest();
    var url = window.location.href.replace("https://","").replace(/\//g, "-");
    xhr.open("GET", "https://api.countapi.xyz/hit/"+url);
    xhr.responseType = "json";
    xhr.onload = function() {
      	document.getElementById("viewcount").innerHTML = this.response.value;
    }
    xhr.send();
}
</script>

<h1><span>Views: <span id="viewcount"></span></span></h1>
<!--- /////////////////////////////////////////////////////////////////////////// --->

Q.So What is happening in this Code?
We are using a site called https://countapi.xyz/ and its free to use. According to the API we need a unique key or value https://api.countapi.xyz/hit/<Your Site URL> something like that. But it cannot take long url which has multiple "/" which creates error. When ever we create a new blog page our url is always unique. So I have used the same unique url which will be obtained using javascript on every time page loads and same url will be used as a variable but as it cannot take "/" so I replaced it with "-" and that will be our unique page count. That way we do not have to type url of every page over and over again. Just copypaste and your done.

FAQ.
Q.Does this code gathers data from blogspot and shows me my specific page data?
No. It does not. It will only start from 1 onces you start using this code. It has no relation with blogspot view count data.

Q.Do I have to Paste it in my Layout page?
No, If you are new to coding then keep things simple. Paste in blogspot post or pages.

Q.Can I synchronize this code with blogspot View Count?
Nope, It has no relation with blogspot code.

The only way to synchronize is not to use blogspot View Count and follow this steps... 

Q. How to synchronize blogspot View Count with every page / pages?
To synchronize with blogspot / blogger you need to do additional 2 steps.

Trick is copypaste this code again to every post or pages. Note:- Just replace <YOUR BLOGGER SITE> with your own blogspot site with https://

<!--- /////Total View Count + COPY PASTE THIS CODE IN EVERY PAGE////////////////// --->
<script>
window.onload = function() {
    var xhr = new XMLHttpRequest();
    var site = "<YOUR BLOGGER SITE>"
    var url = site.replace("https://","").replace(/\//g, "-");
    xhr.open("GET", "https://api.countapi.xyz/hit/"+url);
    xhr.responseType = "json";
    xhr.onload = function() {
      	document.getElementById("totalcount").innerHTML = this.response.value;
    }
    xhr.send();
}
</script>
<!--- /////////////////////////////////////////////////////////////////////////// --->

And only this code should be pasted in your Layout - HTML

<!--- /////Total View Count + COPY PASTE THIS CODE ONLY ON LAYOUT PAGE////////////////// --->
<script>
window.onload = function() {
    var xhr = new XMLHttpRequest();
    var site = "<YOUR BLOGGER SITE>"
    var url = site.replace("https://","").replace(/\//g, "-");
    xhr.open("GET", "https://api.countapi.xyz/hit/"+url);
    xhr.responseType = "json";
    xhr.onload = function() {
      	document.getElementById("totalcount").innerHTML = this.response.value;
    }
    xhr.send();
}
</script>

<h1><span>Views: <span id="totalcount"></span></span></h1>
<!--- /////////////////////////////////////////////////////////////////////////// --->

 

And now your page view count will be accurate for your site and for your pages in synchronized manner.
Enjoy!!!

Views: