How to accurately measure pageviews on a static site

If you have a static site and rely on Google Analytics for visitor data, you may encounter inaccuracies due to ad blockers or JavaScript blocking. To get a more realistic count of visitors, you can implement a simple tracking method using a small 1px x 1px SVG image.

Here’s how it works:

Create a Node.js web server on a platform like Glitch.

Include the SVG image in your website:

1	<img src="https://<name-of-the-project>.glitch.me/pixel.svg" />

Set up the server to handle requests for the image and increment a counter.

const express = require('express');
const app = express();
let counter = 0;

app.use(
  express.static('public', {
    setHeaders: (res, path, stat) => {
      console.log(++counter);
    },
  })
);

const listener = app.listen(process.env.PORT, () => {
  console.log('Your app is listening on port ' + listener.address().port);
});

The express.static() method takes an additional object with a setHeaders() function to set additional headers for the served file. Here, we misuse this function to log and increment the counter.
After running the server for a few hours, compare the data from the counter to the Google Analytics logs.
The results will give you an idea of the percentage of visitors who do not send data to Google Analytics.

It’s important to note that this method is not meant to replace a proper analytics tool but rather to provide a quick way to test if your analytics data aligns with reality. Most users do not block images, so this method can offer a more accurate estimate of pageviews.

You can also experiment with serving other types of files, such as CSS, using the same approach. Just substitute the SVG image with your desired file type.

Overall, this technique can help you evaluate the effectiveness of your analytics data and gain insights into the percentage of visitors who may not be captured by traditional tracking methods.

tags: [“pageviews”, “static site”, “analytics”, “tracking”, “SVG image”]