年前最后一场技巧盛宴 | 1月27日与京东、日记易技巧大年夜咖畅聊智能化运维成长趋势!
除了应用 JS 追踪用户,如今有人提出了还可以应用 CSS 进行网页追踪和分析,译者认为,这种方法更为 优雅,更为 简洁,且 不好樊篱,值得测验测验一波,懂得更多,可查看 仓库地址(https://github.com/jbtronics/CrookedStyleSheets) 和 demo(http://crookedss.bplaced.net/)
我们可以用它来做什么
我们可以收集关于用户的一些根本信息,例如 屏幕分辨率(当浏览器最大年夜化时)以及用户应用的什么浏览器(引擎)
此外,我们可以监测用户是否点击某个链接或鼠标悬停在某个元素上,用来 追踪用户悬停的链接,甚至可以 追踪用户若何移动鼠标(在页面应用弗成见的字段),然而,应用今朝我的办法只能追踪用户的第一次点击或悬停,我信赖,修改我的办法最终可以实现追踪用户的每次点击
这又是若何实现的
通俗的做法
用 CSS 你可以应用 url("foo.bar") 属性引用外部资本添加图像,有趣的是,这个资本只在须要的时刻被加载(例如,当链接被点击时)
所以,我们可以用 CSS 创建一个选择器,当用户点击某个链接时调用某个特定的 UPL
- #link2:active::after {
- content: url('track.php?action=link2_clicked');
- }
办事端,php 脚本会在调用 URL 时保存时光戳
浏览器监测
浏览器监 测是基于 @supports Media-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;
- }
悬停监测
一个更好的解决筹划是,在网页加载时,浏览器不会去加载须要的外部资本,如许,就弗成能监测到用户的小我行动,这种对内容加载的修改可以经由过程浏览器来实现,也可以经由过程插件来实现(类似 NoScript 或 uMatrix)
对于 悬停监测(基于 jeyroik 的设法主意),我们需定义一个关键帧,每次应用这个关键帧都要去请求一个 URL
- @keyframes pulsate {
- 0% {
- background-image: url('track.php?duration=00');
- }
- 20% {
推荐阅读
Debian取代Ubuntu成为Google内部Linux发行版的新选择
年前最后一场技巧盛宴 | 1月27日与京东、日记易技巧大年夜咖畅聊智能化运维成长趋势!如不雅你读过那篇《Ubuntu 十个令人惊奇的事实》,你可能知道 Google 应用了一个名为 Goobuntu 的 Linux 发行版作为>>>详细阅读
本文标题:涨知识,原来可以这样用CSS来追踪用户
地址:http://www.17bianji.com/lsqh/40440.html
1/2 1