您的位置：首页 > Web前端

从零开始搭建前端数据监控系统(一)-同类产品调研

2016-03-30 12:03 190 查看

1 Google Analytics

GA向window暴露一个名为
ga()
的全局函数，ga()函数以参数格式、数目来分发不同的行为。这种模式的好处是API单一，不易混淆。但是缺点同样明显，在调用
ga()
时需要谨慎处理参数，包括格式、数目、名称等，推荐使用
fieldsObject
的方式调用，比如：

ga('send', {
'hitType': 'pageview',
'page': '/home'
});

而不是

ga('send', 'pageview','/home');

GA的API总体分为两种：全局的ga()命令队列和跟踪器对象的API。

1.1 ga()命令队列
ga()命令队列的设计理念是组织命令执行队列，调用ga()本质上是将命令加入队列中。

ga()队列有两种形式：

命令模式，如下：
ga(command, [...fields], [fieldsObject])

这种模式是指定具体的命令
command
，
fields
和
fieldsObject
是两种组织参数的形式，可以组合使用也可以独立使用，建议全部使用
fieldsObject
。

command
命令从功能上可以分为三类：

创建跟踪器命令
create
。

ga('create', [trackingId], [cookieDomain], [name], [fieldsObject]);


跟踪器操作命令
send
/
get
/
require
/
remove
。以
send
命令为例：

ga('[trackerName.]send', [hitType], [...fields], [fieldsObject]);

其中
trackerName
是可选的，代表跟踪器的名称，将针对该跟踪器调用要执行的命令。如果未指定跟踪器名称，则针对默认跟踪器调用相应的命令。

提供插件命令
provide
。

ga('provide', pluginName, pluginConstuctor);


这个命令是用于编写插件使用的，具体使用方法请参考如何编写GA插件。


各命令的详情参考官方文档


回调函数，如下：
ga(readyCallback)

如果在调用 ga() 命令队列函数时向其传递一个函数，会将该函数的执行安排在队列中的下一位置。调用此函数时以默认跟踪器作为第一个参数。如果尚未创建默认跟踪器，第一个参数将为 undefined。

由于只有在 analytics.js 库完全载入之后才能执行命令，向命令队列传递函数最常见的情况是指定回调函数，以便在 analytics.js 库完全载入和可用时调用。

1.2 ga对象API
ga
对象与
ga()
队列是截然不同的。ga()队列函数是GA暴露出来的全局函数，
analytics.js
库文件是异步加载的，ga()队列的
create
命令会触发
analytics.js
的加载。而ga对象要等
analytics.js
加载完成之后才可以使用，也就是
readyCallback
内才可使用其API。


可能有同学会疑惑为何相同名字的ga能够提供不同的API。这在JavaScript语言中并不难实现。
analytics.js
加载完成后再初始化时期给全局域中本已存在的ga对象追加新的API方法，JavaScript中函数本质也是对象，所以对象的扩展同样适用于函数。


ga对象的API使用最多的是
getByName
和
getAll
，作用是获取指定name的跟踪器和获取全部跟踪器。

ga对象的其他API不建议使用，可以参考

ga 对象方法参考。

1.3 跟踪器对象API
跟踪器对象的API有
get
/
set
/
send
三种，作用分别是获取字段值、设置字段值和发送匹配。这些API同样不建议使用，感兴趣的同学可以参考跟踪器对象参考。

1.4 GA里的model
除了上文提高的ga()命令队列、ga对象和跟踪器对象以外，GA中还存在另外一个概念：
model
。

顾名思义，model代表的是数据模型。但是model并非是所有跟踪器的数据模型，暴露出来的model API是针对具体跟踪器的。比如：

ga(function(tracker) {
// Modifies sendHitTask to log the model's "hitPayload" field.
tracker.set('sendHitTask', function(model) {
var hitPayload = model.get('hitPayload')
.replace('sensitive_information', 'XXXXX');
// Updates the model with the new hitPayload string.
model.set('hitPayload', hitPayload);
});
});

model的API需要配合跟踪器对象的API使用，详细信息可以参考Model 对象参考。

1.5 自定义维度和指标
GA可以自定义维度和指标，两者的详细区别可以参考维度和指标。可以简单的将维度理解为scope（类似百度统计的scope），比如用户的地理区域；指标是具体的量化标准。维度和指标可以单独统计，但是为了数据的细化，最好将两者组合统计。

自定义维护和指标需要首先在GA的管理后台定义，如下图所示：



图中的索引值是系统分配的，前端js脚本中使用下述语法发送自定义维度信息：

ga('send', 'pageview', {
'dimension1':  'My Custom Dimension'
});

dimension
后面的
1
就是系统分配的索引值。更加详细的信息参考自定义维度和指标.

2. 百度统计

百度统计的部署模式是：

在引入统计js脚本之前必须手动生命全局对象
_hmt
；

统计js文件与GA一样使用
document.write
写入文档，所以调用位置最好在
<head>
顶部或者
<body>
顶部；

_hmt
是个数组对象，统计js脚本加载完毕后，将需要统计的指标
push
到
_hmt
里，如下：

_hmt.push(['_setAccount', '0123456789ABCDEF0123456789ABCDEF']);


2.1 自定义字段
百度统计js可以通过
_setCustomVar
设置自定义统计字段，但是自定义的字段信息是需要提前确认的，要么使用页面的脚本逻辑获取，比如：

_hmt.push(['_setCustomVar', 1, 'visitor', 'baidu', 1]);

上述代码中的键值对
{visitor:'baidu'}
是自定义的统计字段，代表访问当前页面的用户来自于百度账号登录。这个信息需要页面中其他js脚本获取后再加入统计队列中。

除了使用页面js脚本，还可以配合后端模板，比如：

// isLogin是服务端输出的用户登录状态，登录用户为1，未登录用户为0
var isLogin = <?php echo $isLogin; ?>;
_hmt.push(['_setCustomVar', 1, 'login', isLogin, 2]);

上述代码中的自定义字段
{login: isLogin}
中的值
isLogin
如php模板输出，随后加入到统计队列中。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航