使用友盟平台做H5统计分析的话可以使用小程序统计下的H5统计分析
使用步骤:
1、注册/登录平台
2、创建H5应用
3、集成SDK
4、查看统计数据
这里主要需要开发支持的步骤是集成SDK这一步骤,下面来具体讲一下这一步
- 首先在我们创建平台应用成功后,可以拿到该应用生成的AppKey,然后就可以进行集成SDK的操作
- 在项目的最外层(文档上是在页面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']
});
- 配置好之后就可以进行事件埋点,在进行埋点之前,首先介绍一下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、在页面上调用埋点上报方法