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.me
The 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-Type
Header. 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
More experimental tutorials:
- The stack I use to run this blog
- 8 good reasons to become a software developer
- SEO for blogging developers
- Recalling "4-Hour Work Week"
- Build a lifestyle business
- Build your own platform
- As an independent manufacturer, which product should you manufacture?
- Create your own job security
- Developers, learning marketing
- Product business freedom
- Generate value
- For your business
- The idea is nothing
- Niche Market
- Remote work for software developers
- Product/market fit
- The best podcasts for front-end developers
- Why create an email list?
- Break the link between time and money
- The scarcity principle applies to software products
- Social proof principle
- How do I add dark mode to my website
- My notes on Deep Work
- Advantages of using a boring stack
- How to estimate programming time
- Become an independent developer
- How to learn how to learn
- Why are interview questions for programming jobs so difficult?
- Do I need a degree to become a programmer?
- Everyone can learn programming
- How to increase productivity
- How to get the actual pageviews of static websites
- Have you filled the developer’s bucket today?
- How do i record my video
- All the software projects I have done in the past
- Tutorial Purgatory from the Perspective of Tutorial Makers
- Every developer should have a blog. This is why and how to stick to it
- Have the business mindset of a developer
- How to write unmaintainable code
- What is imposter syndrome
- How to work from home without going crazy
- How can I stop worrying and learn to love the JavaScript ecosystem
- How do I make a web prototype
- You should be the worst developer on the team
- How to start a blog with Hugo
- Write things you don't know
- How to use uBlock Origin to stop interference
- Coding is an art
- I wrote a blog post every day for two consecutive years. Here are 5 things I learned from SEO
- Put out the fire
- About becoming a generalist
- The developer's dilemma
- My plan for being hired as a Go developer. In 2017
- Use Mac and iOS devices to improve work efficiency
- How to move from the tutorial to your own project
- This is my little digital garden
- How to start freelancing as a developer
- Share the journey of building a software product business
- Subfolders and subdomains
- How can I use text extensions to save time
- Software is superpower
- I like books
- How do I decide to create a new project management application