upTraceModule 打点模块

模块概述

本模块用于页面用户行为数据的收集，将数据发送优家大数据后台，用于统计及分析。模块包括统计内部路由跳转信息，用户点击事件信息，页面请求信息等方法。

引入uplusApi库并初始化后，uplusApi 会自动收集页面上包含【data-uplus-id】属性的元素的点击事件，其中点击事件的ID以【data-uplus-id】标识，事件的type以【data-uplus-type】标识,同时支持在事件中加入【以'data-uplus-'开头】的自定义属性。

HTML data-xxx 属性 data-xxx 属性用于存储私有页面后应用的自定义数据。 data-xxx 属性可以在所有的 HTML 元素中嵌入数据。 data-xxx 属性由以下两部分组成： 属性名不要包含大写字母，在 data- 后必须至少有一个字符。 该属性可以是任何字符串

实例方法

//该代码会上报actionCode为'advance',extentInfo:{'uplusAttr':'advanceAttr'}的点击事件

import UplusApi from '@uplus/uplus-api';

const uplusApi = new UplusApi();
uplusApi.initDeviceReady.then(() => {
  console.log('uplusapi ready');
});

return (
    <div data-uplus-id='advance' data-uplus-attr='attrValue'>
        <div onClick={()=>{console.log('上报点击事件')}}>收藏</div>
    </div>
）

注意：

• 自定义属性上报转换规则：【data-uplus-xxx】中【data-】之后的【uplus-xxx】使用驼峰命名组合。例如上例中：ID为advance的事件的自定义属性【data-uplus-attr 】 => 上报给大数据的键值为【uplusAttr: attrValue】

• HTML元素需要包含在某一点击事件的冒泡路径中，否则会导致iOS不上报

方法列表

• reportSelfPageChange（报告页面内部变化）
• reportPageClickEvent（报告页面点击事件）
• reportPageExposureEvent（曝光事件的打点）
• savePageCommonEvent (页面打点方法)
• statPageEventData (打点)
• reportTraceEvent (曝光事件轨迹)
• gioTrack（GIO打点）
• gioTrackWithVariable（带打点信息的GIO打点）

公共数据

所有数据均以JSON结构返回，由代码，信息和数据三部分组成

{
    "retCode": "000000", //接口状态标识码,错误标识码以21开头
    "retInfo": "操作成功",//接口信息说明
    "retData": null //业务数据
}

具体定义：返回数据通用

事件描述模型 PageEventAttributes

{
  "pageid": "994039150958000000", //页面id
  "eventCategory": "", //事件扩展
  "actionCode": "1111111", //首位加入的成员信息，memberModel参照成员信息模型
  "action": "", //action
  "traceid": "" //轨迹id
}

模块变更记录

• V3.0.0 无
• V3.2.0
  • 打点模块未定义的retCode编码按照通用数据规定变为990001，'传入参数为空或者错误'使用的通用retCode为000002
• V3.3.0
  • 新增reportPageExposureEvent（曝光事件的打点）
  • 新增gioTraceEvent（GIO打点）
  • 新增gioTraceEventAttributes（带打点信息的GIO打点）

方法说明

• reportSelfPageChange

  reportSelfPageChange（{params}）

使用说明

报告页面内部变化，即当H5页面中发生路由跳转时，将跳转类型（【GOTO】或者【BACK】，例如A页面->b页面为GOTO, 代表跳转到新页面，有新页面的创建；而由B页面->A页面为BACK，代表返回之前页面，当前页面关闭），跳转的URL以及页面标题变化收集起来，上报给服务器。

例如，在家庭管理中，由家庭列表页面的>符号转到家庭管理页面，即是一个页面内部变化，此时需要上报：

1. 变化类型：GOTO

2. 内部页面URL：家庭管理页面的URL

3. 内部页面标题：家庭管理

   此时，调用reportSelfPageChange()方法并传入相应参数即可

由家庭管理跳回家庭列表同理，参照上例修改参数即可

1. 变化类型：BACK

2. 内部页面URL：家庭列表页面的URL

3. 内部页面标题：家庭列表

适用性

params 输入参数

错误返回 retCode说明

使用通用retCode

正确返回 retData说明

无

示例

upTraceModule.reportSelfPageChange({type:'GOTO',selfPageUrl:'http://www.uplus.com',selfPageTitle:'uplus' }).then((result) => {
  console.log('result',result);
},(err)=>{
  console.log('err',err); 
})

• reportPageClickEvent

  reportPageClickEvent（）

使用说明

手动调用，报告页面点击事件，包括点击元素的ID，点击元素的相关的扩展信息（相关扩展信息根据需求来写）。

适用性

params 输入参数

错误返回 retCode说明

使用通用retCode

正确返回 retData说明

无

示例

upTraceModule.reportPageClickEvent({actionCode:'sendBtn',extentInfo:{"className":"deviceInfo"}}).then((result) => {
  console.log('result',result);
},(err)=>{
  console.log('err',err); 
})

• reportPageExposureEvent

  reportPageExposureEvent

使用说明

手动调用，添加接口支持记录页面元素曝光。

适用性

params 输入参数

错误返回 retCode说明

使用通用retCode

正确返回 retData说明

无

示例

upTraceModule.reportPageExposureEvent({
            actionCode: "10001",
            title: "测试title",
            url: "http://www.baidu.com",
            dataType: "",
            extentInfo: {
              testName: "testValue"
            }
          }).then((result) => {
  console.log('result',result);
},(err)=>{
  console.log('err',err); 
})

• savePageCommonEvent

  savePageCommonEvent

使用说明

手动调用，打点(登录)。

适用性

params 输入参数

错误返回 retCode说明

使用通用retCode

正确返回 retData说明

无

示例

upTraceModule.savePageCommonEvent({
            url: "http://www.baidu.com",
            action_code: '10001',
            mode: 'smart',
            extend_info: {
              testName: "testValue"
            },
            title: '测试title',
            browser: 'safari',
            data_type: ''
          }).then((result) => {
  console.log('result',result);
},(err)=>{
  console.log('err',err); 
})

• statPageEventData

  statPageEventData

使用说明

手动调用，打点。

适用性

params 输入参数

错误返回 retCode说明

使用通用retCode

正确返回 retData说明

无

示例

upTraceModule.statPageEventData({
            pageName: "http://www.baidu.com",
            tagName: '10001',
            timeStamp: 202008041701
          }).then((result) => {
  console.log('result',result);
},(err)=>{
  console.log('err',err); 
})

• reportTraceEvent

  reportTraceEvent

使用说明

曝光事件轨迹。

适用性

params 输入参数

参数PageEventAttributes

错误返回 retCode说明

使用通用retCode

正确返回 retData说明

无

示例

upTraceModule.reportTraceEvent({
            eventId: "1234",
            attributes: {
              pageid:'',
              eventCategory:'',
              actionCode:'',
              action:'',
              traceid:''
            }
          }).then((result) => {
  console.log('result',result);
},(err)=>{
  console.log('err',err); 
})

gioTrack

gioTrack

使用说明

手动打点，通过Native的GrowingIO进行事件打点。

适用性

params 输入参数

retCode错误码说明

使用通用retCode

正确返回示例

{
    "retCode": "000000",
    "retInfo": "调用函数gioTrack成功",
    "retData": null,
}

错误返回示例

{
    "retCode": "000002",
    "retInfo": "参数为空",
    "retData": null,
}

示例

uplusapi.upTraceModule.gioTrack({
    eventId : 'event123456'
}).then((result) => { 
  console.log('result', result); 
},(err) => { 
    console.log('err', err);
});

gioTrackWithVariable

gioTrackWithVariable

使用说明

手动打点，通过Native的GrowingIO进行带参数的事件打点。

适用性

params 输入参数

retCode错误码说明

使用通用retCode

正确返回示例

{
    "retCode": "000000",
    "retInfo": "调用函数gioTrackWithVariable成功",
    "retData": null,
}

错误返回示例

{
    "retCode": "000002",
    "retInfo": "参数为空",
    "retData": null,
}

示例

uplusapi.upTraceModule.gioTrackWithVariable({
    eventId : 'event123456'
    variable : {
        pageUrl : 'https://xxx',
        action : 'action',
        key1 : 'value1',
        key2 : 'value2',
    }
}).then((result) => { 
  console.log('result', result); 
},(err) => { 
    console.log('err', err); 
});