前端埋点原理图

如上所示，从broswer到page，再到javascript以及后端backend，浏览器返回正常程序运行结果，本地文件中返回最终的log

步骤：

（一）埋点阶段
（二）数据收集阶段
（三）后端处理阶段

如上，针对“前端埋点”，主要分为这么三部，对应到上面的原理图，
步骤一即（create script element，前端做），
步骤二即（collect client data，前端做），
步骤三即（backend和log，后端去解析数据）.

埋点

html的script中添加节点

    <script type="text/javascript">var _maq = _maq || [];(function () {var ma = document.createElement('script');ma.type = 'text/javascript';ma.async = true;ma.src = "http://localhost/data/js/ma.js";var s = document.getElementsByTagName('script')[0];s.parentNode.insertBefore(ma, s);})();</script>

匿名的js函数，是埋点代码的重中之重，如上代码所示，在Dom节点添加名为‘script’的元素，设置"ma.async = true"，表示让其异步执行，并将其src属性指定为一个单独的js文件（将ma.js引入进来），最终将该element插到当前Dom树上。而这个过程最终的目的即请求并执行上述的ma.js文件。

去引用的ma.js

(function (win) {win.lc = {}lc.trackInfo = function (paramsArr) {console.log('paramsArr1==>', paramsArr);var params = {};//解析paramsArr配置if (paramsArr) {paramsArr.forEach((item, index) => {params[item[0]] = item[1];});}//拼接参数串var args = '';for (var i in params) {// alert(i);if (args != '') {args += '&';}args += i + '=' + params[i];           //将所有获取到的信息进行拼接}//通过伪装成Image对象，请求后端脚本var img = new Image(1, 1);var src = 'http://localhost/data/dataCollection/log.gif?args=' + encodeURIComponent(args);img.src = src;}})(window);

如上代码所示，是ma.js文件中的代码，如上我做的注释，可以将这个过程分为3步骤;
（1）解析、获取用户各种信息，如上：1.通过dom树，获取到的url，域名，上一跳信息；2.通过windows，获取到的显视屏的分辨率、长宽（前两类通过内置的js对象获取）；3.通过_maq全局数组，获取埋点时埋下的用户行为数据。
（2）将上步的用户信息按特定格式拼接，装到args这个参数中。
（3）伪装成图片，请求到后端controller中，并将args作为http request参数传入，做后端分析。

之所以使用图片请求后端controller而不是ajax直接访问，原因在于ajax不能跨域请求，ma.js和后端分析的代码可能不在相同的域内，ajax做不到，而将image对象的src属性指向后端脚本并携带参数，就轻松实现了跨域请求。

**
注意：ma.js和log.gif静态资源放位置需要让后端解析方知道**

数据收集

cj.trackInfo([['userName', '张三'], ['userPhone', '15900123311'], ['userID', '420444199812120001']]);

后端处理

@Controller
@RequestMapping("/dataCollection")
public class DataCollection {@RequestMapping(value = "log.gif")public void analysis(String args, HttpServletResponse response) throws IOException {System.out.println(args);//日志收集 response.setHeader("Pragma", "No-cache");response.setHeader("Cache-Control", "no-cache");response.setDateHeader("Expires", 0);response.setContentType("image/gif");OutputStream out = response.getOutputStream();BufferedImage image = new BufferedImage(1, 1, BufferedImage.TYPE_INT_RGB);ImageIO.write(image, "gif", out);out.flush();}
}

如上所示，通过解析http request中的参数，即将在前端获取到的用户信息拿到了后端，这个为了验证，将其打印到控制台，接下来就是做日志收集工作了，到此前端获取用户信息已经完成。之后，生成一副1×1的空gif图片作为响应内容并将响应头的Content-type设为image/gif，返回到前端代码中。
下图是在控制台拿到的用户信息：

百度统计、谷歌统计原理以及自定义统计源码相关推荐

❤️缓存集合（一级缓存、二级缓存、缓存原理以及自定义缓存—源码+图文分析，建议收藏） ❤️
❤️缓存集合(一级缓存.二级缓存.缓存原理以及自定义缓存-源码+图文分析,建议收藏) ❤️ 查询 : 连接数据库 ,耗资源!一次查询的结果,给他暂存在一个可以直接取到的地方!--> 内存 : 缓 ...
百度seo快排点击系统源码[易语言]拨号模拟点击（仅供学习使用！）
[百度seo快排点击系统源码]易语言写的利用chrome模拟点击自己网站排名,从而提高百度搜索排名的软件源码.真实可用,请勿用作非法用途. 文件:n459.com/file/25127180-4773 ...
百度API全国城市地区天气查询HTML源码
介绍: 百度API全国城市地区天气查询HTML源码网盘下载地址: https://zijiewangpan.com/LlvIkuYKeKt 图片:
java中注解动态传参_Java自定义注解源码+原理解释（使用Java自定义注解校验bean传入参数合法性）...
Java自定义注解源码+原理解释(使用Java自定义注解校验bean传入参数合法性)java 前言:因为前段时间忙于写接口,在接口中须要作不少的参数校验,本着简洁.高效的原则,便写了这个小工具供本身使 ...
QQ自定义在线状态源码
介绍: QQ自定义在线状态源码: 自定义网页在线修改QQ在线状态,需SVIP才可实现,先看使用教程获取设备IMEI. 网盘下载地址: http://kekewl.cc/v37EAgDW96o 图片:
buildroot添加编译自定义APP源码的方法
概要 buildroot添加编译自定义APP源码, 首先在package/Config.in中添加指向新增APP目录的Config.in: 然后在package中新增目录APP,并在里面添加Confi ...
仿百度文库、豆丁文档网站源码在线文档分享系统最新版+带全套工具
非常棒的一套在线文档分享系统源码,仿百度文库.豆丁文档网站源码,在这里完全免费提供给大家学习.在这里无需任何币就可以下载到非常多的精品源码,如果觉得好站长资源做的不错,请帮忙推荐给更多的站长朋友. 此 ...
C++Poisso statistics泊松统计的实现算法(附完整源码)
C++Poisso statistics泊松统计的实现算法 C++Poisso statistics泊松统计的实现算法完整源码(定义,实现,main函数测试) C++Poisso statistics ...
C++计算实时输入数据的统计信息实现算法(附完整源码)
C++计算实时输入数据的统计信息实现算法 C++计算实时输入数据的统计信息实现算法完整源码(定义,实现,main函数测试) C++计算实时输入数据的统计信息实现算法完整源码(定义,实现,main函数测 ...
[附源码]java+ssm计算机毕业设计基于销售统计的超市货架管理系统a1tdk(源码+程序+数据库+部署)
项目运行项目含有源码(见文末).文档.程序.数据库.配套开发软件.软件安装教程环境配置: Jdk1.8 + Tomcat7.0 + Mysql + HBuilderX(Webstorm也行)+ E ...

百度统计、谷歌统计原理以及自定义统计源码

前端埋点原理图

埋点

数据收集

后端处理

百度统计、谷歌统计原理以及自定义统计源码相关推荐

最新文章

热门文章