前端埋点实现方式与核心原理

前端埋点，就是把用户在产品里的关键行为（点击、曝光、停留、错误等）记录下来，回传到服务器或第三方平台，为产品决策、运营分析、问题排查提供数据依据。

核心实现思路 埋点本质上就是向埋点平台的数据接收 URL 发送一个 HTTP 请求，请求中携带了格式化的数据（通常是 URL 参数或 JSON）。

方法一：使用 Image Beacon（经典可靠）

这是最传统且兼容性最好的方式，利用图片请求没有跨域限制的特性。

// 将属性对象转换为 URL 参数字符串
function formatParams(params) {
    return Object.keys(params).map((key) => `${encodeURIComponent(key)}=${encodeURIComponent(params[key])}`).join("&");
}

// 使用 Image Beacon
document.getElementById("ImageBeacon").addEventListener("click", () => {
    // 构建埋点 URL 和参数
    const saUrl = "https://..."; // 数据接收地址
    const project = "fosun_test1"; // 您的项目名
    const event = "ButtonClick"; // 事件名称，如 'PageView', 'ButtonClick'
    const distinctId = "user_123"; // 用户 ID
    const properties = {
        $url: window.location.href,
        button_name: 
    };
     finalUrl = ;
    
    
     beacon =  (, ); 
    beacon. = finalUrl; 
    
    
    beacon. = () { .(); };
    beacon. = () { .(); };
});