腾讯新闻增长技术团队的前端上报

该模块是前端上报数据时使用，封装了几个方法，上传数据时调用即可。所有的数据均是上报到指定的系统中。

安装

使用 tnpm:

$ tnpm install gh-qqnews-report

使用 npm:

$ npm install gh-qqnews-report

使用 bower:

$ bower install gh-qqnews-report

使用 yarn:

$ yarn add gh-qqnews-report

使用 jsDelivr 的 CDN 地址:

<script src="https://cdn.jsdelivr.net/npm/gh-qqnews-report"></script>

使用 unpkg 的 CDN 地址:

<script src="https://unpkg.com/gh-qqnews-report"></script>

简要的使用样例：

const report = new Report({
  actid: 56, // 每个项目的actid均不相同，请向产品经理确认
});
report.send({
  pagename: 'mainpage',
  event_id: 'pv',
}); // 上报该页面的pv

document.querySelector('.button').addEventListener('click', () => {
  // 点击上报
  report.send({
    pagename: 'mainpage', // 所在的页面
    event_id: 'sop_open_click', // 触发的事件
  });
});

初始化时所需要的参数

初始化Report时要传入的参数：

| 参数名称 | 类型 | 是否必须 | 默认值 | 说明 | | --------------- | ------- | -------- | ------ | -------------------------------------- | | actid | number | 是 | | 项目的 id，请向产品经理确认 | | attaid 或 token | string | 否 | string | 当其中一个为空时，则不向 atta 上报数据 | | appkey | string | 否 | string | 当为空，则不向自定义的灯塔上报 | | qqnewsReport | boolean | 否 | true | 是否使用新闻客户端的 jsapi 进行上报 | | eventIdPrefix | string | 否 | 空 | 每个上报 event_id 的前缀 |

该模块在用actid初始化后，默认会向阿塔系统、自定义appkey和使用新闻客户端的jspia进行上报。

方法

send()

当需要上报事件时，则调用当前方法。接收的参数类型：

interface SendProps {
  event_id: string; // 触发的事件名称
  pagename?: string; // 当前页面的名称，例如mainpage
  kv?: Object; // 非必须，其他一些额外要上传的参数，例如refer，点击的第几个item等
}

该模块仅会上传有数据的字段，若有为空的字段，则会在上传前过滤掉。

// 在mainpage中的点击上报
report.send({
  pagename: 'mainpage',
  event_id: 'sop_user_click',
});

// 根据url中的refer参数上报来源
report.send({
  pagename: 'mainpage',
  event_id: 'pv',
  kv: {
    refer: getQueryString('refer'), // 获取url中的refer参数
  },
});

// 页面中有多个排布的元素，可以上报点击的该区域内的序列
let bannerIndex = 1;
report.send({
  pagename: 'mainpage',
  event_id: 'banner',
  kv: {
    banner_index: `sop_banner${bannerIndex}_click`,
  },
});

在使用该模块时，开发者只需关心： actid, pagename, event_id 等几个关键的字段，其他的字段均是自行进行采集，开发者无需关注。

post()

send 方法默认使用的是创建一个 img 标签来进行上报的，这里还提供了一个 post 方法来进行POST方式的上报。

report.post({
  pagename: 'mainpage',
  event_id: 'sop_user_click',
});

调试

提供了debug字段开启调试功能，默认为 false（不开启）。在 send 之前将 debug 字段设置为 true 后，则会自动在页面中注入 vconsole 模块，然后显示要上传的数据：

report.debug = true;

report.send({
  pagename: 'mainpage',
  event_id: 'sop_user_click',
});

字段说明

这里面有些字段是必须要上传的，有些是多选一必传的字段（即某些场景中会上报 A 字段，其他某些场景会上报 B 字段，但 A 和 B 一定要上报其中的一个），若在上传过程中有遗漏的，则会造成统计数据的不完整。

开发者要确认的：

• actid: 项目的 id，初始化时就要传入；
• pagename: 当前上报页面的名称；
• event_id: 上报事件的名称；

模块中自动采集的字段，若反馈有遗漏的字段，请联系 skeetershi 进行问题的排查：

• type: 上报的类型，新闻客户端内为 1，新闻客户端外为 3；
• ostype: android 系统还是 ios 系统；
• devid, omgid, omgbizid: 在新闻客户端内要上报的数据；
• uid: 在新闻客户端外上要上传的数据，与上面的一条互斥，但一定会上传这两条中的其中一条；
• qqopenid: qq 登录后的账号；
• wxopenid: 微信登录后的账号；

License

ISC