Front buried point

Time:2021-4-21

 
The front-end buried point is mainly for service operators to collect user behavior data for subsequent data analysis.

What can front end monitoring and burying point do

  • Data monitoring (user behavior)
    • pv,uv
    • Record operating system
    • How long does the user stay on each page
    • User access
    • Users in the corresponding page trigger behavior, click the button
  • Performance monitoring (performance in JS)
    • User’s first screen loading
    • HTTP request response time
    • Page rendering time
    • Completion time of page interactive animation
      critical code
let timing = performance.timing,
start = timing.navigationStart,
dnsTime = 0,
tcpTime = 0,
firstPaintTime = 0,
domRenderTime = 0,
loadTime = 0;
//DNS resolution time
dnsTime = timing.domainLookupEnd - timing.domainLookupStart;
// TCP setup time
tcpTime = timing.connectEnd - timing.connectStart;
//First screen time
firstPaintTime = timing.responseStart - start;
//DOM rendering completion time
domRenderTime = timing.domContentLoadedEventEnd - start;
//Page onload time
loadTime = timing.loadEventEnd - start;

 

|Domain | JavaScript| document.domain , such as “domain”: “127.0.0.1”|
| URL (url) | javascript | document.URL , such as “URL”:“ http://127.0.0.1 :3000/” |
|Page title | JavaScript| document.title , such as “title”: “express”|
|Previous URL, refer (refer) | JavaScript| document.referrer ; get the value such as: “referrer”: ”|
|Resolution (height: SH; width: SW) | JavaScript| window.screen.height &The values obtained are as follows: “sh”: “1050”, “SW”: “1680”|
|Color depth (CD) | JavaScript| window.screen.colorDepth For example, “CD”: “32”|
|Client language (Lang) | JavaScript| navigator.language , such as “Lang”: “zh CN”|
| user-agent header(userAgent) | javascript | navigator.userAgent The values obtained are as follows: “useragent”: “Mozilla / 5.0 (Windows NT 6.1; win64; x64) applewebkit / 537.36 (KHTML, like gecko) Chrome / 48.0.2564.82 Safari / 537.36″|

Summary of existing front end buried point schemes

  • Manual burying point
    1. Command burying point, insert monitoring logic into the front-end code where monitoring is needed
    //Send buried point request when page loading
    $(document).ready(function(){
    //... here's some business logic
    sendRequest(params);
    });
    //  Send buried point request when button is clicked
    $('button').click(function(){
    //There is some business logic here
    sendRequest(params);
    });

     

    2. Declared buried point
    The idea of declarative burying point is to decouple the burying point code from the specific interaction and business logic. Developers only care about the controls that need burying points, and declare the required burying point data for these controls, so as to reduce the cost of burying points and add burying point information on DOM elements, such as the following
    //Key is the unique identification of the buried point; act is the method of the buried point
  • Compared with the command buried point, it’s not a fool to monitor where the buried point is
  • Traverse DOM tree and find [ data – stat ] Element, bind the click event, and [ data – stat ] Send the information on to the server
  • Disadvantages:
    1. The timing of traversing the DOM tree. A simple example is that the row data of a table is loaded asynchronously, and the operation buttons in the table row need to be buried. Therefore, traversing when DOM is ready is obviously impossible
    2. How to ensure that the buried point event will not be repeatedly bound to the element, and N buried point requests are sent in one operation
    There’s a lot of repetitive work, and we have to deal with bubbling.
  • Visualization of buried points
    Industry open source solution: mixpanel
    Build and implement the visual page
    The operation is realized through the visual interface drag and drop configuration, and these active control elements have unique identification. Through the background of buried point configuration, the elements are associated with the events to be collected, and the buried point code can be automatically generated and embedded into the page.
  • Full burying point
    Without buried point, the front-end automatically collects all events, reports buried point data, and the back-end filters and calculates useful data. The advantage is that the front-end only needs to load buried point script once. The disadvantage is that the traffic and data collected are too large, and the performance of the server is under great pressure. Growingio is the mainstream solution.
The SDK will automatically track the clicks of HTML tags such as buttons (a, button, input) on the page. Once a button on the page clicks, the SDK will collect some information about the button, such as: The label type of the button, the text content of the button, the name of the button, the ID and class name of the button, as well as some button specific properties, such as.
For example, the click event is bound to the document and bound in the capture phase of the event. Even if the button element is not bubbled, the delivery of the capture phase will not be affected. (click an element in the page, and the event is passed down layer by layer from the ancestor element of the element. This phase is the capture phase of the event. When an event is passed to this element, it will be passed back to the root element. This stage is the bubbling stage of the event
Event identification? How to uniquely locate the element of a page and set a root node to the top-down attribute name of the element
Disadvantages: DOM structure may change, class name, element nesting, it is difficult to uniquely locate
  • Meituan implementation plan
    70% full burying point + 30% manual burying point
In different scenarios, we need to choose different buried point schemes. For example, for simple user behavior events, full buried point can be used to solve them; However, for the need to carry a large number of business fields that can only be known by runtime, it needs to be solved by declarative buried points. On a higher level

reflection

Front end routing
The front-end route passes through the ‘#’ anchor, which was originally added to the URL to indicate the location of the web page. Although hash appears in the URL, it will not be included in the HTTP request. It is used to guide the action of the browser and is useless to the server. Therefore, changing the hash will not reload the page.
rewrite history.replaceState
 

Data upload mode

  • IMG tag upload
  • ajax
    • Bring cross domain problems

reference resources

  • Nuggets front end monitoring and front end buried point design
  • The principle of web embedded point
  • github – Front end data collection . js
  • Get the response time of each stage of the Web: server response time, home page white screen time, DOM rendering completion time, etc
    https://zhuanlan.zhihu.com/p/27659302
    http://taobaofed.org/blog/2016/04/01/lose-statistics/
    http://web.jobbole.com/94895/
    Front end buried point and rear end buried point
  • Meituan performance analysis framework and performance monitoring platform
  • JS buried point technology analysis mixpanel and Shence SDK analysis
Free and open source GitHub: https://github.com/kisslove/web-monitoring