Adding a View Counter to Static Website with ViewCounter.io

Sh Raj - Feb 6 - - Dev Community

Adding a View Counter to Your Website with ViewCounter.io

ViewCounter.io is a service that makes it easy to add a customizable view counter to any website. With ViewCounter.io, you can:

Track Pageviews

To use ViewCounter.io, you first sign up for an account and get a unique site ID. You then add the ViewCounter tracking code before the closing </body> tag on your pages:

<script type="text/javascript">
  var viewCounter = {
    id: 12345, // your view counter ID 
    type: 'horizontal'
  }
</script>
<script type="text/javascript" src="https://api.viewcounter.io/js"></script>
Enter fullscreen mode Exit fullscreen mode

This allows ViewCounter.io to track pageviews to your site ID on their servers.

Display the View Count

Display your current view count anywhere on your site by adding this code:

<div data-viewcounter-id="12345"></div>
Enter fullscreen mode Exit fullscreen mode

This will be dynamically replaced with your view count.

Customize the Counter's Look

You can customize the counter's style, format, and messaging using parameters like:

var viewCounter = {
  id: 12345,
  type: 'vertical', 
  label: 'Page Views:'
}
Enter fullscreen mode Exit fullscreen mode

See all options: https://viewcounter.io/docs

View Counter Analytics

In your ViewCounter.io dashboard, you can see analytics on your counter:

  • Views over time
  • Views by country
  • Referral sources
  • Recent pageviews

Dashboard: https://viewcounter.io/dashboard

View Counter API

You can also retrieve view count data through the ViewCounter API:

GET https://api.viewcounter.io/count/12345
Enter fullscreen mode Exit fullscreen mode

This returns the count as JSON. See API docs: https://viewcounter.io/docs/api

By handling the tracking and persistence on their servers, ViewCounter.io makes it simple to add a view counter that works across all pages of your site.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .