preface

I have been in the industry for several years, and I have always been away from small and medium-sized projects. Due to the small number of project users, I am very unfamiliar with front-end monitoring. Recently, I began to receive projects with large flow, but I know nothing about burying point and monitoring.

What is a burial point?

Baidu’s original words: buried point analysis, is a commonly used data collection method for website analysis

In fact, popular front-end buried point is mainly for operation and developers to collect user behavior data, as well as page performance and other numbers for subsequent data analysis, take some examples: for example, get the loading time of the page in a variety of networks, and then get the user’s stay time in a page!

What is the purpose of the burial site?

S in the current user is god, the Internet era of competition is so big, targeted to each user preferences customize different content, according to the user preferences to determine product iteration direction has become the Internet companies have to focus on to do, so buried point became a means of access to information is indispensable. So what’s the point of burying them? What do you need to get?

Performance monitoring

In small projects, the number of users is small, so people feel ok, but when the number of users surge, performance monitoring becomes very important, because you can know some potential problems and bugs, and you can quickly iterate, get a better user experience! In general, we need to pay attention to the following points during performance monitoring:

  • 1. Blank screen duration
  • 2. HTTP request times for important pages
  • 3. Render times for important pages
  • 4. First screen loading time

One might ask, isn’t this white screen time the same thing as the first screen load time? Bad time here actually refers to the page from the request to achieve rendering conditions, onset of UI framework (test here is that the request to the DNS domain finished, return to the page frame of time) and is the first screen loading time all dynamic content page loaded time, including ajax data after rendering to the time of the page

Data monitoring

The so-called data monitoring is to get the user’s behavior, we also need to pay attention to the following points:

  • 1, PV access volume (Page View)
  • 2. Unique Visitor
  • 3. Record the operating system and browser
  • 4. Record the time the user stays on the page
  • 5. Go to the source page of the current page (i.e. the transformation from where it came in)

How is buried point

After knowing the role of buried point, we will see how to bury, in order to achieve the effect, in fact, buried point also have a lot of attention, next anatomy!

Manual buried point

Manual burying point is also called code burying point, his essence is to use JS code to get some basic information, and then return to the server in some specific locations, such as:

Performance

DNS resolution time, TCP connection setup time, home screen time, DOM rendering time, page load time, etc.

// Get Performance and initialize some parameterslettiming = performance.timing, start = timing.navigationStart, dnsTime = 0, tcpTime = 0, firstPaintTime = 0, domRenderTime = 0, loadTime = 0; DnsTime = timing. DomainLookupEnd - timing. DomainLookupStart; tcpTime = timing.connectEnd - timing.connectStart; firstPaintTime = timing.responseStart - start; domRenderTime = timing.domContentLoadedEventEnd - start; loadTime = timing.loadEventEnd - start; console.log(DNS resolution time:, dnsTime, 
            '\nTCP setup time :', tcpTime, 
            '\n First screen time :', firstPaintTime,
            '\ nDOM render completion time :', domRenderTime, 
            '\n page onload time :', loadTime);
Copy the code

After we get the data, we can submit it again or submit the buried content by way of pictures

$(document).ready(function() {/ /... There is some business logic sendRequest(Params); }); // Button click to send buried request $('button').click(function(){// There is some business logic here sendRequest(params); }); // Prevent cross-domain by passing it to the backend disguised as an Image objectlet img = new Image(1, 1);
    let src = `http://aaaaa/api/test.jpg?args=${encodeURIComponent(args)}`; img.src = src; Link :active::after{content: url("http://www.example.com?action=yourdata");
}
<a class="link"<button data-mydata= <button data-mydata= <button data-mydata="{key:'uber_comt_share_ck', act: 'click',msg:{}}"A taxi > < / button >Copy the code

Although this buried way can accurately monitor the user’s behavior, and web performance data, but you will find that it is very cumbersome, need a lot of work, of course, this part of the work has been done for us, such as Friends, Baidu statistics to us actually provide services. We can follow their process and use manual burials

Visual burial point

This embedding scheme, also known as traceless embedding, liberates the front-end manual operation of the workload, in fact, the essence is to use the system to insert the original need to manually insert the embedding, this embedding method because of its own technical barriers, so the developers do not have to consider the basic basic, money can be more reliable service providers, foreign Mixpanel, Early support for visualization buried points in China are TalkingData, Zhuge IO, Tencent MTA and so on

No burial site

No burying point is not the absence of any burying point, which simply does not require engineers to insert intrusive code into the business code. Only need to simply load a defined SDK code, the technical threshold is lower, the use and deployment is simple, avoid the need to change, buried points caused by errors. This is also the choice of most websites, because it is too simple let’s take a look at Baidu buried point long:

<script> var _hmt = _hmt || [] ; (function() {
        var hm = document.createElement('script')
        hm.src =
          'https://hm.baidu.com/hm.js?<%= htmlWebpackPlugin.options.baiduCode %>'
        var s = document.getElementsByTagName('script')[0]
        s.parentNode.insertBefore(hm, s)
      })()
    </script>
Copy the code

The code above is inserted into our HTML

conclusion

As a beginner, no actual combat experience, in addition to the use of Baidu no buried point scheme, other did not involve, the above content is just, on the shoulders of giants repeat summary, and without their own thinking and insights, such as late combat, set to modify!

This recommendation of a boss summary, income bandit shallow, because the buried point really need personal practice to know its charm, in the end it is difficult to be elegant, not to the boss’s experience copy over, attached to the boss link, if interested in in-depth understanding, please move:

All that front end stuff