日淘平台轻量化用户行为埋点——不阻塞页面的数据采集方案

// 轻量化埋点SDK
class LiteTracker {
    constructor(config) {
        this.endpoint = config.endpoint || '/api/track.gif';
        this.site = config.site || 'default';
        this.buffer = [];
        this.flushInterval = config.flushInterval || 5000; // 5秒批量上报
        this.cache = new Set(); // 去重缓存
        
        // 启动定时批量上报
        setInterval(() => this.flush(), this.flushInterval);
        // 页面关闭前上报剩余数据
        window.addEventListener('beforeunload', () => this.flush(true));
    }
    
    // 记录核心行为
    track(eventType, params = {}) {
        // 去重：5秒内同一商品重复浏览仅上报一次
        const dedupKey = `${eventType}_${params.goods_id || ''}`;
        const now = Date.now();
        if (this.cache.has(dedupKey) && (now - this.lastTrackTime) < 5000) {
            return;
        }
        this.cache.add(dedupKey);
        this.lastTrackTime = now;
        
        const data = {
            event: eventType,  // 商品详情、分类点击、收藏、加入代购、筛选切换
            site: this.site,
            goods_id: params.goods_id || '',
            category: params.category || '',
            device: this.getDeviceType(),
            region: this.getRegion(),
            timestamp: now,
            user_id: this.getUserId()
        };
        
        this.buffer.push(data);
        
        // 缓冲区超过10条立即上报
        if (this.buffer.length >= 10) {
            this.flush();
        }
    }
    
    // 异步图片上报
    flush(immediate = false) {
        if (this.buffer.length === 0) return;
        
        const data = this.buffer.splice(0, this.buffer.length);
        const params = new URLSearchParams();
        params.append('data', JSON.stringify(data));
        
        // 使用Image对象上报，不阻塞页面
        const img = new Image(1, 1);
        img.src = `${this.endpoint}?${params.toString()}`;
        
        if (immediate) {
            // 页面关闭前使用sendBeacon确保数据送达
            navigator.sendBeacon && navigator.sendBeacon(
                this.endpoint,
                JSON.stringify(data)
            );
        }
    }
    
    getDeviceType() {
        // 检测设备类型：PC / Mobile / Tablet
        const ua = navigator.userAgent;
        if (/mobile/i.test(ua)) return 'Mobile';
        if (/tablet/i.test(ua)) return 'Tablet';
        return 'PC';
    }
    
    getRegion() {
        // 通过IP或浏览器语言判断地区
        // 实际项目中通过后端接口获取
        return navigator.language.includes('zh') ? 'CN' : 'Other';
    }
}

-- 埋点数据表结构
CREATE TABLE user_tracking (
    id BIGINT AUTO_INCREMENT PRIMARY KEY,
    user_id VARCHAR(32),
    event_type VARCHAR(32),
    goods_id VARCHAR(64),
    category VARCHAR(64),
    device VARCHAR(16),
    region VARCHAR(8),
    site VARCHAR(16),  -- 区分雅虎/煤炉用户行为
    event_time DATETIME,
    INDEX idx_user_time (user_id, event_time),
    INDEX idx_category_time (category, event_time),
    INDEX idx_site_time (site, event_time)
) PARTITION BY RANGE (TO_DAYS(event_time)) (
    -- 按天自动分区
);