AI智能跟踪助手核心技术原理与代码实战（2026-04-10）

// 传统代码埋点——在业务代码中到处插入埋点

function handleLogin() {
    // 业务逻辑：登录
    api.login(username, password).then(res => {
        // 埋点代码与业务代码深度耦合
        tracker.track('login_success', { userId: res.userId, timestamp: Date.now() });
        
        // 继续业务逻辑
        navigateToDashboard();
    });
}

function handleClickProduct(productId) {
    // 埋点又插进来了
    tracker.track('product_click', { productId });
    // 业务逻辑...
}

// auto-tracker.js - 零依赖无痕埋点SDK
(function(window) {
    class AutoTracker {
        constructor(config = {}) {
            this.reportUrl = config.reportUrl || '/api/track';
            this.eventTypes = config.eventTypes || ['click', 'change', 'scroll'];
            this.batchSize = config.batchSize || 10;      // 批量上报大小
            this.batchInterval = config.batchInterval || 3000; // 批量间隔(ms)
            this.queue = [];           // 待上报队列
            this.timer = null;         // 批量上报定时器
            this.init();
        }

        // 初始化：监听所有指定事件
        init() {
            // 关键：利用事件冒泡，在document层统一监听
            this.eventTypes.forEach(type => {
                document.addEventListener(type, this.handleEvent.bind(this), true);
            });
            this.startBatchTimer();
            this.listenPageUnload();
        }

        // 事件处理函数
        handleEvent(event) {
            const eventData = {
                type: event.type,           // 事件类型：click、change、scroll
                target: this.getElementPath(event.target), // 元素唯一标识
                timestamp: Date.now(),      // 时间戳
                url: window.location.href,  // 页面URL
                screen: `${window.screen.width}x${window.screen.height}`,
                userAgent: navigator.userAgent
            };
            this.queue.push(eventData);
            // 达到批量阈值，立即上报
            if (this.queue.length >= this.batchSize) {
                this.flush();
            }
        }

        // 生成元素的唯一CSS选择器路径
        getElementPath(element) {
            if (!element || element === document.body) return 'body';
            if (element.id) return `${element.id}`;
            if (element.className) {
                const classes = element.className.split(/\s+/).filter(Boolean);
                if (classes.length) return `.${classes.join('.')}`;
            }
            // 递归向上生成，使用nth-child保证唯一性
            const parent = element.parentNode;
            const index = Array.from(parent.children).indexOf(element) + 1;
            return `${this.getElementPath(parent)} > :nth-child(${index})`;
        }

        // 批量上报
        flush() {
            if (this.queue.length === 0) return;
            const dataToSend = [...this.queue];
            this.queue = [];
            this.send(dataToSend);
        }

        // 发送数据——使用BeaconAPI保证页面关闭时数据不丢失
        send(data) {
            const payload = JSON.stringify(data);
            if (navigator.sendBeacon) {
                // 页面卸载场景：BeaconAPI异步发送，不阻塞页面关闭
                navigator.sendBeacon(this.reportUrl, payload);
            } else {
                // 降级方案：fetch + keepalive
                fetch(this.reportUrl, {
                    method: 'POST',
                    body: payload,
                    headers: { 'Content-Type': 'application/json' },
                    keepalive: true
                }).catch(console.warn);
            }
        }

        // 批量上报定时器
        startBatchTimer() {
            this.timer = setInterval(() => this.flush(), this.batchInterval);
        }

        // 页面关闭前确保数据发送
        listenPageUnload() {
            window.addEventListener('beforeunload', () => this.flush());
            window.addEventListener('pagehide', () => this.flush());
        }

        // 销毁SDK，释放资源
        destroy() {
            if (this.timer) clearInterval(this.timer);
            this.flush();
        }
    }

    // 暴露全局API
    window.AutoTracker = AutoTracker;
})(window);

// 使用方式：只需一行代码启动！
const tracker = new AutoTracker({ reportUrl: 'https://your-api.com/track' });