123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170 |
- 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 || (() => {}); // 销毁前的回调函数
- this.crashTime = options.crashTime || 3; // 闪退阈值
- this.idleTimeout = options.idleTimeout || 300000; // 默认 5 分钟无操作视为离开
- }
- 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);
- document.addEventListener('visibilitychange', this.handleVisibilityChange);
- window.addEventListener('mousemove', this.resetIdleTimer);
- window.addEventListener('keydown', this.resetIdleTimer);
- 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);
- }
- // 页面初始化调用,手动在不同框架的生命周期中调用
- markContentLoaded() {
- this.sendData({
- eventType: 'content_loaded',
- loadTime: Math.round((Date.now() - this.startTime) / 1000),
- });
- }
- // 用户无操作时发送不活跃事件
- resetIdleTimer() {
- if (this.idleTimer) {
- clearTimeout(this.idleTimer);
- }
- this.idleTimer = setTimeout(() => {
- this.sendData({
- eventType: 'user_inactive',
- duration: Math.round((Date.now() - this.startTime) / 1000),
- });
- }, this.idleTimeout);
- }
- handleBeforeUnload = (e) => {
- const duration = Math.round((Date.now() - this.startTime) / 1000);
- const data = {
- eventType: 'page_close',
- duration,
- exitType: duration > this.crashTime ? 'crash' : 'normal',
- };
- 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});
- }
- };
- handleVisibilityChange = () => {
- if (document.hidden) {
- // 用户切换到其他 tab
- this.sendData({ eventType: 'tab_inactive' });
- } else {
- // 用户回到当前 tab
- this.sendData({ eventType: 'tab_active' });
- }
- };
- queueIdleTask(task, timeout = 1000) {
- if (typeof requestIdleCallback === 'function') {
- requestIdleCallback(() => {
- task();
- }, { timeout });
- } else {
- // 兜底方案:使用 setTimeout 模拟
- setTimeout(task, 0);
- }
- }
- sendData(data, headers = {}) {
- this.queueIdleTask(() => {
- console.log('上报埋点数据:', data);
- fetch(`${this.baseUrl}`, {
- method: 'POST',
- headers: { 'Content-Type': 'application/json', ...headers },
- body: JSON.stringify(data)
- }).catch(err => {
- console.error('埋点失败:', err);
- });
- });
- }
- destroy() {
- window.removeEventListener('beforeunload', this.handleBeforeUnload);
- window.removeEventListener('click', this.handleClickEvent);
- document.removeEventListener('visibilitychange', this.handleVisibilityChange);
- window.removeEventListener('mousemove', this.resetIdleTimer);
- window.removeEventListener('keydown', this.resetIdleTimer);
- 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;
|