开发者学堂课程【大数据分析之企业级网站流量运营分析系统开发实战（第一阶段）：网站流量日志埋点收集- -方案二--点击事件数据采集实现】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/693/detail/12182
网站流量日志埋点收集- -方案二--点击事件数据采集实现
内容简介
一、页面点击事件
二、操作演示
本节内容我们学习自定义埋点收集用户行为数据的第二套方案：页面点击事件的采集。在这里我们将会学习如何通过去绑定相关事件来采集用户相关的行为数据。
一、页面点击事件
首先打开我们的资料，找到参考文档中的方案二
在这里为了方便，模拟了一个首页。
1.首先打开 index2.html，看到页面的 body 部分，我们创建了两个 a 标签。
一个跳转至 page1页面，另一个跳转至 page2页面。跳转中可以看到 clstag 属性是没有颜色的，所以这里存在一个小技巧：如果使用 Notoped++打开 html 页面，会发现当中只要是内置的属性，都以红色存在，因为 clstag 属性不是红色，说明它是用户自定义标签，这样的标签通常跟业务相关。
比如这里我们通过简单的三个单词 click|index|page1| 来告诉这个事件如果发生是怎样的数据，数据收集放在日志中，解读就是这里发生了点击事件，是从首页点击跳转至 page1，这样就可以清楚的知道这个行为发生在哪，是什么样的行为。
当然也可以结合具体业务进行各种标签的设置，不需要则可以舍去。
接下来查看埋点代码的编写（图中灰色部分）
代码为：
Var_maq =_ maq | |[];
_maq. push(['_ setAccount', 'AllenWoon']) ;
$ (function() {
$("a") .click (function() {
var clstag = $(this) .attr ("clstag") ;
var_ a_ value =$(this) .text() ;
_maq.push(['_ a_ value' ，_ a_ value]) ;
clstag = clstag.split('|');
for (i in clstag) {
_maq.push(['type'+i, clstag[i]]);
}
sendRequest() ;
})
}) ;
function sendRequest () {
var ma = document. createElement ('script') ;
ma.type = 'text/javascript' ;
ma.async = true;
ma.src = 'http://192.168 .227.153/ma.js';
var s = document . getEl ementsByTagName ('script') [0];
s.parentNode. insertBefore (ma, s) ;
}
</script>
在之前的采集过程是通过匿名函数自调用来触发采集，但在这里是通过点击事件来进行采集。首先为了方便书写 js，我们未写原生而是引入了 Jquery-3.2.1.min.js 。
这里给 a 标签绑定了一个 click 事件，接下来看下面的逻辑，首先是$(this)，this表明哪个a标签被点击，this 就代表谁，通过 clatag 值去提取当中自定义标签属性值，接下来提取 text（）文本值，提取之后把var clstag = $(this) .attr ("clstag") ;var_ a_ value =$(this) .text() ; 保存在我们创建的一个全局的数组 maq 中。之后因为标签值进行了优化，所以给它分割然后保存进数组中。保存完之后，我们调用了 sendRequest()方法，这个方法也是函数，我们发现它不再是匿名函数。
接下来看 function sendRequest () { 部分的逻辑，首先创建了一个 script 标签，是 js 标签，是异步加载的 src 属性地址是'http://192.168 .227.153/ma.js'; 然后找到 document . getEl ementsByTagName 的父标签，进行插入放在dom 文档树上。
这一段逻辑就是之前所讲匿名函数自调用加载创建标签的逻辑，只不过这里不是匿名函数自调用行为触发，而是通过点击事件行为触发，调用sendRequest（）行为就完成了标签的数据和用户地点击行为一一对应，只要点击 a 标签，事件 sendRequest（）就会触发，触发后方法就会被调用，数据就会被收集。
2.下面学习跳转页面 page1.html
首先打开 page1.html
里面是匿名函数自调用，逻辑还是动态创建标签引入采集事件的js。
3.ma.js 和 nginx.conf 的代码基本一样，重点要注意当收集的参数属性变多之后，当中进行解析拼接会变多。
4.比如在 nginx 中，因为传递过来的参数变多，解析的参数就变多了 如图。
二、操作演示
打开服务器，来到node-1机器，根据我们的架构图，我们模拟的是对外提供web服务的服务器，所以需要把首页，juery-3.2.1.min.js
和两个跳转页面放入机器中。这里需要强调：当你想要把方案部署起来并且成功时，一定要确定首页的 ip 和环境的ip 吻合。
1.首先打开 node-1，查看 ip 为153，等下采集数据的 js 将会位于这台机器上，跳转是跳转到自己本机151。接下来打开page1，page2确保验证，都是153，所以没问题。
2.来到 node-1，node-1使用的 apache service，所以静态资源路径是 var/www/html,选择首页，juery-3.2.1.min.js和两个跳转页面，将它们发送至 node-1中
- 上传成功后，在页面中进行查看。
打开浏览器，选择192.168.227.151/index2.html
4.点击 F12，这时候就是个正常访问页面
但是没有进行数据收集，原因是未点击标签点击1和点击2，点击事件不会触发，不会触发方法就不会被调用，就不会进行数据收集。
5.接下来启动 nginx
首先来到 nginx 的安装目录，目录在 usr/local/nginx
再 cd 到 html 中，放入采集数据的 ma.js,上传之前确定一下里面的 IP 是否发生改变，确认无误后上传
6.上传成功后，需要针对 nginx 的配置文件进行修改，cd 至 conf 中，把之前的配置删了，把新的配置放入，上传之后回到根目录下进行启动，启动使用 sbin/nginx -c conf/nginx.conf 。这样就完成相关项目的启动
7.接下来查看相关效果是否正确，按下 ctri+h，把缓存删除，清除之后按下 F12，为了查看效果，需要把日志打开tail -f logs/user_defined.log
打开页面刷新后，日志并未改变，所以没有在采集用户数据，因为未点击，采集数据的 js：http://192.168.227.153.ma.js 模拟访问后可以获取。
所以接下来看埋点采集的时刻，是否可以收集数据。
点击 page1，发现日志开始收集
当我们点击标签时会进行两条标签的收集，如，点击这是点击2，日志跳转了两次，因为点击标签的行为会触发一条数据的收集，然后这个行为会让页面打开，页面打开自己加载时匿名函数调用自己也会采集一次，所以会触发两条数据的收集。
这也从侧面告诉大家在我们常见的电商类网站中为什么相关的各种行为会被收集，很简单，因为正常浏览商品时背后会进行数据收集，作为后面分析的依据。
但是出现问题：我们点击的是中文字，代码却是乱码。
