Options
All
  • Public
  • Public/Protected
  • All
Menu

Project @ax-trace/wechat

@ax-trace/wechat

翱象小程序埋点 SDK(微信小程序版)

简介

翱象通用上报埋点 SDK,支持无痕上报埋点和手动打点,

安装

通过命令行等方式直接下载 SDK JS bundle,保存在小程序目录中即可

curl --compressed https://g.alicdn.com/locallife/ax-trace-sdk/0.1.0/ax-wechat-main.js -o ./ax-trace.js

接入指南

引入

// app.js

const Trace = require('./ax-trace.js');

初始化实例

// app.js

const Trace = require('./ax-trace.js');

App({
  onLaunch() {
    const trace = new Trace({
      projectId: '<在翱象平台注册的项目 ID>',
      channelAppId: '<渠道 AppId,即微信小程序 ID>',
      version: '<当前应用的版本号>',
      canAutoGetOpenUserInfo: true,
      canAutoGetLocationInfo: true,
    });
  }
})

其中初始化参数各字段说明如下

interface IWechatSDKConfig {
  /**
   * 平台生成的唯一应用 ID
   */
  projectId: string;
  /**
   * 渠道应用 ID,即微信应用 ID
   */
  channelAppId: string;
  /**
   * app 版本
   */
  version: string;
  /**
   * 是否可以自动获取用户开放信息,
   * 即在获取用户信息时调用 `wx.getUserInfo`,
   * 如用户为授权则在获取用户信息时会拉起用户授权,
   * 默认为 false
   */
  canAutoGetOpenUserInfo?: boolean;
  /**
   * 是否可以自动获取定位信息信息,
   * 即在初始化时调用 `wx.getLocation`,
   * 如用户未授权则在获取定位信息时会拉起定位授权面板,
   * 默认为 false
   */
  canAutoGetLocationInfo?: boolean;
}

在初始化过后可以将 trace 实例保存在全局(如 App 中)方便各页面打点

App({
  onLaunch() {
    // ...
    this.globalData.trace = trace;
  }
})

初始化事件上报

在初始化实例之后需要调用一次 trace.init() 方法来触发生命周期生成事件的上报,以便维护用户从点击进入小程序到退出整个生命周期的事件上报准确性

trace.init({
  query: '<小程序启动参数,如不填则会调用 `wx.getLaunchOptionsSync` 来获取>',
  lat: '<用户所在地理位置的纬度,如值为 falsy 且初始化实例时 canAutoGetLocationInfo 为 true 则会调用 wx.getLocation 获取,此时会拉起授权面板>',
  lng: '<用户所在地理位置的经度,如值为 falsy 且初始化实例时 canAutoGetLocationInfo 为 true 则会调用 wx.getLocation 获取,此时会拉起授权面板>',
});

SPM

为了表明触发打点的具体页面和区块,我们采用 '{a}.{b}.{c}.{d}' 这种编码字符串来表示打点触发的来源,其中 a 表示应用编码,b 表示页面编码,c 表示区块编码,d 表示位置编码,其设置方式可以由以下步骤进行:

  1. 在进入页面之后手动调用 trace.setPageSpmId('{a}.{b}') 来确定 SPM 的 a 和 b 位,如不调用则默认用 projectId 作为 a 位,getCurrentPages() 取得的页面栈顶层页面路径为 b 位(这样有风险,如弹层有打点将不能准确表示)

  2. 在调用 log 方发时手动传入 c 和 d 位,具体调用方式见 自定义事件

自动打点

暂不支持

手动打点

我们把用户行为和系统信息的上报记为一次事件,可以理解为是最小上报的单位,事件的上报定义的数据结构如下(这里只是用作说明,实际开发见下文):

interface ILogEvent {
  /**
   * 事件编码
   * @alias eventCode
   */
  ec: string;
  /**
   * 视图类型,app/页面/组件
   * @alias viewType
   */
  vt: string;
  /**
   * 页面编码,即 SPM
   * @alias viewCode
   */
  vc: string;
  /**
   * 事件类型,如点击、曝光、滑动等
   * @alias eventType
   */
  et: string | number;
  /**
   * 事件携带的信息
   * @alias eventInfo
   */
  ei: Record<string, string | number>;
  /**
   * 会话 ID(生命周期 ID)
   */
  sid: string;
  /**
   * 时间戳
   * @alias timestamp
   */
  si: string | number;
}

实际开发中上报事件可以分以下两种:

登录事件

该事件为用户登录后作为用户身份信息上报的一次系统事件,具体上报信息接口定义如下:

interface IUserInfo {
  /**
   * 用户商家 ID **必填**
   */
  appUserId: string;
  /**
   * 用户商家昵称 **必填**
   */
  appNick: string;
  /**
   * 用户电话号码
   */
  phone: string;
  /**
   * 渠道用户 ID
   */
  channelId: string;
  /**
   * 渠道用户昵称,即微信用户昵称,可自动获取
   */
  channelNick: string;
  /**
   * 性别,可自动获取
   */
  gender: string;
  /**
   * 用户所在国家,可自动获取
   */
  country: string;
  /**
   * 用户所在省份,可自动获取
   */
  province: string;
  /**
   * 用户所在城市,可自动获取
   */
  city: string;
}

其中 appUserIdappNick 为必填项,如在实例化时 canAutoGetOpenUserInfo 置为 true,则会自动获取 获取用户信息 所带的字段。在小程序中获取用户信息后需调用该方法:

trace.setUserInfo({
  appUserId: '<在商家侧定义的用户唯一 ID,可以同微信 UserId>',
  appNick: '<在商家侧定义的用户 nick,可以同微信 nickName>',
  phone: '<用户手机号,获取方法见 https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/getPhoneNumber.html>',
});

自定义事件

上报方法定义如下

  /**
   * 上报埋点方法
   *
   * @param {ILogParams} logParams 上报事件所需参数
   * @memberof AXTrace
   */
  log(
    eventCode: string,
    eventType?: string,
    viewType?: string,
    eventInfo: TEventInfo = {},
    spmCD = '0.0'
  ): void

参数接口定义如下

type TEventInfo = Record<string, number | string>;

interface ILogParams {
  /**
   * 平台注册的事件码,如 'user_login', 'receive_coupon' 等
   */
  eventCode: string;
  /**
   * 事件触发方式编码,可枚举值为 点击 - 2101,曝光 - 2201,系统事件 - 4000,默认为 4000
   */
  eventType?: string;
  /**
   * 视图类型,app: a, page: p, component: c
   */
  viewType?: string;
  /**
   * SPM 值的 C D 位,默认为 '0.0'
   */
  spmCD?: string;
  /**
   * 业务需要携带的事件信息
   */
  eventInfo?: TEventInfo;
}

如一次商品曝光事件可类似如下方式上报:

trace.log({
  eventCode: 'item_list',
  eventType: '2201',
  viewType: 'c',
  eventInfo: {
    itemId,
    skuCode,
  },
  spmCD: 'list.1',
})

API 参考

详情见 开发文档,如遇 @ax-trace/core 中的接口定义缺失请到 core 接口文档 中查看

Generated using TypeDoc