visual-buried-point-platform-miniprogram

微信小程序自定义埋点SDK集成文档

1、引入方式

npm install visual-buried-point-platform-miniprogram -S --registry=http://verdaccio.gogdev.cn/
工具-构建npm

2、初始化方式

app.js

//require引入
const analysis = require('visual-buried-point-platform-miniprogram')
require('./utils/mixins')
App({
    onLaunch() {
   	  //初始化sdk
      analysis.init({
        env: 'dev', //环境变量 dev test production
        token: '3212414516342554624', //热果平台-可视化埋点-创建对应的项目生成. 【图1】
        appKey: 'dsy_0FIBg8AHxwDP', //项目的appkey, 必填
        sourceDomain: 'com.gzdzswy.onetravel', // 非必填，访问来源域名，取优先级：单次调上报值 > 全局初始化值
      })
    }
    globalData: {
      analysis: analysis //全局使用的 analysis 实例
  	}
});

3、设置绑定用户ID

• sdk初始化后，可通过 setUserId() 方法关联用户，sdk会默认生成一个游客ID

// 应用在注册或登录成功后，可调用下面API设置用户ID，后续产生的统计事件将会与该用户关联起来
getApp().globalData.analysis.setUserId("登录成功-用户ID")

示例：

getApp().globalData.analysis.setUserId(123456);

注：为保持数据统计精确，在退出登录的时候建议调用一次清空：

getApp().globalData.analysis.setUserId("");

4、自定义事件上报

• sdk初始化后，可通过 setCustomEvent() 方法上报自定义埋点事件，并为事件添加属性值：

4.1 事件类型：

• 仅能选择埋点提供的事件类型，各事件类型的触发、上报由各业务平台埋点自行确认。事件类型如下：
• 搜索事件【 search 】
• 动作事件【 action 】
• 点击事件【 click 】
• 浏览事件【 browse 】

// 调用自定义上报
getApp().globalData.analysis.setCustomEvent(data)

配置：

参数	必填	描述
$event_id	是	对应创建的事件ID 【图2】
$extend_param	否	扩展字段，建议根据业务需求填上
$busSegment	否	业务板块 【表1】各自业务板块
$module	否	业务模块【表1】各自业务模块

表1

业务板块        业务模块
busSegment     module
1.景区/门票  	1.门票
2.民宿/酒店  	1.民宿 2.酒店
3.路线/定制  	1.路线 2.定制
4.出行		 1.盛威
5.美食		 1.到店
6.购物		 1.线上商城
7.文娱		 1.场馆
8.社区  		 1.攻略 2.种草
9.活动		 1.日历
10.多媒体       1.声入贵州
11.票务预约  	1.景区

图2

示例：

// 注：
data: JSON字符串
{
    $event_id: 对应创建的事件ID 【必填字段】
    $extend_param: 扩展参数(JSON字符串) 【非必填字段，建议根据业务需求填上】
    $busSegment: 业务板块 【非必填字段，建议业务填上, 否则数据统计可能出现缺失】
    $module: 业务模块 【非必填字段，建议根据业务填上， 否则数据统计可能出现缺失】
    $ctk: 渠道推广编码 【非必填字段，建议根据业务填上， 否则数据统计可能出现缺失】
    $duration: 停留时长 【非必填字段】
    $event_code: 事件标识符 【必填字段，建议根据业务填上， 否则数据统计可能出现缺失】
    $page: 当前页对象 【非必填字段，建议根据业务填上， 否则数据统计可能出现缺失】
    $path: 埋点组件的路径 【必填字段，建议根据业务填上， 否则数据统计可能出现缺失】
}
// 参考：【点击事件】
const params = {
    $event_id: "3213106620739878912", 【图2-事件ID】
    $busSegment: 1,
    $module: 1, 
    $ctk: "",
    $extend_param: { 
        title: "自定义[点击事件]上报-点击_密码登录按钮", 
        clickContent: "密码登录",
    	....
    	....
    },
    $event_code: "",
    $page: {
      domain: "",
      path: "",
      title: "",
    },
    $path: "",
}
getApp().globalData.analysis.setCustomEvent(params)

5、流量上报

• sdk初始化后，可通过onStartTrack(params) 方法注册上报流量，并为上报添加属性值：

注册上报流量：onStartTrack(params)

配置：【以下配置参数建议上报】

参数	必填	类型	描述
domain	是	string	域名
path	是	string	路径
circulation	否	number	页面访问类型
ctk	否	string	渠道推广编码
duration	否	number	停留时长
busSegment	否	string	业务板块 【表1】
module	否	string	业务模块 【表1】
extend_param	否	JSON对象 {}	扩展参数
sourceDomain	否	string	访问来源域名
sourceUrl	否	string	访问来源url
title	否	string	页面名称
traceId	否	string	追踪id
visitPage	否	number	访问深度
visitTime	否	yyyy-MM-dd HH:mm:ss	访问时间

示例：

// 注：
data: JSON对象
const params = {
  domain: "xxxx",
  busSegment: 1,
  module: 1,
  title: "店铺详情",
  sourceDomain: 'com.gzdzswy.onetravel',
  extend_param: {
      goods_id: 123456, //商品id 【根据业务确定】
      store_id: 1111, //店铺id   【...】
      business_id: 222, //商户id 【...】
  }
};
getApp().globalData.analysis.onStartTrack(params)

销毁上报流量：调用onDestroyTrack()进行销毁

示例：

getApp().globalData.analysis.onDestroyTrack()

注： 上报数据是否成功可查看NetWork栏，调用流量上报 track 接口 和 自定义上报 event 接口的 response

6、批量创建事件ID

main.py

用于批量创建和批量生成埋点数据的脚本，如不存在批量创建事件，可直接通过埋点管理端创建即可

准备

1.安装环境

需要在电脑上安装 python 环境

2.安装依赖

pip install requests

example示例：

1、在 utils/buryPoint 中创建各业务模块文件夹，并在文件夹下创建 parameter.py 文件 及 enum.js 文件，内容参考 route【路线业务模块】 文件夹，并将 enum.js 在 index.js 中导出

.

2、按各自业务修改其中的变量名

• 注：重要！重要！：注意先查看main.py中需要修改的：
  • projectId为埋点管理端上创建项目时生成的 token，参考 初始化方式 的图1

.

.

3、按需修改 main.py 最底部调用方法

• batchCreate: 批量创建【先执行第一步】
• batchWrite: 批量生成【再执行第二步】

先执行 batchCreate 方法将数据推到埋点后台管理系统中，再执行 batchWrite 方法，将后台管理中的数据写入到本地文件中

4、执行脚本

方式一（推荐）

在命令后增加业务模块文件夹名称，自动执行该文件夹下的参数文件

python main.py route

5、按环境生成 enum.xxx.js 文件，并在 utils/buryPoint/enum.js 中导出

注：这里默认会生成 `enum.commonm.js` 文件，如果后续生产或其他环境又是另外一份数据，到时候可以修改脚本，对不同环境进行适配

6、代码使用

查看 index.js 示例文件

import burialPointBehavior from '~/utils/buryPoint/burial-point-behavior'
import { burialPointRouteEnum, routeTrackCommonParams } from '~/utils/buryPoint/index'

Page({
  behaviors: [burialPointBehavior]

  onShow() {
    this.startBurialPointTrack({
      title: '目的地页',
      ...routeTrackCommonParams
    })
  },

  // 点击搜索
  onClickSearch() {
    this.setBurialPointData(burialPointRouteEnum['点击-目的地页-搜索'])
  },

  // 点击地区
  onClickAreaItem(e) {
    const item = e.currentTarget.dataset.item
    this.setBurialPointData(burialPointRouteEnum['点击-目的地页-切换区域'], { areaId: item.id })
  },

  // 点击右边
  onClickRightItem(e) {
	const item = e.currentTarget.dataset.item
    this.setBurialPointData(burialPointRouteEnum['点击-目的地页-进入详情'], { destinationId: item.id })
  },
})

7、埋点后台管理系统

云测管理端地址

• chameleon.gcongo.com.cn

8、SDK 文档

http://verdaccio.gogdev.cn/-/web/detail/visual-buried-point-platform-miniprogram