第一部分简介
Taro 简介
Taro 是一套遵循 React 语法规范的 多端开发 解决方案。
使用 Taro，我们可以只书写一套代码，再通过 Taro 的编译工具，将源代码分别编译出可以在不同端（微信/百度/支付宝/字节跳动/QQ 小程序、快应用、H5、React-Native 等）运行的代码。
腾讯有数简介
腾讯有数是由腾讯智慧零售推出，为品牌商、零售商打造的数据分析与管理平台，融合腾讯数据、技术与生态优势，提供全链路经营数据分析、消费者洞察、精准营销等能力，让企业经营更“有数”。
Hi 头像简介
基于人脸识别，一键生成符合节日气息的头像。例如在圣诞节、春节等，生成圣诞帽头像、新年头像等。
第二部分接入
新建小程序
需要升级 Taro 到 2.x 或 3.x
taro init myApp初始化项目- 选择
default-youshu模板 - 运行
npm run dev:weapp启动小程序编译
微信小程序开发者工具控制台即可看到 8 大行为日志上报 访问 docs.qq.com/form/fill/D… 申请有数数据查看权限
通过上述流程已经让你的微信小程序拥有了 8 大用户行为埋点的体验能力，体验完成后，只需要更换有数的
Token和微信小程序 appid，即可拥有有数的正式版功能。正式账号获取路径：docs.qq.com/form/fill/D…
Hi 头像接入的方案（已有小程序）
接入文档 mp.zhls.qq.com/youshu-docs…
1、通过 npm 安装 SDK
npm i sr-sdk-wxapp
在 app.jsx 中通过 import 引入 SDK
import sr from 'sr-sdk-wxapp'
2、添加可信域名
登录信公众平台，进入<开发><开发设置><服务器域名>，将 https://zhls.qq.com 添加为 request 合法域名。
在开发环境中还有 SDK 版本检查，所以会提示 sr-home-1257214331.cos.ap-guangzhou.myqcloud.com 不在以下 request 合法域名列表中 , 可以通过设置不校验域名来处理。
3、taro/app.js 中初始化 SDK
sr.init({
/**
* 有数 - ka‘接入测试用’ 分配的 app_id，对应的业务接口人负责
*/
token: 'biccaffbxxx',
/**
* 微信小程序appID，以wx开头
*/
appid: 'wxd5e8xxxx',
/**
* 如果使用了小程序插件，需要设置为 true
*/
usePlugin: false,
/**
* 开启打印调试信息， 默认 false
*/
debug: true,
/**
* 建议开启-开启自动代理 Page， 默认 false
* SDK 负责上报页面的 browse 、leave、share 等事件
* 可以使用 sr.page 代替 Page(sr.page(options))
* 元素事件跟踪，需要配合 autoTrack: true
*/
proxyPage: true,
/**
* 建议开启-开启组件自动代理， 默认 false
* SDK 负责上报页面的 browse 、leave、share 等事件
*/
proxyComponent: true,
// 建议开启-是否开启页面分享链路自动跟踪
openSdkShareDepth: true,
// 建议开启-元素事件跟踪，自动上报元素事件，tap、change、longpress、confirm
autoTrack: true,
})
登录信息传入
才会有openId的信息传入
原生小程序代理 sr 实例
// app.js
// SDK需要先通过init初始化才能正常使用
let sr = require('sr-sdk-wxapp').init({
appid: 'wx9d********', // 微信小程序 appid，以 wx 开头
token: 'bi72f*******', // token是有数 appid，以 bi 开头，值为 https://srdata.tencent.com/ 中的密钥管理_APP ID
})
App({
sr, // 挂载到App实例上
})
// otherjs
let app = getApp()
app.sr.track('login_wxapp',
{
"page": "pages/tabBar/index/index",
"page_title": "首页",
"time": "1560409473714",
"wx_user": {
"app_id": "",
"open_id": "",
"user_id": "",
"union_id": "",
"local_id": "",
}
// more...
})
Taro 代理 sr 实例
// app.js
import sr from 'sr-sdk-wxapp'
// 将 SDK 实例挂在到Taro对象上，便于全局使用
Taro.srSdk = sr.init({
appid: 'wx9d********', // 微信小程序 appid，以 wx 开头
token: 'bi72f*******', // token是有数 appid，以 bi 开头，值为 https://srdata.tencent.com/ 中的密钥管理_APP ID
})
// store/user.js
setLoginInfo(state, payload) {
const { userInfo = {} } = payload
if (Taro.srSdk) {
const { wxOpenId, userId } = userInfo
// 设置登录后的信息
Taro.srSdk.setUser({
open_id: wxOpenId,
user_id: userId,
})
// 触发登录后打点
Taro.srSdk.track('login_wxapp')
}
}
第三部分，事件研究
Taro page onShow 的实现原理
/**
* 建议开启-开启自动代理 Page， 默认 false
* SDK 负责上报页面的 browse 、leave、share 等事件
* 可以使用 sr.page 代替 Page(sr.page(options))
* 元素事件跟踪，需要配合 autoTrack: true
*/
proxyPage: true,
是否开启自动代理 Page，默认是：false。SDK 负责上报页面的 browse 、leave、share 等事件可以使用 sr.page 代替 Page(sr.page(options))
允许自动监听 onclick、onchange 等四大事件
有数 SDK 事件类型
大分类
- 流量运营
- 商品运营
- 活动运营
- 销售归因
- 搜索运营
- 客服咨询
- 渠道上报
Hi 头像关注的还是基础的流量运营模块，包含了：
- 小程序启动
- 小程序显示
- 小程序隐藏
- 页面浏览
- 页面离开
- 页面下拉刷新
- 页面上拉触底
- 页面分享
- 元素事件
- 用户注册
- 用户登录
其中，我这边观察了有以下特点的几个：
离开页面、离开 app，“leave_wxapp_page”和“exit_wxapp”
若取消，则会触发“app_show”和“browse_wxapp_page”
事件点击，会自动触发
sr.track('element', {
"type": "change",
"element_id": "secKillPage-banner1_1",
"index": "1",
"name": "秒杀页面-轮播1_1",
"page": "pages/product?sku_id=AOdjf7u",
// more...
})
第四部分 更多期待
hi 头像基于云开发，有 2 套开发环境，有数也提供了两套 token，这一点是很给力的。
智慧零售与电商支付场景
智慧零售更多关注的还是电商门户商店运营的信息，为品牌商、零售商打造的数据分析与管理平台，融合腾讯数据、技术与生态优势，提供全链路经营数据分析、消费者洞察、精准营销等能力，让企业经营更“有数”。
而 Hi 头像还需要加入更多支付场景才能完成智慧零售的所有场景的试用，比如引入云开发的微信支付。
业务版本细节
有数 SDK 已经提供了手机系统版本、微信版本，有数 SDK 版本，但我还期望有的是小程序基础库版本，小程序业务版本，即每次小程序功能开发的版本。
自定义事件
有数 SDK 的事件都是事先规定好的，比如 add_cart ，但我还需要的是自定义事件，比如选择头像图片时，我想区分微信头像、相机、相册。
扫描二维码关注我
