# 微信小程序 SDK

提示

在使用前，请先阅读数据模型

集成凡泰数据分析 SDK

# 原生小程序接入指导

# 1.1 通过 npm 方式引入 SDK（优先推荐）

通过 npm i @finogeeks/fc-track 安装 SDK
在 app.js 中通过 import 引入 SDK

import fctrack from '@finogeeks/fc-track/web/fc-track-miniprogram-sdk';

提示

在安装npm如果有遇到问题，请联系凡泰技术人员

注意

微信小程序 SDK 压缩文件 fc-track-miniprogram-sdk 大小约为 23 KB
需要在 App 实例化之前调用 setPara() 和 initTrack()，否则可能会造成部分预置事件丢失

# 2.配置初始化参数

# 2.1 setPara 参数配置

提示

setPara 配置接口，用来调整 SDK 的基础机制。应该在 App()调用之前调用。
首次调用初始化 SDK，再次调用覆盖之前传入的配置，可多次调用。

名称	类型	必填	描述
appid	string	Y	微信小程序 appId
app_name	string	Y	微信小程序名称
server_url	string	Y	服务端的数据接收地址（获取详细服务数据接收地址，请联系凡泰技术人员）
app_version	string	N	微信小程序版本号
autoTrack	object	N	全埋点控制开关（相关预置事件，如 APP-onLuanch 或 page-onShow），默认是：全部开启点击查看详情
show_log	bool	N	是否打印日志，默认是：true
batch_send	bool 或 object	N	是否把收集好的数据发送请求到服务端，默认是：true 点击查看详情
actionEventData	array	N	点击事件配置表，详情请前往点击事件配置表
interval_timeout	number	N	发送数据时间间隔，默认是：300000 5 分钟单位毫秒点击查看详情

提示

全埋点采集时机，可参考全埋点采集逻辑
数据发送数据时机，可参考全数据上报采集逻辑
server_url 中用到的域名需要按照微信要求https://developers.weixin.qq.com/miniprogram/dev/framework/ability/network.html (opens new window)配置到微信后台 request 合法域名列表中

代码示例

fctrack.setPara({
  appid: '小程序APPID',
  app_name: '小程序名称',
  app_version: '小程序版本',
  server_url: `您的数据接收地址`,
  // 全埋点控制开关-合法值 默认行为全都是true
  autoTrack: {
    appLaunch: true, // 默认为 true，false 则关闭 appLaunch 事件采集
    appHide: true, // 默认为 true，false 则关闭 appHide 事件采集
    pageLoad: true, // 默认为 true，false 则关闭 pageLoad 事件采集
    pageShow: true, // 默认为 true，false 则关闭 pageShow 事件采集
    pageHide: true, // 默认为 true，false 则关闭 pageHide 事件采集
    pageShare: true, // 默认为 true，false 则关闭 pageShare 事件采集
    pageAction: true, // 默认为 true，false 则关闭 pageAction 事件采集
    custom: true, // 默认为 true，false 则关闭 custom 事件采集
  },
});

# 2.2 initTrack 参数配置

提示

initTrack 方法接口入参：原生小程序开发可以不传任何参数，直接调用即可。
使用 Taro 和 mpvue 框架需要传入当前框架的实例进来。

名称	类型	必填	描述
taro	object	N	使用 Taro 框架传入 Taro 实例
vue	object	N	使用 mpvue 框架传入 Vue 实例

代码示例

// 原生小程序例子
fcTrack.initTrack();

// taro框架小程序例子
fcTrack.initTrack({
  taro: Taro,
});

// mpvue框架小程序例子
fcTrack.initTrack({
  vue: Vue,
});

提示

如使用了以下框架，请前往 Taro 接入指引、mpvue 接入指引查看更便捷的 SDK 引入方式。
暂时只支持 Taro 以及 mpvue 框架。

# Taro 接入指引

通过 npm 安装 SDK npm i @finogeeks/fc-track
在 app.jsx 中通过 import 引入 SDK
设置 setPara() 和原生小程序一致
设置 initTrack() 必须传入 Taro 实例

完整代码示例

import fcTrack from '@finogeeks/fc-track/web/fc-track-miniprogram-sdk';

fctrack.setPara({
  appid: '小程序APPID',
  app_name: '小程序名称',
  app_version: '小程序版本',
  server_url: `您的数据接收地址`,
  // 全埋点控制开关-合法值 默认行为全都是true
  autoTrack: {
    appLaunch: true, // 默认为 true，false 则关闭 appLaunch 事件采集
    appShow: true, // 默认为 true，false 则关闭 appShow 事件采集
    appHide: true, // 默认为 true，false 则关闭 appHide 事件采集
    pageLoad: true, // 默认为 true，false 则关闭 pageLoad 事件采集
    pageShow: true, // 默认为 true，false 则关闭 pageShow 事件采集
    pageHide: true, // 默认为 true，false 则关闭 pageHide 事件采集
    pageShare: true, // 默认为 true，false 则关闭 pageShare 事件采集
    pageAction: true, // 默认为 true，false 则关闭 pageAction 事件采集
    custom: true, // 默认为 true，false 则关闭 custom 事件采集
  },
});

fcTrack.initTrack({
  taro: Taro,
});

# Mpvue 接入指引

通过 npm 安装 SDK npm i @finogeeks/fc-track
在 main.js 中通过 import 引入 SDK
设置 setPara() 和原生小程序一致
设置 initTrack() 必须传入 Vue 实例

完整代码示例

import fcTrack from '@finogeeks/fc-track/web/fc-track-miniprogram-sdk';

fctrack.setPara({
  appid: '小程序APPID',
  app_name: '小程序名称',
  app_version: '小程序版本',
  server_url: `您的数据接收地址`,
  // 全埋点控制开关-合法值 默认行为全都是true
  autoTrack: {
    appLaunch: true, // 默认为 true，false 则关闭 appLaunch 事件采集
    appShow: true, // 默认为 true，false 则关闭 appShow 事件采集
    appHide: true, // 默认为 true，false 则关闭 appHide 事件采集
    pageLoad: true, // 默认为 true，false 则关闭 pageLoad 事件采集
    pageShow: true, // 默认为 true，false 则关闭 pageShow 事件采集
    pageHide: true, // 默认为 true，false 则关闭 pageHide 事件采集
    pageShare: true, // 默认为 true，false 则关闭 pageShare 事件采集
    pageAction: true, // 默认为 true，false 则关闭 pageAction 事件采集
    custom: true, // 默认为 true，false 则关闭 custom 事件采集
  },
});

fcTrack.initTrack({
  vue: Vue,
});

SDK 基本配置

# 1.1 开启全埋点

setPara() 函数中 autoTrack 可用于配置需要开启的全埋点类型。

fctrack.setPara({
  appid: '小程序APPID',
  app_name: '小程序名称',
  app_version: '小程序版本',
  server_url: `您的数据接收地址`,
  // 全埋点控制开关-合法值 默认行为全都是true
  autoTrack: {
    appLaunch: true, // 默认为 true，false 则关闭 appLaunch 事件采集
    appShow: true, // 默认为 true，false 则关闭 appShow 事件采集
    appHide: true, // 默认为 true，false 则关闭 appHide 事件采集
    pageLoad: true, // 默认为 true，false 则关闭 pageLoad 事件采集
    pageShow: true, // 默认为 true，false 则关闭 pageShow 事件采集
    pageHide: true, // 默认为 true，false 则关闭 pageHide 事件采集
    pageShare: true, // 默认为 true，false 则关闭 pageShare 事件采集
    pageAction: true, // 默认为 true，false 则关闭 pageAction 事件采集
    custom: true, // 默认为 true，false 则关闭 custom 事件采集
  },
});

# 1.2 设置所有事件公共属性

对于所有事件都需要添加的属性，调用 beforeEach() 将属性注册为公共属性。

fcTrack.beforeEach(() => {
  return {
    id: '8888',
    name: 'fc',
  };
});

# 1.3 设置匿名 ID 为设备 ID

微信小程序 SDK 提供了 setOpenid 接口将匿名 ID 设置为设备 ID。

// 第一步通过微信平台接口获取当前用户的OpenID
wx.request({
  url: '获取 OpenID 的后端接口',
  success: function(res) {
    // 第二步在微信平台接口响应成功后。
    // 调用fcTrack.setDeviceId() 方法将微信平台返回的openid传入进来。
    fcTrack.setDeviceId(res.openid);
  },
});

# 1.4 用户登录

当用户注册成功或者登录成功时，需要调用 login() 方法传入登录 ID 等等信息。
setUserInfo API接口数据格式表查看详情

const data = {
  user_id: '用户ID',
  name: '用户名称',
  avatar: '用户头像',
  gender: '用户性别', // 0 未知，1男性，2女性
  country: '用户信息-国家',
  province: '用户信息-省份',
  city: '用户信息-城市',
};
fcTrack.setUserInfo(data);

# 1.4 点击事件埋点

可通过 setPara() 函数中 actionEventData 可用于配置需要开启的点击事件埋点。

// 第一步 配置参数 setPara.actionEventData
fcTrack.setPara({
  actionEventData: [
    {
      path: 'pages/home/index' // 当前点击事件所在的页面路径
      methodTracks: [
        {
          method: 'handleProductClick' //点击事件名称
          chineseMethod: '点击产品模块' // 中文翻译点击事件名称
          // 示例 点击事件需要收集的数据 retailId fcid product_id
          // $APP 会在全局 globalData下面获取retailId属性的值（详细见1.1示例代码）
          // $QUERY 会在当前页面 onLoad 下面options参数 获取fcid属性的值（详细见1.2示例代码）
          // product_id 会在当前点击事件 data-product_id 获取product_id属性的值（详细见1.3示例代码）
          dataKeys: ['$APP.retailId', '$QUERY.fcid', 'product_id'],
        },
      ],
    },
  ],
  /**
   * 其他配置
   */
});
// 1.1 示例代码 全局 globalData 存储了retailId
App({
  globalData: {
    retailId: '123',
  }
})

// 1.2 示例代码 全局 globalData 存储了retailId
Page({
  // 比如当前完整页面路径 pages/home/index?fcid=789
  onLoad: function(options) {
      console.log(options);
      // 1. 打印日志看看 options参数有fcid，如果有，那么SDK就会自动收集fcid参数的值。
      // 2. 确保配置参数dataKeys 配置了 $QUERY.fcid。
    },
})

// 1.3 示例代码 设置点击事件需要收集的数据
  <view
    class='product'
    data-product_id='1000'
    bindtap='handleProductClick'
  >
    产品内容
  </view>

# 1.5 自定义事件埋点

可通过 quick() 方法来设置事件名称并添加自定义属性。

// 第一个参数 固定 'custom'
// 第二个参数 由开发者自定义事件名称 比如： 'customTest'
// 第三个参数 由开发者自定义属性和值 比如： id = 3 name = 'fc'
fcTrack.quick('custom', 'customTest', {
  id: 3,
  name: 'fc',
});

SDK 调试查看事件信息<

详细查看调试方式

← 2. iOS SDK集成 3.2 H5 SDK →