web端用户行为分析初探

需求

任意三方网页中插入一段js脚本，采集用户操作相关信息，发送到服务端处理，产出网站用户轨迹图，鼠标热力图，或者是行为还原动画等等。

实现思路

知乎上看到了老鱼分享的文章
用户行为分析解决方案

需要解决的问题

信息采集（终端平台信息，用户操作信息）
跨域请求
用户身份标识+会话控制

信息采集

终端信息的获取，暂时用的是这个库platform.js，简单易用，兼容性测试情况：Tested in Chrome 46-47, Firefox 42-43, IE 8-11, Edge 13, Safari 8-9, Node.js 0.10-6, & PhantomJS 1.9.8.

// on IE10 x86 platform preview running in IE7 compatibility mode on Windows 7 64 bit edition
platform.name; // 'IE'
platform.version; // '10.0'
platform.layout; // 'Trident'
platform.os; // 'Windows Server 2008 R2 / 7 x64'
platform.description; // 'IE 10.0 x86 (platform preview; running in IE 7 mode) on Windows Server 2008 R2 / 7 x64'

// or on an iPad
platform.name; // 'Safari'
platform.version; // '5.1'
platform.product; // 'iPad'
platform.manufacturer; // 'Apple'
platform.layout; // 'WebKit'
platform.os; // 'iOS 5.0'
platform.description; // 'Safari 5.1 on Apple iPad (iOS 5.0)'

// or parsing a given UA string
var info = platform.parse('Mozilla/5.0 (Macintosh; Intel Mac OS X 10.7.2; en; rv:2.0) Gecko/20100101 Firefox/4.0 Opera 11.52');
info.name; // 'Opera'
info.version; // '11.52'
info.layout; // 'Presto'
info.os; // 'Mac OS X 10.7.2'
info.description; // 'Opera 11.52 (identifying as Firefox 4.0) on Mac OS X 10.7.2'

用户ip获取，采用的是jsonp的方式，用的是ipify的open api

var ubaip;
/**
 * 客户端ip获取回调
 * @param  回调数据
 * @return null
 */
function ubaGetIPCallback(json) {
  ubaip = json.ip;
}

/**
 * JSONP获取当前ip
 * @return null
 */
function ubaGetIP() {
  var ipScript= document.createElement("script");
  ipScript.type = "text/javascript";
  ipScript.src="https://api.ipify.org?format=jsonp&callback=ubaGetIPCallback";
  document.body.appendChild(ipScript);
}

页面url及停留时长获取，这个比较简单，不在这里做解释了

注意，这里没有做鼠标轨迹绘制，用户点击事件的捕捉，先跑通了整个逻辑，后期做完善，优化

跨域请求

这里解决跨域问题的方案比较简单，像上图所说的，利用src属性可跨域的特点，动态加载一张图片来完成。这中跨域的方法的缺点是只能发起get请求

/*!
 * 跨域请求发送
 */

/**
 * 发送get请求
 * @param  url 请求url
 * @return null
 */
function ubaGet(url) {
  var img = new Image(0, 0);
  img.src = url;
  img.hidden = true;

  // 在全局变量中引用img，防止img被垃圾回收机制过早回收造成请求发送失败
  // var random_id = "_img_" + Math.random();
  // window[random_id] = img;

  document.body.appendChild(img);
}

用户身份标识+回话控制

传送到服务端的数据，一次会话(session，我这里设定的是5分钟)是一条记录，记录包括终端，客户的一些信息，还有个setp数组，这个step数组，就记录的用户轨迹。这个是以后需要拓展的重点。

用户这部分，上图描述的是通过apache给用户打标签，nginx也可以实现相同的效果，但是不能运用于上述需求场景。因为我们能做的只能在页面中插入一段脚本而已。

所以用户标记这功能需要手动实现，这就涉及到下面两个问题：

uuid的生成
cookie的读写

uuid的生成，我查找了一些资料，这里给出一种解决方案（不是最好的）。使用这个库node-uuid

cookie的读写，这里不再解释

/**
 * 获取指定名字的cookie
 * @param  cookie name
 * @return cookie
 */
function ubaGetCookie(name) {
  var arr, reg = new RegExp("(^| )"+name+"=([^;]*)(;|$)");
  if(arr = document.cookie.match(reg))
    return unescape(arr[2]);
  else
    return null;
}

/**
 * 标记用户
 * @param  {[type]}
 * @return {[type]}
 */
function ubaMarkUser(cookieName) {
  var date = new Date();
  date.setYear(2116);
  document.cookie = cookieName + '=' + uuid() + ';expires=' + date.toGMTString() + ';';
}

服务端接入

解决上述问题之后，接入一个简单的node server获取，整理信息然后持久化就可以了。后期还可以添加更高级的数据分析操作。

已经存在的问题

浏览器兼容性全面测试
uuid绝对不会重复的保证（不确定）
cookie禁用后的解决方案

TODO

用户行为更细粒度的监控（鼠标轨迹，点击事件，鼠标热力图的生成）
用户行为动画还原
根据数据对用户进行分析（打标签）

需求