2016-12-8

网站用户行为数据统计方案设计

最近公司针对网站用户浏览行为要做数据统计及分析（至于为什么不用目前市场上比较成熟的谷歌分析、百度统计以及新兴的GrowingIO，CTO说收集的信息太多，不敢用，好吧），毕竟现在的产品要一切以数据说话，当然是为了更好的了解用户以针对不同的用户制定不同的营销策略。打住……本文不是介绍数据分析以及现在比较火热的增长黑客的理论，而是要介绍一下针对网站用户行为数据，如何去做数据收集和统计。

系统设计

我在调研了谷歌统计、百度统计以及growingio的统计代码之后，得出网站用户行为数据统计的普遍方案如下：

html动态创建script标签，src指向一个analytics.js
analytics.js收集客户端数据，主要包括页面跟踪数据和事件跟踪数据，并将数据发给后端数据收集服务
后端数据收集服务接收数据写入数据库，并为前端页面设置用户跟踪cookie

整体的系统设计图如下：

DEMO

下面看一个简单的demo代码：

第一步：html动态创建script标签，src指向一个analytics.js

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

第二步：analytics.js收集客户端数据，主要包括页面跟踪数据和事件跟踪数据，并将数据发给后端数据收集服务

(function() {
  var params = {};
  if (document) {
    params.url = document.URL || '';
    params.title = document.title || '';
    params.referer = document.referer || '';
    params.domain = document.domain || '';
  }
  if (window && window.screen) {
    params.sh = window.screen.height || 0;
    params.sw = window.screen.width || 0;
    params.cd = window.screen.colorDepth || 0;
  }
  if (navigator) {
    params.lang = navigator.language || '';
  }
  if (_ma) {
    for (var i in _ma) {
      switch (_ma[i][0]) {
        case '_setAccount':
          params.account = _ma[i][1];
          break;
        case '_trackEvent':
          params.eventCategory = _ma[i][1];
          params.eventAction = _ma[i][2];
          params.eventLabel = _ma[i][3] || '';
          params.eventValue = _ma[i][4] || '';
          break;
        default:
          break;
      }
    }
  }
  var args = '';
  for (var i in params) {
    if (args != '') {
      args += '&'
    }
    args += i + '=' + encodeURIComponent(params[i]);
  }
  var image = new Image(1, 1);
  image.src = 'http://www.smartstudy.com/collect?' + args;
})();

第三步：后端数据收集服务接收请求并把数据写入数据库，并为前端页面设置用户跟踪cookie

// node.js
app.get('/collect', function(req, res) {
  // 后端接收到数据后可以写数据库，可以写到日志服务，这里只是简单的打印一下
  console.log('req.query==', req.query);
  res.send('ok');
})

以上就实现了一个很简单的数据收集系统，只实现了页面数据的收集，当然如果要真正用于生产环境还有很多需要考虑的，比如事件跟踪数据，数据格式的确定，页面跳转导致数据丢失的问题，数据清理等等。
至于收集到数据之后的数据分析问题由于涉及到大数据、用户画像之类的问题了，笔者不熟悉，所以就不再说了。

linfeng

网站用户行为数据统计方案设计

系统设计

DEMO

参考：