炫意html5
最早CSS3和HTML5移动技术网站之一

利用空白gif图片,实现数据上报,数据埋点

前言

利用空白gif图片,实现数据上报,数据埋点。开发中经常需要统计页面点击,曝光,包括一些数据埋点。当然,埋点数据上报的方式有很多,下面介绍纯css的方式和一句话js方式。

纯css方式

纯css方式实现数据上报很简单。原理就是利用css属性,但是弊端也比较明显,就是点击只能加载一次。例如如下代码,实现跟踪botton1和botton2的点击事件

.button-1:active::after {
content: url(./炫H5.gif?action=click&id=button1);
display: none;
}
.button-2:active::after {
content: url(./炫H5.gif?action=click&id=button2);
display: none;
}

上面代码仅仅能跟踪一次,button1点击第二次就跟踪不了了。

因此,在统计按钮点击次数的时候,纯css方式不是很好实现,除非你用css处理器,less或者sass来写。每次点击,动态改变一下gif,因为相同的图片,浏览器仅仅渲染一次。详情请看之前文章:https://www.xyhtml5.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=炫H5);
}
.element-with-text {
font-family: 'Source Han Sans CN', 'anyFontName';
}

js方式数据埋点

上面纯css方式比较鸡肋,我们常用的方式是js方式,其实js方式实现很简单,一句话就可以实现。

同样是点击埋点。如下:

<button onClick="aa()">炫H5</button>
<script>
function aa(){
new Image().src = './炫H5.gif?ac=炫H5&'+Math.random()
}
</script>

每点击一次炫H5按钮,都会通过炫H5.gif向服务器发送埋点数据。如下图:

enter image description here

上面函数,我们可以改造一下,通过传入key,value,来进行不同的埋点。最简单的如下:

    function aa(key,value){
new Image().src =`./炫H5.gif?${key}=${value}&${Math.random()} `
}

当然,实际业务中,可能没有这么简单,还需要添加各种监控,因此,有时候随机数就可以不要了~

因此通过这种最简单的方法,可以精准的获取用户点击的数据了。

同理,曝光数据等,也可以这么获取。

查看案例,请点击

注:炫H5.gif是一个真实的图片,一般是1px*1px大小的空白图。详情请看上面案例。

炫意HTML5 » 利用空白gif图片,实现数据上报,数据埋点

Java基础教程Android基础教程