内容简介:利用空白gif图片,实现数据上报,数据埋点。开发中经常需要统计页面点击,曝光,包括一些数据埋点。当然,埋点数据上报的方式有很多,下面介绍纯css的方式和一句话js方式。纯css方式实现数据上报很简单。原理就是利用css属性,但是弊端也比较明显,就是点击只能加载一次。例如如下代码,实现跟踪botton1和botton2的点击事件上面代码仅仅能跟踪一次,button1点击第二次就跟踪不了了。
前言
利用空白gif图片,实现数据上报,数据埋点。开发中经常需要统计页面点击,曝光,包括一些数据埋点。当然,埋点数据上报的方式有很多,下面介绍纯css的方式和一句话js方式。
纯css方式
纯css方式实现数据上报很简单。原理就是利用css属性,但是弊端也比较明显,就是点击只能加载一次。例如如下代码,实现跟踪botton1和botton2的点击事件
.button-1:active::after { content: url(./haorooms.gif?action=click&id=button1); display: none; } .button-2:active::after { content: url(./haorooms.gif?action=click&id=button2); display: none; }
上面代码仅仅能跟踪一次,button1点击第二次就跟踪不了了。
因此,在统计按钮点击次数的时候,纯css方式不是很好实现,除非你用css处理器,less或者sass来写。每次点击,动态改变一下gif,因为相同的图片,浏览器仅仅渲染一次。详情请看之前文章: https://www.haorooms.com/post/web_http_request
统计浏览器支持css3某个属性
.any-element { background: url(./pixel.gif?grid=0); } @supports (display: grid) { .any-element { background: url(./pixel.gif?grid=1); } }
如上,统计浏览器是否支持display: grid
retina屏幕占比统计
.any-element { background: url(./pixel.gif?retina=0); } @media screen and (-webkit-min-device-pixel-ratio: 2) { .any-element { background: url(./pixel.gif?retina=1); } }
是否支持某字体
@font-face { font-family: anyFontName; src: url(../image/pixel.gif?font=unmatch&id=haorooms); } .element-with-text { font-family: 'Source Han Sans CN', 'anyFontName'; }
js方式数据埋点
上面纯css方式比较鸡肋,我们常用的方式是js方式,其实js方式实现很简单,一句话就可以实现。
同样是点击埋点。如下:
<button onClick="aa()">haorooms</button> <script> function aa(){ new Image().src = './haorooms.gif?ac=haorooms&'+Math.random() } </script>
每点击一次haorooms按钮,都会通过haorooms.gif向服务器发送埋点数据。如下图:
这样就可以精准的获取用户点击的数据了。
同理,曝光数据等,也可以这么获取。
查看案例,请点击
注:haorooms.gif是一个真实的图片,一般是1px*1px大小的空白图。详情请看上面案例。
以上所述就是小编给大家介绍的《利用空白gif图片,实现数据上报,数据埋点》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- CSS蛋疼应用之:数据上报和HTML验证
- 在单页应用中,如何优雅的上报前端性能数据
- 55世纪最高邀请码18648287,通过 Jaeger 上报 Go 应用数据
- 蚂蚁金服分布式链路跟踪组件 SOFATracer 数据上报机制和源码分析 | 剖析
- 前端错误监控与上报
- Flutter异常监测与上报
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。