“This is the second day of my participation in the First Challenge 2022.

TIP 👉 Hugh said that women are not English things, night longquan wall singing. — Qiu Jin “The partridge day, the sinking of the motherland can not help feeling”

preface

Data burying point scheme and monitoring scheme

Code buried point

Burying code is the most flexible, but also the most time consuming.

In general, large factories will encapsulate their own NPM package for buried point reporting and provide it to each business line.

What kind of information do we need to report?

  1. Identification information for buried sites, such as eventId, eventType

  2. Business customized information, such as education industry, click a button, we need to report the user click which grade

  3. Generic device information, such as user userId, userAgent, deviceId, TIMESTAMP, locationUrl, etc

How do you report it?

  1. Real-time reporting: The service sends a report request immediately after invoking the API of the burying point

  2. The SDK internally collects the information to be reported by the service side and reports the information when the browser is idle or before the page is uninstalled. If the information fails to be reported, compensation measures are taken.

No burial site

concept

Unburied-spot is not exactly what it means, but what it really means is that there is no need for r&d to manually buried-spot.

There is usually an SDK that encapsulates the logic and the business side can reference it directly.

What the SDK does is generally listen for all page events, report all click events and the corresponding element of the event, and then analyze that data in the background.

There are GrowingIO, Zizo, Junge IO, Heap, Mixpanel and other commercial products in the industry

implementation

  1. Listen for the window element
window.addEventListener("click".function(event){
    let e = window.event || event;
    let target = e.srcElement || e.target;
}, false);
Copy the code
  1. Gets the element that uniquely identifies the xPath

function getXPath(element) {
    //*[@id="xPath"]
    if (element.id) {
        return '//*[@id=\"' + element.id + '\]";
    }

    // Look up to the body, end the search, return the result
    if (element == document.body) {
        return '/html/' + element.tagName.toLowerCase();
    }

    let currentIndex = 1.// The default index for the first element is 1
    siblings = element.parentNode.childNodes;

    for (let sibling of siblings) {
        if (sibling == element) {
            // After determining the index of the current element in the sibling node, look up
            return getXPath(element.parentNode) + '/' + element.tagName.toLowerCase() + '[' + (currentIndex) +
            '] ';
        } else if (sibling.nodeType == 1 && sibling.tagName == element.tagName) {
            // Continue to find the index of the current element in the sibling nodecurrentIndex++; }}};Copy the code

Gets the position of the element


function getOffset(event) {
    const rect = getBoundingClientRect(event.target);
    if (rect.width == 0 || rect.height == 0) {
        return;
    }

    let doc = document.documentElement || document.body.parentNode;
    const scrollX = doc.scrollLeft;
    const scrollY = doc.scrollTop;
    const pageX = event.pageX || event.clientX + scrollX;
    const pageY = event.pageY || event.clientY + scrollY;
    const data = {
        offsetX: ((pageX - rect.left - scrollX) / rect.width).toFixed(4),
        offsetY: ((pageY - rect.top - scrollY) / rect.height).toFixed(4),};return data;

}

Copy the code

report

window.addEventListener("click".function(event){
    const e = window.event || event;
    const target = e.srcElement || e.target;
    const xPath = getXPath(target);
    constoffsetData = getOffset(event); report({ xPath, ... offsetData}); },false);

Copy the code