How to get the actual pageviews of static websites

Given a static site, how do you get the true number of visitors?

Update: If you are serious about this, please use Netlify Analytics.

This is a static site. I use Google Analytics and my audience is developers.

Since many developers use an ad blocker, the blocker may (may not depend on) prevent Google Analytics data from being transmitted to the server, so it can perfectly combine incorrect analysis data. Some developers even completely blocked JavaScript, but I think this is a small group of people, so there are fewer problems.

I always have this question: What is the number of real visitors? What percentage of visitors do I want to see?

My hosting provider did not provide any information about access. I only know the bandwidth I consume.

Therefore, I decided to test an idea.

I include a picture in each post, which is very small.

This is nothing new: email marketing software automatically uses this "trick" to calculate outstanding expenses.

I used 1px x 1px SVG images and 141 bytes of data to minimize the impact.

I made a Node.js web server on Glitch:https://glitch.com/~static-site-visitors-counter. If you include the image in your website, it looks like this:

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

Node.js web server residing on the node<name-of-the-project>.glitch.meThe URL will be sent back to the image.

But first, it adds a value:

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 important part of this application is the object we pass toexpress.static(). Normally, we don’t pass other objects to this method, but in this methodsetHeaders()Functions are provided, so we can set some other titles for the files that will be provided.

We add ourconsole.log()There, this feature is abused for our purposes.

This is very simple, because of how Glitch works, the counter is reset every time the app is updated.

Of course, this should not be your analysis tool. This is a way to quickly test whether the analysis data conforms to the actual situation. Normally, almost no one will obscure the image.

This can be done in different ways, because I'm using SVG, so I can also send the string back to the client in an appropriate wayContent-TypeHeader. I don't know if it will be faster, I haven't tried it yet.

You can also provide CSS files in the same way. I happened to choose a picture.

I let it run for 3-4 hours, and compared to the Google Analytics logs, the data showed me that about 10% of people who visit my website will not send data to Google Analytics.

not many. I expected more, like twice as many visitors. Or more than 50%. But only increased by 10%.

In fact, this is the best for me, because it means that Google Analytics data is still very useful.

This is the complete application code:https://glitch.com/edit/#!/static-site-visitors-counter

How to get the actual pageviews of static websites

Given a static site, how do you get the true number of visitors?

More experimental tutorials: