12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879 |
- class Tracker {
- constructor(options = {}) {
- this.baseUrl = options.baseUrl || '';
- this.timer = null;
- this.startTime = 0;
- this.heartbeatInterval = options.heartbeatInterval || 30000; // 默认30秒发送一次心跳
- }
- init() {
- this.startTime = Date.now();
- this.bindEvents();
- this.startHeartbeat();
- }
- bindEvents() {
- window.addEventListener('beforeunload', this.handleBeforeUnload);
- window.addEventListener('click', this.handleClickEvent);
- }
- startHeartbeat() {
- this.timer = setInterval(() => {
- this.sendData({
- eventType: 'heartbeat',
- duration: Math.round((Date.now() - this.startTime) / 1000),
- }, {heartbeatSeconds: this.heartbeatInterval});
- }, this.heartbeatInterval);
- }
- handleBeforeUnload = (e) => {
- const data = {
- eventType: 'page_close',
- duration: Math.round((Date.now() - this.startTime) / 1000),
- };
- const payload = JSON.stringify(data);
- if (navigator.sendBeacon) {
- navigator.sendBeacon(this.baseUrl, payload);
- } else {
- this.sendData(payload, {heartbeatSeconds: this.heartbeatInterval});
- }
- };
- handleClickEvent = (event) => {
- const target = event.target;
- if (target.matches('[data-track]')) {
- const trackInfo = {
- eventType: 'button_click',
- elementId: target.id || '无ID',
- elementClass: target.className || '无class',
- text: target.innerText || target.textContent || '',
- timestamp: new Date().toISOString(),
- };
- this.sendData(trackInfo, {heartbeatSeconds: this.heartbeatInterval});
- }
- };
- sendData(data, headers = {}) {
- console.log('上报埋点数据:', data);
- fetch(`${this.baseUrl}`, { method: 'POST', headers: { 'Content-Type': 'application/json' ,...headers}, body: JSON.stringify(data) });
- }
- destroy() {
- window.removeEventListener('beforeunload', this.handleBeforeUnload);
- window.removeEventListener('click', this.handleClickEvent);
- if (this.timer) {
- clearInterval(this.timer);
- }
- this.sendData({
- eventType: 'tracker_destroyed',
- duration: Math.round((Date.now() - this.startTime) / 1000),
- }, {heartbeatSeconds: this.heartbeatInterval});
- }
- }
- // 使用示例:
- // const tracker = new Tracker({ baseUrl: 'https://your-tracking-api.com' });
- // tracker.init();
- // 暴露给全局或者作为模块导出
- window.Tracker = Tracker;
|