PC端、移动端H5数据埋点JSSDK

目前只实现了基本的事件上报设计,更贴合业务的埋点可在此设计基础上扩展,比如上报时间戳、页面停留时长、页面渲染时长等。

安装

  • // 页面head引入
  [html]
1
<script src="./webTrack.js"></script>

二、配置

track对象中的clientConfig为埋点配置项:

  [plaintext]
1
2
serverUrl: 埋点上报地址 version: 当前SDK版本

生命周期事件上报

默认为页面生命周期添加了事件上报,直接修改webTrack.js中的生命周期函数完成定制上报。

生命周期函数如下:

  [plaintext]
1
2
3
4
DOMContentLoaded load beforeunload unload

自定义事件上报

给window对象注册了 __TRACK_,调用 __TRACK.track() 方法进行自定义事件上报。

源码学习

  [js]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
;(function() { const track = { // 应用生命周期Id,贯穿本次系统加载 sessionId: '', // 页面生命周期 pageLife: { DOMContentLoaded: function() { console.log('DOM is ready') const DOMContentLoadedOptions = {} track._sendDataToServer(track._parseParam(DOMContentLoadedOptions)) }, load: function() { console.log('Page loaded') const loadOptions = {} track._sendDataToServer(track._parseParam(loadOptions)) }, beforeunload: function(event) { console.log('Page beforeunload') const beforeunloadOptions = {} track._sendDataToServer(track._parseParam(beforeunloadOptions)) }, unload: function() { // 在这里可以使用navigator.sendBeacon(url, data)发送异步传输 console.log('Page unloaded') const unloadOptions = {} track._sendDataToServer(track._parseParam(unloadOptions)) } }, // 基础配置 clientConfig: { serverUrl: "", version: "1.0.0" }, // 公共参数 columns: { uid: '55555' }, /** * 参数编码返回字符串 */ _parseParam: function(param) { // 公共参数拼接 const data = Object.assign({sid: this.sessionId}, this.columns, param) var params = ""; for (var e in data) { if (e && data[e]) { params += encodeURIComponent(e) + "=" + encodeURIComponent(data[e]) + "&"; } } if (params) { return params.substring(0, params.length - 1); } else { return params; } }, /** * 数据上报 * @param { String } data */ _sendDataToServer: function(data) { // 发送数据data到服务器,其中data是一个字符串 var that = this; var i2 = new Image(1,1); i2.onerror = function(){ // 这里可以进行重试操作 }; i2.src = this.clientConfig.serverUrl + "?" + data; console.log(i2.src) }, /** * 产生uuid */ _generateId: function() { var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'; var tmpid = []; var r; tmpid[8] = tmpid[13] = tmpid[18] = tmpid[23] = '-'; tmpid[14] = '4'; for (i=0; i<36; i++) { if (!tmpid[i]) { r = 0| Math.random()*16; tmpid[i] = chars[(i==19) ? (r & 0x3) | 0x8 : r]; } } return tmpid.join(''); }, /** * 应用开始 */ _startSession() { this.sessionId = this._generateId() } } // 绑定页面生命周事件 Object.keys(track.pageLife).forEach((hook) => { window.addEventListener(hook, track.pageLife[hook]) }) // 暴露公共方法 window.__TRACK_ = { /** * 自定义事件上报 * @param {*} options 上报数据 */ track: function(options) { track._sendDataToServer(track._parseParam(options)) } } const onload = function onload () { track._startSession() } onload() })()

参考资料

https://github.com/BillionChen/bigDataH5SDK

https://github.com/sensorsdata/sa-sdk-javascript

https://github.com/Hugohui/webTrackSdk