关于“网页埋点”的简单介绍与实现

编程入门行业动态更新时间:2024-10-27 10:24:30

网页埋点的简单实现

本文抛开数据增长方法和埋点技术原理的大道理，通过一个简单的埋点小实例帮助大家更好的了解埋点

一、什么是数据埋点：

埋点是网站和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)