auto-point 0.0.8 → 0.0.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/AP/auto_point.js +248 -0
- package/package.json +1 -1
package/AP/auto_point.js
ADDED
|
@@ -0,0 +1,248 @@
|
|
|
1
|
+
class auto_point {
|
|
2
|
+
// 初始化状态
|
|
3
|
+
#INIT_STATE = true
|
|
4
|
+
// 服务端地址
|
|
5
|
+
#SERVER = void (0)
|
|
6
|
+
get server() {
|
|
7
|
+
return this.#SERVER
|
|
8
|
+
}
|
|
9
|
+
set server(url) {
|
|
10
|
+
this.#SERVER = url
|
|
11
|
+
}
|
|
12
|
+
// 事件列表
|
|
13
|
+
#EVENTS = ['click']
|
|
14
|
+
// 发送数据间隔 单位毫秒 默认10秒
|
|
15
|
+
#SEND_TIME = 10_000
|
|
16
|
+
// sing挂载事件元素标记
|
|
17
|
+
#POINT_SING = "auto_point"
|
|
18
|
+
// 埋点队列
|
|
19
|
+
#POINT_LIST = new Array()
|
|
20
|
+
get point_list() {
|
|
21
|
+
return this.#POINT_LIST
|
|
22
|
+
}
|
|
23
|
+
set point_list(data){
|
|
24
|
+
this.#POINT_LIST = data
|
|
25
|
+
}
|
|
26
|
+
// 埋点系统时间
|
|
27
|
+
#POINT_SYS_INIT_TIME = void(0)
|
|
28
|
+
get point_sys_init_time(){
|
|
29
|
+
return this.#POINT_SYS_INIT_TIME
|
|
30
|
+
}
|
|
31
|
+
// 上次发送时间
|
|
32
|
+
#POINT_LAST_SEND_TIME = void(0)
|
|
33
|
+
get point_last_send_time(){
|
|
34
|
+
return this.#POINT_LAST_SEND_TIME
|
|
35
|
+
}
|
|
36
|
+
// 中间件列表
|
|
37
|
+
#MIDDLEWARE = new Array()
|
|
38
|
+
|
|
39
|
+
#ERROR(msg) {
|
|
40
|
+
console.error(msg)
|
|
41
|
+
}
|
|
42
|
+
#isFunction(obj, message) {
|
|
43
|
+
if (typeof obj === 'function') {
|
|
44
|
+
return true
|
|
45
|
+
} else {
|
|
46
|
+
message && this.#ERROR(message)
|
|
47
|
+
return false
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
#NotArrowFunction(obj,message){
|
|
51
|
+
if (typeof obj === 'function' && obj.prototype) {
|
|
52
|
+
return true
|
|
53
|
+
} else {
|
|
54
|
+
message && this.#ERROR(message)
|
|
55
|
+
return false
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
#isArray(array, message) {
|
|
59
|
+
if (Array.isArray(array)) {
|
|
60
|
+
return true
|
|
61
|
+
} else {
|
|
62
|
+
message && this.#ERROR(message)
|
|
63
|
+
return false
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
#isObject(obj, message) {
|
|
67
|
+
if (Object.prototype.toString.call(obj) === '[object Object]') {
|
|
68
|
+
return true
|
|
69
|
+
} else {
|
|
70
|
+
message && this.#ERROR(message)
|
|
71
|
+
return false
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
#params_hash_server(server) {
|
|
75
|
+
if (server) {
|
|
76
|
+
return true
|
|
77
|
+
} else {
|
|
78
|
+
throw "The server in params cannot be empty"
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
constructor() { }
|
|
83
|
+
|
|
84
|
+
#init(params) {
|
|
85
|
+
if (this.#INIT_STATE && this.#isObject(params, "Init only accepts object type data") && this.#params_hash_server(params.server)) {
|
|
86
|
+
this.#SERVER = params.server
|
|
87
|
+
this.#SEND_TIME = params.send_time || this.#SEND_TIME
|
|
88
|
+
this.#POINT_SING = params.point_sing || this.#POINT_SING
|
|
89
|
+
if (params.events && this.#isArray(params.events, "events must be an Array")) {
|
|
90
|
+
this.#EVENTS = params.events
|
|
91
|
+
}
|
|
92
|
+
this.#POINT_SYS_INIT_TIME = new Date().getTime()
|
|
93
|
+
this.#mount_dom_event()
|
|
94
|
+
this.#timer_send()
|
|
95
|
+
// 初始化成功埋点
|
|
96
|
+
let type = "init"
|
|
97
|
+
let value = "success"
|
|
98
|
+
let describe = "Webpage initialization succeeded"
|
|
99
|
+
this.#add_point(this.#create_active_point_data(type, value, describe))
|
|
100
|
+
this.#INIT_STATE = false
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
#create_point_data_common_params(){
|
|
105
|
+
let point_item = new Object()
|
|
106
|
+
point_item.location = JSON.parse(JSON.stringify(window.location))
|
|
107
|
+
point_item.point_sys_init_time = this.#POINT_SYS_INIT_TIME
|
|
108
|
+
point_item.point_last_send_time = this.#POINT_LAST_SEND_TIME
|
|
109
|
+
return point_item
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
|
|
113
|
+
/**
|
|
114
|
+
* @description 构造埋点数据
|
|
115
|
+
* @param {Element} element 接收一个DOM元素节点对象
|
|
116
|
+
* @returns {object} 返回一个埋点数据对象point_item
|
|
117
|
+
*/
|
|
118
|
+
#create_event_point_data(element) {
|
|
119
|
+
let point_item = this.#create_point_data_common_params()
|
|
120
|
+
point_item.point_type = "event"
|
|
121
|
+
point_item.point_sing = this.#POINT_SING
|
|
122
|
+
point_item.elment = element.target
|
|
123
|
+
point_item.event_type = element.type
|
|
124
|
+
point_item.point_attr = element.target.getAttribute(this.#POINT_SING)
|
|
125
|
+
point_item.point_value = element.target.getAttribute(this.#POINT_SING)
|
|
126
|
+
return point_item
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
/**
|
|
130
|
+
*
|
|
131
|
+
* @param {string} activeType 埋点动作类型
|
|
132
|
+
* @param {string} activeAttr 埋点动作描述
|
|
133
|
+
* @param {string} activeValue 埋点动作记录值
|
|
134
|
+
* @returns
|
|
135
|
+
*/
|
|
136
|
+
#create_active_point_data(activeType, activeAttr, activeValue){
|
|
137
|
+
let point_item = this.#create_point_data_common_params()
|
|
138
|
+
point_item.point_type = "active"
|
|
139
|
+
point_item.point_sing = activeType
|
|
140
|
+
point_item.point_attr = activeAttr
|
|
141
|
+
point_item.point_value = activeValue
|
|
142
|
+
return point_item
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
// 挂载全局监听
|
|
146
|
+
#mount_dom_event() {
|
|
147
|
+
if (window && document && document.body) {
|
|
148
|
+
let body = document.body
|
|
149
|
+
// 挂载各个类型事件监听
|
|
150
|
+
this.#EVENTS.map((item) => {
|
|
151
|
+
body.addEventListener(item, (e) => {
|
|
152
|
+
if (e.target.getAttribute(this.#POINT_SING)) {
|
|
153
|
+
this.#add_point(this.#create_event_point_data(e))
|
|
154
|
+
}
|
|
155
|
+
})
|
|
156
|
+
})
|
|
157
|
+
// 挂载hash监听
|
|
158
|
+
window.addEventListener("hashchange",()=>{
|
|
159
|
+
let type = "hashchange"
|
|
160
|
+
let value = window.location.hash
|
|
161
|
+
let describe = "Webpage hash value is changed to: " + window.location.hash
|
|
162
|
+
this.#add_point(this.#create_active_point_data(type, value, describe))
|
|
163
|
+
})
|
|
164
|
+
// 挂载页面离开事件监听
|
|
165
|
+
window.addEventListener('visibilitychange', () => {
|
|
166
|
+
if (navigator && navigator.sendBeacon && document.visibilityState === 'hidden') {
|
|
167
|
+
let type = "pagehide"
|
|
168
|
+
let value = "hidden"
|
|
169
|
+
let describe = "Webpage hidden point"
|
|
170
|
+
this.#add_point(this.#create_active_point_data(type, value, describe))
|
|
171
|
+
this.#send()
|
|
172
|
+
}
|
|
173
|
+
})
|
|
174
|
+
} else {
|
|
175
|
+
throw "<body></body> not found in DOM"
|
|
176
|
+
}
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
// 添加埋点记录
|
|
180
|
+
#add_point(params) {
|
|
181
|
+
if (this.#isObject(params, "Point data must be an object")) {
|
|
182
|
+
params.time = new Date().getTime()
|
|
183
|
+
this.#POINT_LIST.push(params)
|
|
184
|
+
}
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
// 发送埋点数据
|
|
188
|
+
#send() {
|
|
189
|
+
if (this.#POINT_LIST.length) {
|
|
190
|
+
this.#MIDDLEWARE.map((item) => {
|
|
191
|
+
if (this.#isFunction(item)) {
|
|
192
|
+
item.apply(this)
|
|
193
|
+
}
|
|
194
|
+
})
|
|
195
|
+
navigator.sendBeacon(this.#SERVER, JSON.stringify(this.#POINT_LIST));
|
|
196
|
+
// 发送后清空埋点列表数据
|
|
197
|
+
this.#POINT_LIST = new Array()
|
|
198
|
+
} else {
|
|
199
|
+
console.log("无新埋点数据")
|
|
200
|
+
}
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
// 定时发送
|
|
204
|
+
#timer_send() {
|
|
205
|
+
setInterval(() => {
|
|
206
|
+
this.#send()
|
|
207
|
+
}, this.#SEND_TIME)
|
|
208
|
+
}
|
|
209
|
+
|
|
210
|
+
/**
|
|
211
|
+
* @brief 埋点记录初始化
|
|
212
|
+
* @description server (必填) - 服务端地址
|
|
213
|
+
* @description send_time - 发送数据间隔 单位毫秒 默认10_000毫秒
|
|
214
|
+
* @description point_sing - 默认"auto_point",添加元素点击事件的埋点标记,被标记的元素点击时触发埋点事件
|
|
215
|
+
* @param {object} params
|
|
216
|
+
* @param {string} params.server
|
|
217
|
+
* @param {Array.<string>} [params.events]
|
|
218
|
+
* @param {number} [params.send_time]
|
|
219
|
+
* @param {string} [params.point_sing]
|
|
220
|
+
*/
|
|
221
|
+
init(params) {
|
|
222
|
+
this.#init(params)
|
|
223
|
+
return this
|
|
224
|
+
}
|
|
225
|
+
|
|
226
|
+
// 手动发送数据
|
|
227
|
+
send() {
|
|
228
|
+
this.#send()
|
|
229
|
+
}
|
|
230
|
+
|
|
231
|
+
/**
|
|
232
|
+
* @description 挂载中间件
|
|
233
|
+
* @param {function(this):void} func 不允许传入箭头函数
|
|
234
|
+
* @return this
|
|
235
|
+
*/
|
|
236
|
+
middleware(func) {
|
|
237
|
+
if (this.#NotArrowFunction(func, "Middleware requires a non-arrow function parameter")) {
|
|
238
|
+
this.#MIDDLEWARE.push(func)
|
|
239
|
+
}
|
|
240
|
+
return this
|
|
241
|
+
}
|
|
242
|
+
|
|
243
|
+
// 手动添加埋点记录
|
|
244
|
+
add_point(params) {
|
|
245
|
+
this.#add_point(params)
|
|
246
|
+
}
|
|
247
|
+
|
|
248
|
+
}
|