前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >从零开始搭建前端数据监控系统(一)-同类产品调研

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

作者头像
寒月十八
发布2018-01-30 11:48:44
1.4K0
发布2018-01-30 11:48:44
举报
文章被收录于专栏:前端架构与工程
1 Google Analytics

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

代码语言:javascript
复制
ga('send', {
  'hitType': 'pageview',
  'page': '/home'
});

而不是

代码语言:javascript
复制
ga('send', 'pageview','/home');

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

1.1 ga()命令队列

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

ga()队列有两种形式:

命令模式,如下:
代码语言:javascript
复制
ga(command, [...fields], [fieldsObject])

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

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

  1. 创建跟踪器命令create。 ga('create', [trackingId], [cookieDomain], [name], [fieldsObject]);
  2. 跟踪器操作命令send/get/require/remove。以send命令为例: ga('[trackerName.]send', [hitType], [...fields], [fieldsObject]); 其中trackerName是可选的,代表跟踪器的名称,将针对该跟踪器调用要执行的命令。如果未指定跟踪器名称,则针对默认跟踪器调用相应的命令。
  3. 提供插件命令provide。 ga('provide', pluginName, pluginConstuctor);

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

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

回调函数,如下:
代码语言:javascript
复制
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使用最多的是getByNamegetAll,作用是获取指定name的跟踪器和获取全部跟踪器。

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

1.3 跟踪器对象API

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

1.4 GA里的model

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

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

代码语言:javascript
复制
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脚本中使用下述语法发送自定义维度信息:

代码语言:javascript
复制
ga('send', 'pageview', {
  'dimension1':  'My Custom Dimension'
});

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

2. 百度统计

百度统计的部署模式是:

  1. 在引入统计js脚本之前必须手动生命全局对象_hmt
  2. 统计js文件与GA一样使用document.write写入文档,所以调用位置最好在<head>顶部或者<body>顶部;
  3. _hmt是个数组对象,统计js脚本加载完毕后,将需要统计的指标push_hmt里,如下: _hmt.push(['_setAccount', '0123456789ABCDEF0123456789ABCDEF']);
2.1 自定义字段

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

代码语言:javascript
复制
_hmt.push(['_setCustomVar', 1, 'visitor', 'baidu', 1]);

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

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

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

上述代码中的自定义字段{login: isLogin}中的值isLogin如php模板输出,随后加入到统计队列中。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2016-03-30 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1 Google Analytics
    • 1.1 ga()命令队列
      • 命令模式,如下:
        • 回调函数,如下:
          • 1.2 ga对象API
            • 1.3 跟踪器对象API
              • 1.4 GA里的model
                • 1.5 自定义维度和指标
                • 2. 百度统计
                  • 2.1 自定义字段
                  领券
                  问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档