class Tracker { constructor(options = {}) { this.baseUrl = options.baseUrl || ''; this.timer = null; this.startTime = 0; this.heartbeatInterval = options.heartbeatInterval || 30000; // 默认30秒发送一次心跳 this.visitCookieTimeout = options.visitCookieTimeout || 1; // 默认访问次数cookie有效期1分钟 this.maxVisitCount = options.maxVisitCount || 5; // 默认最大访问次数5次 this.blockCookieTimeout = options.blockCookieTimeout || 180; // 默认封锁cookie有效期180分钟 this.myEventSend = options.myEventSend || (() => {}); // 是否开启自定义事件上报 this.beforeDestroy = options.beforeDestroy || (() => {}); // 销毁前的回调函数 } init() { const visitCookieName = 'userVisitCount'; const blockCookieName = 'userBlocked'; const isBlocked = getCookie(blockCookieName); const doneFN = () => { this.startTime = Date.now(); this.bindEvents(); this.startHeartbeat(); } if (isBlocked) { // restoreBlock(); return; } let visitCount = getCookie(visitCookieName); if (visitCount) { visitCount = parseInt(visitCount, 10); if (visitCount >= this.maxVisitCount) { setCookie(blockCookieName, 'true', this.blockCookieTimeout); // 封锁用户 180 分钟 deleteCookie(visitCookieName); // restoreBlock(); } else { visitCount += 1; setCookie(visitCookieName, visitCount, this.visitCookieTimeout); // 每次访问 +1,有效期 1 分钟 doneFN(); } } else { setCookie(visitCookieName, '1', this.visitCookieTimeout); // 首次访问,设置访问次数为 1 doneFN(); } } bindEvents() { window.addEventListener('beforeunload', this.handleBeforeUnload); window.addEventListener('click', this.handleClickEvent); this.myEventSend(this.sendData.bind(this)); // 绑定自定义事件上报 } 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); this.beforeDestroy(); 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;