埋点 埋点方案和原理

手动埋点

• 将埋点代码写入业务代码中

自动化埋点

• 劫持点击事件，然后拦截上报，零埋点拦截全局点击事件，然后上报
• 封装自定义指令上报，比如封装 vue 指令，将埋点代码和业务代码分开，mixins 中间件拦截等

可视化埋点

• 通过可视化的页面，点击选择对应的 DOM 元素进行埋点，添加对应的参数信息等，然后注入到工程里
• 添加点击事件监听器：在页面加载完成后，为页面中的所有元素添加点击事件监听器
• 获取被点击元素的 XPath：在点击事件中，获取被点击元素并计算其 XPath 表达式
• 根据 XPath 绑定事件：将计算出的 XPath 还原到 DOM 元素，添加可视化界面配置的参数

生成 XPath 的函数

function getXPathForElement(element) {
    const idx = (sib, name) => sib 
        ? idx(sib.previousElementSibling, name || sib.localName) + (sib.localName == name)
        : 1;
    const segs = elm => !elm || elm.nodeType !== 1
        ? ['']
        : elm.id && document.getElementById(elm.id) === elm
        ? [`id("${elm.id}")`]
        : [...segs(elm.parentNode), elm.localName.toLowerCase() + (
            elm.className ? `[class="${elm.className}"]` : `:nth-child(${idx(elm)})`
        )];
    return segs(element).join('/');
}

添加点击事件监听器

document.addEventListener('click', function(event) {
    event.preventDefault();  // 阻止默认点击行为，防止页面跳转等
    event.stopPropagation(); // 阻止事件冒泡，防止触发其他事件处理器
    
    const element = event.target;
    const xpath = getXPathForElement(element);
    
    console.log('Clicked element XPath:', xpath);

    // 你可以在这里处理获取到的 XPath，例如显示在页面上或进行其他操作
    alert('XPath: ' + xpath);
});

生成埋点代码注入

• 通过 document.evaluate 执行 XPath

function generateTrackingCode(eventType, xpath, eventData) {
    return `
        document.addEventListener('DOMContentLoaded', function() {
            const element = document.evaluate('${xpath}', document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
            if (element) {
                element.addEventListener('${eventType}', function(event) {
                    const data = ${JSON.stringify(eventData)};
                    sendTrackingData('${eventType}', data);
                });
            }
        });
    `;
}

function injectTrackingCode(trackingCode) {
    const script = document.createElement('script');
    script.type = 'text/javascript';
    script.textContent = trackingCode;
    document.head.appendChild(script);
}