只使用 CSS 进行用户追踪( 二 ) 原文地址：User-TrackingWithCSSOn

毕竟 Font2 不是一个真正的字体，因此我们继续尝试，最终将使用 Arial 字体。尽管如此，我们仍然可以在用户无感知的情况下，使用一个合理的字体。
追踪元素信息到目前为止，我们所做的事情就是当用户抵达网站，立即对信息进行分析。当然，我们也可以利用 CSS 对单独的事件做出应对。
如下所示，我们可以使用下面的例子，来分析鼠标悬停或活动事件。
#one:hover {background-image: url("http://localhost:8080/one-hovered/");}Hover me当鼠标每次悬停在按钮上，它会一次又一次的设置背景图片，一个 GET 请求也随之发出。
我们可以在按钮被点击时，做相同的事情。在 CSS 中，这就是活动事件。
#one:active {background-image: url("http://localhost:8080/one-clicked/");}Click me还有一系列其他事件。例如，悬停事件几乎适用在每一个元素上。因此从理论上来讲，我们可以追踪用户的每一个行为。
犹豫计时器使用更多的代码，我们可以组合这些事件并且了解更多信息，而不仅仅是发生了那些事件。
对于许多网站主来说，更感兴趣的是，用户在看到或悬停在元素上犹豫了多久才点击某个元素。通过下面的代码，我们可以测量用户悬停后点击所花费的时间。
let counter;app.get("/one-hovered", (req, res) => {counter = Date.now();});app.get("/one-active", (req, res) => {console.log("Clicked after", (Date.now() - counter) / 1000, "seconds");});用户一旦悬停，计时器就会启动。最后，我们可以算出直到点击过了几秒。
你可能会认为由于它嵌入在 CSS 代码中，统计的可能并不准确，但事实并非如此。由于请求的体积十分小，并且立即作用在服务器上。我试了几次并测量了时间，最终测量的结果非常精确。
很惊人，不是吗？
让整个功能更美观为了不被发现，使用不显眼的 URL 是十分有意义的。最后，每个人都可以看到完整的前端代码。
你也可以使用自己想到的关键词，代替个别特别显眼的路由单词。最后，前端和后端的 URL 必须匹配。
对于上面的示例，我始终将我自己的路由用作 GET 请求。这样十分清晰明白。一种更优雅的方式是使用 URL 的查询，这在 CSS 当中也适用。
@font-face {font-family: Font2;src: url("");/* or: */src: url("");}有关 Express.js 中 URL 查询与参数的相关的详细教程可以在这里查看：
【只使用 CSS 进行用户追踪】在 Express.js 中 URL 的查询与参数:javascript-in-plain-english/query-strings-url-parameters-d1a35b9a694f

原文地址： User-Tracking With CSS Only

javascript-in-plain-english/tracking-with-css-ec98e3d81046

原文作者： Louis Petrik

@louispetrik

译文出自：掘金翻译计划
本文永久链接：
译者：黄梵高:
校对者： zenblo: