静态页面的浏览量_如何获得静态网站的实际浏览量

静态页面的浏览量

Update: just use Netlify Analytics if you’re serious about this.

更新：如果您对此很认真，请使用Netlify Analytics。

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

这是一个静态站点。 我使用Google Analytics(分析)，我的受众是开发人员。

A perfect combination for inaccurate analytics data, since many developers use an ad blocker, which might (or might not, it depends) block the Google Analytics data from being transmitted to the servers. Some developers even completely block JavaScript, but I assume this is a smaller set of people, and so a less problematic thing.

由于许多开发人员使用了广告拦截器，该拦截器可能(或可能不取决于)阻止Google Analytics(分析)数据传输到服务器，因此可以完美地结合不正确的分析数据。 一些开发人员甚至完全阻止了JavaScript，但是我认为这是一小部分人，因此问题较少。

I always had this doubt: what is the real number of visitors? What percentage of visitors am I looking at?

我一直有这样的疑问：真正的访客人数是多少？ 我在看多少游客？

My hosting provider does not give any information about visits. I just know the bandwidth I consume.

我的托管服务提供商未提供有关访问的任何信息。 我只知道我消耗的带宽。

So I decided to test an idea.

因此，我决定测试一个想法。

I include an image in every post, a very small image.

我在每个帖子中都包含一张图片，非常小。

It’s nothing new: email marketing software automatically uses this “trick” to count open rates.

这并不是什么新鲜事：电子邮件营销软件会自动使用此“技巧”来计算开放率。

I used 1px x 1px SVG image, 141 bytes of data to have minimal impact.

我使用了1px x 1px SVG图片和141个字节的数据，以将影响降至最低。

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

我在Glitch上制作了一个Node.js Web服务器： https : //glitch.com/~static-site-visitors-counter 。 如果您将图像包含在网站中，则如下所示：

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

the Node.js web server living on that <name-of-the-project>.glitch.me URL is going to send the image back.

位于该<name-of-the-project>.glitch.me URL上的Node.js Web服务器将向后发送图像。

But first, it increments 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 app is the object we pass to express.static(). Normally we don’t pass an additional object to this method, but in there the setHeaders() function is provided so we can set some additional headers for the file which is going to be served.

这个应用程序的重要部分是我们传递给express.static()的对象。 通常，我们不会将其他对象传递给此方法，但是在其中提供了setHeaders()函数，因此我们可以为将要提供服务的文件设置一些其他标头。

We add our console.log() there, misusing this function for our purpose.

我们在此处添加console.log() ，出于我们的目的滥用此功能。

It’s very simple, and due to how Glitch works the counter will reset every time you update the app.

这非常简单，由于Glitch的工作原理，每次您更新应用程序时，计数器都会重置。

This is not supposed to be your analytics tool, of course. Just a way to quickly test if the analytics data matches the reality. Almost no one blocks images, normally.

当然，这不应该是您的分析工具。 这是一种快速测试分析数据是否符合实际情况的方法。 通常，几乎没有人阻止图像。

And this can be done differently, since I use an SVG I could also just send a string back to the client, with the appropriate Content-Type header. I don’t know if that would be faster or not, I haven’t tried.

由于我使用的是SVG，因此也可以做不同的事情，我也可以将字符串和适当的Content-Type标头发送回客户端。 我不知道那会不会更快，我还没有尝试过。

You could also serve a CSS file in the same way. I just happened to choose an image.

您也可以用相同的方式提供CSS文件。 我刚巧选择一张图片。

I let this run for 3-4 hours and the data, compared to the Google Analytics logs, showed me that about 10% of the people that visit my site don’t send data to Google Analytics.

我让它运行了3-4个小时，与Google Analytics(分析)日志相比，这些数据向我显示，访问我网站的人中约有10％不会将数据发送到Google Analytics(分析)。

Not a lot. I expected much more, like 2x the visitors. Or 50% more. But just a 10% increment.

不是很多。 我期望的更多，比如访客的2倍。 或更多50％。 但是仅增加10％。

Which is actually best for me, since this means the Google Analytics data is still very useful.

实际上这对我来说是最好的，因为这意味着Google Analytics(分析)数据仍然非常有用。

Here’s the full app code: https://glitch.com/edit/#!/static-site-visitors-counter

这是完整的应用程序代码： https : //glitch.com/edit/#!/static-site-visitors-counter

翻译自: https://flaviocopes.com/count-visits-static-site/

静态页面的浏览量