前端埋点与用户行为分析

前端埋点与用户行为分析——数据驱动的优化实践

1. 引言

在现代 Web 应用中，用户行为数据是驱动产品优化和提升用户体验的核心依据。前端埋点技术通过捕获用户操作、页面访问、交互行为等数据，帮助企业做出数据驱动的决策。

主题是介绍如何通过 前端埋点 构建一套完整的 数据收集与分析体系，并结合 错误监控 机制，提高应用的稳定性。

2. 埋点体系的核心概念

2.1 埋点的类型

1. 页面浏览埋点（PV, UV）

   • 统计用户访问页面的次数 (PV)
   • 统计独立访客数 (UV)

2. 点击埋点（Click）

   • 记录用户在页面上的点击行为，包括点击的元素、位置、文本等。

3. 停留时长埋点

   • 计算用户在页面上的停留时间，衡量内容的吸引力。

4. 跳出率与会话时长

   • 记录用户是否在短时间内离开页面。
   • 计算从进入到退出的时长。

5. 错误埋点（错误监控）

   • 记录 JavaScript 运行错误、资源加载失败、网络请求错误等。

3. 数据采集方案

3.1 通用属性采集

为了保证数据的完整性，每个埋点数据都应包含以下通用属性：

function getCommonProperties() {
    return {
        event_id: `evt_${Date.now()}_${Math.random().toString(36).substr(2, 5)}`,
        timestamp: Date.now(),
        session_id: getSessionId(),
        visitor_id: getVisitorId(),
        referrer: document.referrer || "",
        current_url: window.location.href,
        page_title: document.title,
        screen_width: window.screen.width,
        screen_height: window.screen.height,
        os: getOS(),
        browser: getBrowser(),
        device_type: getDeviceType(),
        network_type: getNetworkType(),
        userInfo: window.USER_INFO
    };
}

3.2 页面浏览事件埋点

window.addEventListener("load", trackPageView);
function trackPageView() {
    const event = {
        ...getCommonProperties(),
        event_name: 'page_view'
    };
    console.log('记录页面浏览事件:', event);
    cacheEvent(event);
}

3.3 点击事件埋点

document.addEventListener("click", trackClickEvent);
function trackClickEvent(event) {
    const target = event.target;
    const eventData = {
        ...getCommonProperties(),
        event_name: "click",
        element_text: target.innerText,
        element_class: target.className,
        element_position: {
            x: event.clientX,
            y: event.clientY,
        },
    };
    console.log("记录点击事件:", eventData);
    cacheEvent(eventData);
}

3.4 停留时长计算

let pageEnterTime = Date.now();
window.addEventListener("beforeunload", function () {
    const duration = Date.now() - pageEnterTime;
    const event = {
        ...getCommonProperties(),
        event_name: "page_duration",
        duration: duration
    };
    console.log("页面停留时间:", event);
    cacheEvent(event);
});

3.5 事件数据存储与上报

let eventQueue = [];
const REPORT_INTERVAL = 10 * 1000; // 10 秒上报一次

function cacheEvent(event) {
    eventQueue.push(event);
}

setInterval(reportEvents, REPORT_INTERVAL);
function reportEvents() {
    if (eventQueue.length === 0) return;
    console.log('上报数据：', eventQueue);
    fetch('/api/log_event', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ events: eventQueue })
    })
    .then(response => response.json())
    .then(() => {
        eventQueue = [];
    })
    .catch(error => console.error('上报错误:', error));
}

4. 错误监控

4.1 捕获 JavaScript 运行时错误

window.addEventListener("error", function (event) {
    const errorData = {
        ...getCommonProperties(),
        event_name: "error",
        error_message: event.message || "Unknown error",
        error_stack: event.error?.stack || "",
        error_source: event.filename || "",
        error_lineno: event.lineno || 0,
        error_colno: event.colno || 0
    };
    console.log("捕获 JavaScript 错误:", errorData);
    cacheEvent(errorData);
});

4.2 捕获 Fetch & Axios 请求错误

const originalFetch = window.fetch;
window.fetch = function (...args) {
    return originalFetch(...args).catch(error => {
        const eventData = {
            ...getCommonProperties(),
            event_name: "fetch_error",
            error_message: error.message || "Unknown Fetch error"
        };
        console.log("捕获 Fetch 错误:", eventData);
        cacheEvent(eventData);
        throw error;
    });
};

axios.interceptors.response.use(
    response => response,
    error => {
        const eventData = {
            ...getCommonProperties(),
            event_name: "axios_error",
            error_message: error.message || "Unknown Axios error",
            request_url: error.config?.url || "",
            request_method: error.config?.method || "",
        };
        console.log("捕获 Axios 错误:", eventData);
        cacheEvent(eventData);
        return Promise.reject(error);
    }
);

5. 数据指标分析

通过上述埋点数据，我们可以分析以下指标：

• PV（页面访问量）： 统计 page_view 事件。
• UV（独立访客数）： 统计 visitor_id 数量。
• 跳出率： 统计 page_duration < 5s 的用户比例。
• 平均停留时长： 计算 page_duration 的均值。
• 热点点击区域： 通过 click 事件的 element_position 生成热力图。
• 错误率： 统计 error 事件，分析 error_message。

6. 前端埋点的总结

• 前端埋点的核心目标是收集数据，分析使用产品的方式，并基于数据优化产品体验、提升业务效果。

• 一个完整的数据闭环

每一个环节都很重要，埋点只是第一步，真正的价值在于数据分析和业务落地！