一、 需求背景:
1、 目前分为旧雷达埋点、分享链路埋点,达不到大数据埋点统计的需求
2、 目前埋点深度耦合在业务代码,不利于开发与代码维护
二、 需求概述:
用阿里SPM超级定位模型,构建一套适合大数据统计的,统一埋点方案,实现从前端埋点和数据上报后的可视化查询全链路打通。后期转向独立sdk。
1、 满足现有雷达埋点的数据统计
2、 满足pv、uv统计
3、 满足全页面链路来源、分享链路来源统计
三、 实现功能

1. 页面自动上报pv、uv
2. 支持dom元素配置化的点击事件上报
3. 支持自动开始热力图埋点(页面中的任意点击会自动上报)
4. 支持用户手动上报埋点
5. 切换路由自动携带上一次路由信息
6. 上报时默认携带时间、设备等通用参数
7. 支持模块曝光
8. 支持隐藏元素曝光

四、 表设计
字段 含义
id id序号
appid 应用标识webapp、minipro
uuid 设备id
userId 用户id
fromId 来源Id
shareId 分享链路,是否使用fromId
browserType 浏览器类型
browserVersion 浏览器版本
browserEngine 浏览器引擎
osType 设备类型
osVersion 设备版本号
eventTime 埋点上报时间
title 页面标题
url 页面地址
domPath 事件触发的dom
offsetX 事件触发的dom的x坐标
offsetY 事件触发的dom的y坐标
eventId 事件标识
eventType 事件类型
extra 用户自定义字段对象
五、 PV、UV统计
1、 拦截前端路由history方法,每次进入页面,记录开始时间、上次路由来源。数据加载完添加自定义字段对象extra。离开时自动触发埋点统计,解决目前浏览轮询不准确问题。
2、 navigator.sendBeacon(url, data)解决了ajax页面卸载会终止请求的问题
3、 分享链路如何分析
4、 我们的用户都有openid,PV、UV如何分析
六、 热力图上报
热力图埋点的意思是:监听页面中任意位置的用户点击事件,记录下点击的元素和位置,最后根据点击次数的多少,得到页面中的点击分布热力图。这一块的实现原理比较简单,只需要在埋点sdk中开启对所有元素对点击事件对监听即可,比较关键的一点是要计算出鼠标的点击x、y位置坐标,同时也可以把当前点击的元素名称或者class也一起上报,以便做更精细化的数据分析。
七、 dom点击上报
通过对body上点击事件进行全局监听,当触发事件时,判断当前event的getAttribute('tracker-key')值是否存在,如果存在则说明需要上报埋点事件,调用埋点上报方法即可。
八、 手动埋点
// 设置用户标识,在用户登录后使用
tracker.setUserId('9527')
// 埋点发送方法,3个参数分别是:事件类型,事件标识,上报数据
tracker.sendTracker('click', 'module1', {a:1, b:2, c:'ccc'})

搜索

复制