Was laid

In March, the epidemic broke out in Shanghai, and the performance of the company where Bao Ge worked was also declining, so he decided to lay off some staff. Brother Bao is so glorious “graduation”, due to the epidemic, unable to interview, so use this time at home, to thoroughly prepare for the interview, and output the relevant content for everyone’s reference and discussion, study together, progress together.

This is a question that one of my big guy colleagues asked in the face of the little red book interviewer. The first one is the design of the front burying point. It can be seen that burying point has increasingly become one of the skills that must be mastered. This section we will talk about the buried point (front-end technology).

The concept of a buried point

Definition of buried point: a term used in the field of data collection, especially in the field of user behavior data collection. Refers to the technologies and implementation processes that capture, process, and transmit specific user actions or events. For example, the number of times users click on an icon, the length of watching a video, etc.

The technical essence of burying point is to monitor the events in the running process of software application first, and judge and capture the events that need attention when they happen.

As an example of the simplest process (as shown in the figure above), simulate the user buying huawei mobile phone: the user’s purpose is to buy Huawei mobile phone, but it is not a step to reach the settlement page, you need 1. 2. Search for Huawei mobile phones. 3. The last step is to pay for the phone. Before buying huawei mobile phones will have this three-step process and inevitable, we can in the front-end developers step 1, 2, 3, buried point process monitoring, such as in step 3 each time the user in the choice of model size, color, we have to monitor the click event, late customers hesitate and no order, we can use these data to analysis, Use it to optimize our products.

The core role of burying points is to 1. Monitor user data ->2. Then analyze user data ->3. Finally, we optimize our products, which is also a closed-loop process.

Classification of buried sites

In general, there are three main types of buried points: display buried points + exposure buried points + interactive buried points.

  1. Show buried point

Defining the presentation is actually a server-side trigger. After the server is triggered, what content will be displayed on the user side, and what should be recorded is the content displayed on the page, that is, the content delivered by the server (these things must be the main content of the current page and do not contain some interactive information).

  1. Exposure burial site

Which delivered content is actually seen by the user. Similar to the display buried point, the content can be unlimited because the screen is limited. What is seen by the user side (exposure) needs to be recorded as the individual “content” is seen. A series of delivered content can trigger multiple buried exposure.

  1. Interactive buried point

Interaction hotspots indicate that features/content is “clicked” by the user. In terms of burial point timing, this is downstream of show & exposure. Record consumption of the services we provide. For example, on a page, the user can click, so we need to record the corresponding interactive action buried point; For example, a video can be liked, we can also record the interaction points; For example, a video can be paused, and we can also record consumption points.

Buried point SDK design

Of course designing the SDK is the focus of this article.

We can design from data monitoring + performance monitoring + anomaly monitoring three points.

  1. Data monitoring

First design a class to write our SDK, the SO-CALLED SDK is a tool class library, but the bottom layer to help us encapsulate some events for us to use.

Product A product that needs to be buried. Generally, the product is connected to a third party using the token provided by the third party.

There are two reasons to use the IMG tag to send requests: 1. Prevent cross-domains; 2.

Pv represents the number of page views.

// Prodcut is used for the current production for versatility
// The url is the URL passed to the server
interface SdkProp {
    product: string;
    url:string;
}

interface MySDKProp {
    currentProduct: string;
}

class MySDK {
    currentProduct: string;
    url:string;
    constructor(props: SdkProp) {
        // Specify the product name
        this.currentProduct = props.product;
        this.url = props.url;
    } 
    // Data browser visits
    pv() {
        this.event('pv'.' ');
    }
    // Send data
    private send(url, params: any = {}) {
        params.product = this.currentProduct;

        const paramsArr = [];
        for (let key in params) {
            const val = params[key];
            paramsArr.push(`${key}-${val}`);
        }

        const newVal=`${url}?${paramsArr.join("&")}`;

        const img=document.createElement('img');

        img.src=newVal;
    }
    // Internal event
    event(key,value) {
        this.send(this.url,{key,value})
    }
}
Copy the code
  1. Performance monitoring

It’s actually using the Performence API.

class MySDK {
    constructor(props){+this.initPerformance();
    }
    // Initialize performance statistics
+   initPerformance(){+const url='yyy';
+       this.send(url,performance.timing); +}}Copy the code
  1. Abnormal monitoring

Listen for error and unhandledrejection events

    initError(){
        // Listen for js errors
        window.addEventListener('error'.event= >{
            const { error,lineno,colno}=event;
            this.error(error,{lineno,colno})
        })
        // Catch the data that promises do not catch
        window.addEventListener('unhandledrejection'.event= >{
            const { reason }=event;
            this.error(new Error(event.reason),{type:'unhandledrejection'})})}error(error,info={}){
        const { message,stack }=error;
        this.send(this.url,{message,stack,... info}) }Copy the code

Buried point SDK use

const sdk=new MySDK({
    product:'testxxx'.url:'http://www.youshu.com'
});

// page listener
sdk.error();

// Customize event listening
sdk.event();

// Monitor performance
window.addEventListener('DOMContentLoaded'.() = >{
    // To avoid having no data, instantiate the document after it has been loaded
    const sdk=new MySDK({
        product:'testxxx'.url:'http://www.youshu.com'}); });// Custom catch errors
try{
    let S=null;
    S.a;
}catch(e){
    sdk.error()
}
Copy the code

The interview short answer

Interviewer: How to design a front-end statistics buried point SDK?

Simple: Front-end buried points can be roughly divided into data monitoring, performance monitoring and error monitoring. Data monitoring includes monitoring pv and custom events. Performance monitoring can be done using the Performance API provided to us by the browser. Error monitoring, however, allows us to listen for error events on window objects and the unhandlerejected API when promises don’t catch. One thing to note is that we have to use img etc for requests because img tags are not cross-domain and are compatible. React/Vue provides apis such as ComponentDidCatch (React) and errorCaptured (Vue) for sending custom events.