change log
v1.1.0
无埋点+圈选+热力图
体验
- 热力图与圈选埋点
- demo 打开控制台即可查看无埋点日志
web-log-sdk 1 2 3 4 5
开发调试
执行
npm run start
浏览器打开 examples 文件夹下 test.html 即可调试
构建
npm run build
配置
appID: "" // 是否自动收集点击事件 autoClick: true debug: false // 日志发送地址 logUrl: "" // 热力图数据获取地址 heatmapUrl: "" sdk: // 类型 type: "js" // 版本 version: SDK_VERSION // 平台参数 platform optParams: {} postMsgOpts: ;
- appID 你可以在初始化时注册一个 appID,所以相关的埋点都会带上这个标记,相当于对埋点数据做了一层 app 维度上的管理。
- autoClick 默认为 true,开启会自动收集点击事件(即点击无埋点)。
- debug 默认不开启,开启会将埋点数据打印到控制台,便于调试。
- logUrl 接收日志的后端地址
- heatmapUrl 热力图数据获取地址
- sdk sdk 自身信息一些说明
- platform 默认会自动获取一些平台参数,你也可以通过配置这个字段覆盖它
- optParams 自定义数据
圈选模式
配置 postMsgOpts
初始化 sdk 时需要配置 postMsgOpts,一般来说 targetOrigin 和 curOrigin 是埋点系统的域名
const AutoLogger = windowWebLoggerAutoLogger;const targetOrigin = "track system url";const curOrigin = "track system url";const logUrl = "..."; debug: true logUrl postMsgOpts: targetWindow: windowparent targetOrigin targetWindow: window targetOrigin: curOrigin ;
开启/停止圈选模式
将 sdk 页面通过 iframe 嵌入以后,在埋点系统中发送消息就可以启用/停止 sdk 的圈选模式
const data = mode: "CIRCLE_SELECT" status: "on" // 'off';const targetOrigin = "track system url";const ifrWindow = documentcontentWindow;ifrWindow;
启用圈选模式后,hover 任意元素都会被红色框圈选出来。
监听 sdk 页面回传的 log 数据
最后,你只需要在埋点系统中监听消息,就可以接受 sdk 页面回传的 log 数据。基于这些数据,就自由地实现圈选分析功能了。
window;
热力图模式
配置 postMsgOpts
初始化 sdk 时需要配置 postMsgOpts,一般来说 targetOrigin 和 curOrigin 是埋点系统的域名
const AutoLogger = windowWebLoggerAutoLogger;const targetOrigin = "track system url";const curOrigin = "track system url";const logUrl = "...";const heatmapUrl = "..."; debug: true logUrl heatmapUrl postMsgOpts: targetWindow: windowparent targetOrigin targetWindow: window targetOrigin: curOrigin ;
开启/停止热力图模式
将 sdk 页面通过 iframe 嵌入以后,在埋点系统中发送消息就可以启用/停止 sdk 的热力图模式
const data = mode: "HEATMAP" status: "on" // 'off';const targetOrigin = "track system url";const ifrWindow = documentcontentWindow;ifrWindow;
启用热力模式后,sdk 会向你配置的 heatmapUrl 接口发送请求,所以这个接口的格式需要和 sdk 的预设一致。 request
method: POSTurl: config.heatmapUrldata:{ "pageUrl": location.href}
response
基于返回的数据 sdk 会帮你绘制当前页面的热力图。