📊 Page View Counter Examples

This page demonstrates how to display view counts using the page view tracking script.

Basic View Counter

Simply add an element with data-page-views attribute:

<div data-page-views>Loading...</div>

Loading view count...

Custom Format with Text

Use data-format to customize the display format with {views} and {domain} placeholders:

        <span data-page-views data-format="👀 {views}
          views"></span>
      

👁️ Loading...

Detailed Format with Domain

Include domain information in your view counter:

        <p data-page-views data-format="{domain} has been viewed {views}
          times"></p>
      

Using CSS Classes

You can also use CSS classes instead of data attributes:

        <div class="page-views">Views: Loading...</div>

        <span id="view-count">Loading...</span>

Views: Loading...

Loading count...

📋 Available Selectors

The script automatically looks for elements with any of these selectors:

[data-page-views] - Data attribute (recommended)
.page-views - CSS class
#page-views - ID
.view-count - CSS class
#view-count - ID

🎨 Format Options

Use the data-format attribute to customize how the count is displayed:

{views} - Replaced with the view count (automatically formatted with commas)
{domain} - Replaced with the current domain

Examples:

data-format="{views}" - Just the number
data-format="{views} views" - Number with "views" text
data-format="Viewed {views} times" - Custom text
data-format="📊 {views} page views on {domain}" - With domain

⚙️ Setup Instructions

To use view counters on your website:

Include the tracking script in your HTML:

      <script
        src="https://hard-house.club/track.js"></script>
    

Add view counter elements anywhere on your page using the examples above
The script will automatically update the counters when the page loads and after each view is tracked

🔧 How It Works

When a page loads, the script tracks the view and gets the updated count
It also fetches the current view count for any existing counter elements
All counter elements on the page are automatically updated
Numbers are formatted with commas for better readability
The system gracefully handles errors (counters will show "Loading..." if the API is unavailable)

📊 Manual API Calls

You can also fetch view counts directly without using the automatic counter:

Custom JavaScript Implementation

        // Get views for current domain

        async function getCurrentViews() {

          const domain = window.location.hostname;

          const response = await fetch(`https://hard-house.club/api/views/${domain}`);

          const data = await response.json();

          return data.views;

        }

        // Update a custom element

        getCurrentViews().then(views => {

          document.getElementById('my-counter').textContent = `${views} views`;

        });

Track a Custom Event

        // Manually track a page view

        fetch('https://hard-house.club/api/track', {

          method: 'POST',

          headers: { 'Content-Type': 'application/json' },

          body: JSON.stringify({ url: window.location.href })

        });

API Response Format

        {

          "domain": "example.com",

          "views": 42,

          "message": "Page view tracked successfully"

        }