使用 CSS 追踪用户

SegmentFault思否 · 公众号 · 程序员 · 2018-01-28 08:00

正文

原文地址：https://github.com/jbtronics/CrookedStyleSheets 文章作者：jbtronics（https://github.com/jbtronics/）

除了使用 JS 追踪用户，现在有人提出了还可以使用 CSS进行网页追踪和分析 ，译者认为，这种方式更为 优雅 ，更为 简洁 ，且 不好屏蔽 ，值得尝试一波，了解更多，可查看仓库地址(https://github.com/jbtronics/CrookedStyleSheets)和demo(http://crookedss.bplaced.net/)

我们可以用它来做什么

我们可以收集关于用户的一些基本信息，例如 屏幕分辨率 （当浏览器最大化时）以及用户使用的什么 浏览器 （引擎）。

此外，我们可以监测用户是否点击某个链接或鼠标悬停在某个元素上，用来 追踪用户悬停的链接 ，甚至可以 追踪用户如何移动鼠标 （在页面使用不可见的字段），然而，使用目前我的方法只能追踪用户的第一次点击或悬停，我相信，修改我的方法最终可以实现追踪用户的每次点击。

最后，我们还可以监测用户是否安装了某个特殊的字体，基于这个信息，我们可以追踪用户使用的 操作系统 ，因为不同操作系统使用的字体也稍有不同，例如 Windows 的 Calibri 。

这又是如何实现的

普通的做法

用 CSS 你可以使用 url("foo.bar") 属性引用外部资源添加图像，有趣的是，这个资源只在需要的时候被加载（例如，当链接被点击时）。

所以，我们可以用 CSS 创建一个选择器，当用户点击某个链接时调用某个特定的 UPL 。

#link2:active::after {
  content: url('track.php?action=link2_clicked');
}

服务端， php 脚本会在调用 URL 时保存时间戳。

浏览器监测

浏览器监 测是基于 @supportsMedia-Query 的，我们可以监测浏览器的一些特殊的属性。，例如 -webkit-appearance

@supports (-webkit-appearance: none) {
  #chrome_detect::after {




    
    content: url('track.php?action=browser_chrome');
  }
}

字体监测

对于 字体监测 ，需要定义一个新的字体，如果一个字体存在，文本会尝试使用该字体进行样式设置，然而，当用户在系统上找不到该字体时，定义的字体会作为备用，在这种情况下，浏览器会尝试去加载定义的字体并在服务器上调用追踪脚本。

/** Font detection **/
@font-face {
  font-family: Font1;
  src: url('track.php?action=font1');
}
#font_detection1 {
  font-family: Calibri, Font1;
}

悬停监测

对于 悬停监测 （基于 jeyroik 的想法），我们需定义一个关键帧，每次使用这个关键帧都要去请求一个 URL。

@keyframes pulsate {
  0% {
    background-image: url('track.php?duration=00');
  }
  20% {
    background-image: url('track.php?duration=20');
  }
  40




    
% {
    background-image: url('track.php?duration=40');
  }
  60% {
    background-image: url('track.php?duration=60');
  }
  80% {
    background-image: url('track.php?duration=80');
  }
  100% {
    background-image: url('track.php?duration=100');
  }
}

然后，我们使用定义的关键帧创建动画，我们可以定义动画持续的时间，这也是我们测量的最大时间。

#duration:hover::after {
  -moz-animation: pulsate 5s infinite;
  -webkit-animation: pulsate 5s infinite;
  /*animation: pulsate 5s infinite;*/
  animation-name: pulsate;
  animation-duration: 10s;
  content: url('track.php?duration=-1');
}

我们可以通过补充关键帧的设置，来优化分辨率的监测。

输入监测

监测用户选中了某个复选框，我们可以使用 CSS 提供的 :selected 选择器。

#checkbox:checked {
  content: url('track.php?action=checkbox');
}

为了监测字符串，我们结合了 HTML pattern