js埋点技术入门解析，服务器安装

在这里插入图片描述
一般在企业种我们都会在html页面设置js埋点代码、
1、js写死在页面与页面耦合性太强不利于维护，不利于后续维护，如何解耦合？
将埋点代码写在单独文件、

 <script  type=text/javascript  src="xxx/xxx.js"> 指向自己站点的相对引入
  <script  type=text/javascript  src="www.xxx.com/xxx/xxx.js"> 指向其他站点的绝对路径引入

2、如果往自身后台发送数据会造成服务器压力过大，
答：我们可以将采集的数据单独提取处理部署一台服务器（专门用来采集数据的接受）但是这样又会出现跨域问题出现，
3、跨域问题解析与解决方案
解答：跨域：主机协议端口，js的同源策略问题会阻止跨域，如何将采集的数据发送到单独服务器还能解决跨域问题？这里我们可以使用图片，将图片大小设置为1*1
（这样不会对页面造成污染）在参数后面携带我们需要的数据即可，京东便史这样设置，表面上在请求图片，背后却是在得到采集的数据~~明修栈道、暗度陈仓
而这台单独采集数据的服务器只需要接收请求、解析数据、保存数据

红色框代表服务器
一般流程步骤：
1、客户请求一个页面、
2、触发埋点代码、采集数据
3、发送图片（携带数据）到后端
4、后端接收数据、解析数据、响应图片、种植cookie
5、响应客户

埋点技术扩展：js自调用匿名函数（立即调用这个函数并且只调用一次、一般用于页面初始化）
格式： (function(){xxxx(引入采集数据的js)})();
第一对括号向脚本返回未命名的函数；后一对空括号立即执行返回的未命名
函数，括号内为匿名函数的参数。

自调用匿名函数的好处是，避免重名，自调用匿名函数只会在运行时执行一
次，一般用于初始化。

埋点js片段：

<script type="text/javascript">   var _maq = _maq || [];   _maq.push(['_setAccount', 'UA-XXXXX-X']);   (function() {     var ma = document.createElement('script'); ma.type = 'text/javascript'; ma.async = true;     ma.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ma.js';     var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ma, s);   })(); </script>

环境部署：

服务器中安装依赖 yum -y install gcc perl pcre-devel openssl openssl-devel 
 
上传 LuaJIT-2.0.4.tar.gz 并安装 LuaJIT tar -zxvf LuaJIT-2.0.4.tar.gz -C /usr/local/src/ cd /usr/local/src/LuaJIT-2.0.4/ make && make install PREFIX=/usr/local/luajit 
 
设置 LuaJIT 环境变量 vi /etc/profile export LUAJIT_LIB=/usr/local/luajit/lib export LUAJIT_INC=/usr/local/luajit/include/luajit-2.0 source   /etc/profile 
 
创建 modules 文件夹，保存 nginx 依赖的模块 mkdir -p /usr/local/nginx/modules 
 
上传 nginx 依赖的模块 set-misc-nginx-module-0.29.tar.gz  lua-nginx-module-0.10.0.tar.gz ngx_devel_kit-0.2.19.tar.gz echo-nginx-module-0.58.tar.gz 
 
将依赖的模块直接解压到 modules 目录 tar -zxvf lua-nginx-module-0.10.0.tar.gz -C /usr/local/nginx/modules/ tar -zxvf set-misc-nginx-module-0.29.tar.gz -C /usr/local/nginx/modules/ tar -zxvf ngx_devel_kit-0.2.19.tar.gz -C /usr/local/nginx/modules/ tar -zxvf echo-nginx-module-0.58.tar.gz -C /usr/local/nginx/modules/ 
 
安装 openresty tar -zxvf openresty-1.9.7.3.tar.gz -C /usr/local/src/ cd /usr/local/src/openresty-1.9.7.3/ ./configure --prefix=/usr/local/openresty --with-luajit && make && make install

安装 nginx tar -zxvf nginx-1.8.1.tar.gz -C /usr/local/src/ 
 
编译 nginx 并支持其他模块 cd /usr/local/src/nginx-1.8.1/ ./configure --prefix=/usr/local/nginx \     --with-ld-opt="-Wl,-rpath,/usr/local/luajit/lib" \     --add-module=/usr/local/nginx/modules/ngx_devel_kit-0.2.19 \     --add-module=/usr/local/nginx/modules/lua-nginx-module-0.10.0 \     --add-module=/usr/local/nginx/modules/set-misc-nginx-module-0.29 \     --add-module=/usr/local/nginx/modules/echo-nginx-module-0.58  make -j2 make install 
 
备注：如果对 linux 相关操作不熟，请严格按照上述步骤搭建环境，切
记心细，心细，再心细。

在这里插入图片描述

js埋点技术入门解析，服务器安装

猜你喜欢