网页埋点的简单实现
本文抛开数据增长方法和埋点技术原理的大道理，通过一个简单的埋点小实例帮助大家更好的了解埋点
一、什么是数据埋点：
- 埋点是网站和APP等产品进行日常改进及数据分析的数据采集基础，根据采集得到的用户行为数据（例如：页面访问路径，点击了哪一个按钮）进行数据分析，从而更加合理的推送跟优化，增强用户体验。现在市面上有很多第三方埋点服务商，百度统计、友盟、growingIO 等。
常见的埋点方法包括：
- 手动埋点：根据业务需求在需要采集数据的地方进行埋点，是比较常见的埋点手段。
- 可视化埋点：一些事件带有元素唯一标识。通过在后台进行埋点配置，将元素与要采集信息关联起来，然后自动生成埋点代码嵌入到页面中，目前发展比较火的埋点方式，但是技术上的实现跟推广比较困难
- 无埋点：简单来说就是没有埋点，前端会采集用户所有的行为跟信息，然后后台再对这些信息进行筛选，由于数据量巨大，对服务器的性能要求很高。
二、网页埋点小案例
案例分析： 页面中包含6张不同的图片。通过用户的浏览记录用户的相关信息
1.页面准备
<body>
<img src="imgae/1.jpg" id="img1"/>
<img src="imgae/2.jpg" id="img2"/>
<img src="imgae/3.jpg" id="img3"/>
<img src="imgae/4.jpg" id="img4"/>
<img src="imgae/5.jpg" id="img5"/>
<img src="imgae/6.jpg" id="img6"/>
</body>
2.给图片设置唯一标识（可以是自定义）
<body>
<img src="imgae/1.jpg" id="img1" sid="图片1"/>
<img src="imgae/2.jpg" id="img2" sid="图片2"/>
<img src="imgae/3.jpg" id="img3" sid="图片3"/>
<img src="imgae/4.jpg" id="img4" sid="图片4"/>
<img src="imgae/5.jpg" id="img5" sid="图片5"/>
<img src="imgae/6.jpg" id="img6" sid="图片6"/>
</body>
小结： 定义sid属性标记每一张图片
3. 设置事件
<script>
$(function(){
$("img").click(function(){
//用户点击图片就会修改图片样式
$(this).css("width","300px");
$(this).css("height","300px");
var sid = $(this).attr("sid");
//埋点，将用户的点击信息发送到服务器
$.get("/TestDemo/ajaxServlet","sid="+sid);
})
});
</script>
小结：触发事件定义为点击事件，用户点击图片就会触发并进行相关信息的收集
4.服务器收集相关信息
//配置信息
@WebServlet("/ajaxServlet")
public class ajaxServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//收集用户点击的图片信息
String sid = request.getParameter("sid");
//收集用户的浏览器型号
String requestHeader = request.getHeader("User-Agent");
//收集用户的访问路径
String requestURI = request.getRequestURI();
Date date = new Date();
//记录用户的点击事件
SimpleDateFormat format = new SimpleDateFormat("yyyy年MM月dd日HH:mm:ss");
String date1 = format.format(date);
//记录用户主机相关信息
String remoteHost = request.getRemoteHost();
System.out.println(remoteHost+"\t"+date1+"\t"+requestURI+"\t"+requestHeader+"\t"+sid);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request,response);
}
}
小结：案例中是将得到的信息打印出来，也可以根据需要将信息记录在相应的文件中保存
5.打印相关信息
0:0:0:0:0:0:0:1 2019年09月05日21:01:03 /TestDemo/ajaxServlet Mozilla/5.0 (Windows NT 10.0; WOW64)
AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.132 Safari/537.36 图片3
0:0:0:0:0:0:0:1 2019年09月05日21:01:04 /TestDemo/ajaxServlet Mozilla/5.0 (Windows NT 10.0; WOW64)
AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.132 Safari/537.36 图片4
0:0:0:0:0:0:0:1 2019年09月05日21:01:05 /TestDemo/ajaxServlet Mozilla/5.0 (Windows NT 10.0; WOW64)
AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.132 Safari/537.36 图片2
0:0:0:0:0:0:0:1 2019年09月05日21:01:05 /TestDemo/ajaxServlet Mozilla/5.0 (Windows NT 10.0; WOW64)
AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.132 Safari/537.36 图片4
0:0:0:0:0:0:0:1 2019年09月05日21:01:06 /TestDemo/ajaxServlet Mozilla/5.0 (Windows NT 10.0; WOW64)
AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.132 Safari/537.36 图片1
0:0:0:0:0:0:0:1 2019年09月05日21:01:07 /TestDemo/ajaxServlet Mozilla/5.0 (Windows NT 10.0; WOW64)
AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.132 Safari/537.36 图片4
0:0:0:0:0:0:0:1 2019年09月05日21:01:07 /TestDemo/ajaxServlet Mozilla/5.0 (Windows NT 10.0; WOW64)
