H5项目友盟埋点上报实践

使用友盟平台做H5统计分析的话可以使用小程序统计下的H5统计分析

使用步骤：
1、注册/登录平台
2、创建H5应用
3、集成SDK
4、查看统计数据

这里主要需要开发支持的步骤是集成SDK这一步骤，下面来具体讲一下这一步

1. 首先在我们创建平台应用成功后，可以拿到该应用生成的AppKey，然后就可以进行集成SDK的操作
2. 在项目的最外层（文档上是在页面head标签内）加入集成代码，确保aplus_queue不被污染

	// 友盟统计初始化
    (function(w, d, s, q, i) {
      w[q] = w[q] || [];
      var f = d.getElementsByTagName(s)[0],j = d.createElement(s);
      j.async = true;
      j.id = 'beacon-aplus';
      j.src = 'https://d.alicdn.com/alilog/mlog/aplus/' + i + '.js';
      f.parentNode.insertBefore(j, f);
    })(window, document, 'script', 'aplus_queue', '203467608');
    
	//集成应用的appKey
    aplus_queue.push({
      action: 'aplus.setMetaInfo',
      arguments: ['appKey', 'xxxxxxx']
    });

3. 配置好之后就可以进行事件埋点，在进行埋点之前，首先介绍一下action的各个属性值的用法

• 3.1 setMetaInfo
  用于变更SDK的默认设置

const {aplus_queue} = window;
aplus_queue.push({
 action: 'aplus.setMetaInfo',
  arguments: [metaName, metaValue, mode]
});
/** metaName 为可配置的元数据项，具体可配置选项及取值可参考下文链接
 *  metaValue 为对应的元配置项取值
 *  metaName 及 metaValue 对应表：https://developer.umeng.com/docs/147615/detail/290919#h1-v1p-uni-pic
 *  mode 为模式，其取值为枚举值
 *  默认值为"OVERWRITE": 覆盖模式，原 meta 值将直接被覆盖，注意对于取值为单值的 meta 只有覆盖模式
 *  "APPEND": 追加模式，仅适用于 meta 取值为数组对象的 meta，追加模式下原取值保留
 */

• 3.2 getMetaInfo
  用于动态获取 SDK 的当前配置

aplus.getMetaInfo(metaName);

• 3.3 sendPV
  页面曝光事件，sendPV 方法将发送一条页面 PV 日志，其 API 定义如下：

const {aplus_queue} = window;
aplus_queue.push({
 action: 'aplus.sendPV',
  arguments: [{is_auto: false}]
});

关于PV上报这一点，友盟默认会自动发送PV数据，但是当项目是单页面应用的话，由于单页面路由改变时不会刷新页面，无法自动发送PV，所以需要使用setMetaInfo配置成手动发送PV，配置方法如下：

aplus_queue.push({
  action: 'aplus.setMetaInfo',
  arguments: ['aplus-waiting', 'MAN'] // 设置为MAN之后, 所有PV日志均需手动触发, 但其他类型的事件日志不受影响
});

解决了单页面应用无法自动发送PV的问题之后，另一个问题就是手动发送PV的时机
这里我选择的是在全局路由守卫中发送PV信息

• 3.4 record
  record 用于发送一条事件日志，其 API 定义如下：

const {aplus_queue} = window;
aplus_queue.push({
 action: 'aplus.record',
  arguments: [eventCode, eventType, eventParams]
});

eventCode：事件ID 或 事件编码，字符串类型（埋点事件名）

eventType：‘CLK’

eventParams 为本次事件中上报的事件参数。其取值为一个JSON对象（平铺的简单对象，不能多层嵌套）

还有一些其他的api，在我的项目中并没有用到，如果感兴趣的话可以去友盟的文档上去看详细说明

介绍完配置SDK的方法，下面就分享一下项目中我具体是怎么做的

1、配置AppKey,设置手动发送PV
/src/App.vue

2、手动发送PV
/src/router/index.js

3、封装埋点方法
/src/main.js

4、在页面上调用埋点上报方法