How to Count the Number of Visits on your Website with HTML, CSS, JavaScript and the Count API

Ever wondered how many visits your website gets? In this tutorial, I’ll teach you how to count the visits in 4 easy steps with HTML, CSS, JavaScript, and the Count API. For those interested in learning how to reset the visits counter or how to check the number of visits without manually going to their website, check out bonus steps 5 and 6 at the end.

Step 1: Create an output message

Add this line of code in your HTML file. This will output the number of times your website has been visited.

<h1>This site has been visited <span id="visits"></span> times.</h1>

Step 2: Create a namespace and key

Open up a new tab in your browser and copy/paste the following URL in the address bar. Replace {name of your website} including the brackets with the name of your website.

https://api.countapi.xyz/create?namespace={name of your website}&enable_reset=1

For instance, my website name is codefoxx.com, so mine will look like the one below. It’s not necessary to include the www in front of the website name by the way.

What if I don’t have a website, you ask? No problem, you can include a made up website name for now or even codefoxx.com like me. Wait, wouldn’t using the same website name as you or someone else cause it to crash or something? No, you can use the same name and it won’t matter because the Count API creates a unique key for every namespace, even if it has the same website name. In other words, multiple people can use the same name and it won’t interfere with each other because everyone has their own unique key.

Alright, now that your URL is setup, go ahead and hit search. If you did everything correctly, your browser will return a page that includes your new namespace and key. It should look something like this:

By the way keep this key a secret, I’m only revealing mine for demonstration purposes.

Step 3: Set up your API call script

Copy/paste the following script in between the head tags of your HTML file. Replace the {namespace} and {key} with your namespace and key from the previous step.

<script async src="https://api.countapi.xyz/hit/{namespace}/{key}?callback=websiteVisits"></script>

This is what mine looks like:

<script async src="https://api.countapi.xyz/hit/codefoxx.com/56ce2f5b-45e5-470f-8d13-34084938dd33?callback=websiteVisits"></script>

Step 4: Grab the API response and display website visits

Copy/paste this function in your JavaScript file.

function websiteVisits(response) {
document.querySelector("#visits").textContent = response.value;
}

Go ahead and fire up your live server if you haven’t already. You should see something like this.

Every time you refresh the browser, the number of times your site has been visited will increase by 1. That’s it, you just learned how to count the number of visits on your website.

Now let me teach you how to reset the value of your counter back to zero just in case.

Step 5: Reset the value of the counter

Open up a new tab in your browser and copy/paste the following URL. Replace {namespace} and {key} with your information. Also replace {whatever you want, most likely 0} with the value you want to reset your counter to.

https://api.countapi.xyz/set/{namespace}/{key}?value={whatever you want, most likely 0}

For example, I’m replacing mine with a value of 0. After you hit search, this will return a page containing the old value, which is the number of visits your website had previously and the new value.

Step 6: Check the number of visits discretely

Alright, now I’m goin to teach you how to check the number of visits on your website without having to actually visit your website. This can be useful for three reasons. One, you can track how many visits you have without having to increase the counter each time you visit your own website. Two, you can totally remove the message that displays the number of visits on your website and track the counts discretely this way. Three, it can act as a safety measure against those abusing the refresh button just to jack up your visits counter with fake visits. Indeed, if people don’t know your tracking the visits then they are less likely to hit the refresh button.

Open up a new tab in your browser and copy/paste the following URL.

https://api.countapi.xyz/get/{namespace}/{key}

You know the drill by now, replace {namespace} and {key} with your information.

This is what mine looks like:

After you hit search, it will return a page containing the current number of visits on your website. I clicked the refresh button a few times before running this so mine returned a value of 5.

Can’t get it to work? No problem. Check out my tutorial below.

--

--

--

Passionate software developer with an eye for design and detail. Contact me: https://miguelznunez.com/

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Basic of Web Development

2D Visibility with p5

https://concept-tees.myspreadshop.com/all+she+know+is+hustle-A5b95fd30f937647e39f33722

== vs === in JavaScript

Token Based Security in Angular Applications

Why JavaScript Should Be Your Technology For Startups?

What to Expect from Upcoming DHTMLX To Do List

React.js ‘Championship Chess’ from Scratch — Part One

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Miguel Nunez

Miguel Nunez

Passionate software developer with an eye for design and detail. Contact me: https://miguelznunez.com/

More from Medium

CREATING THE GAME OF X AND O

How to create a Dynamic Digital Clock

How to Upload and Display Multiple Images with JavaScript

Our Experience Learning Frontend Web development (HTML, CSS, Tailwind and JavaScript) in Side…