作家
登录

涨知识,原来可以这样用CSS来追踪用户

作者: 来源: 2018-01-22 13:04:03 阅读 我要评论

年前最后一场技巧盛宴 | 1月27日与京东、日记易技巧大年夜咖畅聊智能化运维成长趋势!


除了应用 JS 追踪用户,如今有人提出了还可以应用 CSS 进行网页追踪和分析,译者认为,这种方法更为 优雅,更为 简洁,且 不好樊篱,值得测验测验一波,懂得更多,可查看 仓库地址(https://github.com/jbtronics/CrookedStyleSheets) 和 demo(http://crookedss.bplaced.net/)

我们可以用它来做什么

我们可以收集关于用户的一些根本信息,例如 屏幕分辨率(当浏览器最大年夜化时)以及用户应用的什么浏览器(引擎)

此外,我们可以监测用户是否点击某个链接或鼠标悬停在某个元素上,用来 追踪用户悬停的链接,甚至可以 追踪用户若何移动鼠标(在页面应用弗成见的字段),然而,应用今朝我的办法只能追踪用户的第一次点击或悬停,我信赖,修改我的办法最终可以实现追踪用户的每次点击

这又是若何实现的

通俗的做法

用 CSS 你可以应用 url("foo.bar") 属性引用外部资本添加图像,有趣的是,这个资本只在须要的时刻被加载(例如,当链接被点击时)

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

  1. #link2:active::after { 
  2.  
  3.   content: url('track.php?action=link2_clicked'); 
  4.  

办事端,php 脚本会在调用 URL 时保存时光戳

浏览器监测

浏览器监 测是基于 @supports Media-Query 的,我们可以监测浏览器的一些特别的属性,例如 -webkit-appearance

  1. @supports (-webkit-appearance: none) { 
  2.  
  3.   #chrome_detect::after { 
  4.  
  5.     content: url('track.php?action=browser_chrome'); 
  6.  
  7.   } 
  8.  

字体监测

对于 字体监测,须要定义一个新的字体,如不雅一个字体存在,文本会测验测验应用该字体进行样式设置,然而,当用户在体系上找不到该字体时,定义的字领会作为备用,在这种情况下,浏览器会测验测验去加载定义的字体并在办事器上调用追踪脚本

  1. /** Font detection **/ 
  2.  
  3. @font-face { 
  4.  
  5.   font-family: Font1; 
  6.  
  7.   src: url('track.php?action=font1'); 
  8.  
  9.   
  10.  
  11. #font_detection1 { 
  12.  
  13.   font-family: Calibri, Font1; 
  14.  

悬停监测

一个更好的解决筹划是,在网页加载时,浏览器不会去加载须要的外部资本,如许,就弗成能监测到用户的小我行动,这种对内容加载的修改可以经由过程浏览器来实现,也可以经由过程插件来实现(类似 NoScript 或 uMatrix)

对于 悬停监测(基于 jeyroik 的设法主意),我们需定义一个关键帧,每次应用这个关键帧都要去请求一个 URL

  1. @keyframes pulsate { 
  2.  
  3.   0% { 
  4.  
  5.     background-image: url('track.php?duration=00'); 
  6.  
  7.   } 
  8.  
  9.   20% { 

  10.   推荐阅读

      Debian取代Ubuntu成为Google内部Linux发行版的新选择

    年前最后一场技巧盛宴 | 1月27日与京东、日记易技巧大年夜咖畅聊智能化运维成长趋势!如不雅你读过那篇《Ubuntu 十个令人惊奇的事实》,你可能知道 Google 应用了一个名为 Goobuntu 的 Linux 发行版作为>>>详细阅读


    本文标题:涨知识,原来可以这样用CSS来追踪用户

    地址:http://www.17bianji.com/lsqh/40440.html

关键词: 探索发现

乐购科技部分新闻及文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与乐购科技进行文章共享合作。

网友点评
自媒体专栏

评论

热度

精彩导读
栏目ID=71的表不存在(操作类型=0)