preface

Recently, I received a task to bury the front-end project in the group and report THE PV data to other projects. There were some detours in the middle because I had never touched the front buried point before, but in the end it was finished smoothly. The whole process down, the front buried point also had a little simple thinking.

What is the front buried point

The front-end buried point is a way to achieve front-end data monitoring. Through the front-end buried point, we can obtain and track the user’s use of the product, and analyze the reported data in the background, so as to optimize and improve the product and achieve better benefits.

Buried point

There are several ways to bury the point:

  1. All buried point
  2. Visual burial point
  3. Manual buried point

In the work, the author uses manual burial point, that is, to add data report processing in the business code that needs to be buried.

How to report accurately

How to report accurately? Points to note are as follows:

Clear reporting rules

  1. For multi-product differentiation, the corresponding channel number or product number should be agreed as the unique identification in advance to facilitate the background to distinguish the reported data.
  2. Production and test environments are distinguished by field identification.
ReportConfig.upload({
   CHANNEL_ID: 1.// Channel id. 0 indicates XXX and 1 indicates XXX
   ENVIRONMENT: 0   // Environment identification, 0 is the test environment, 1 is the official environment
});
Copy the code

Align reporting caliber

It is easy to understand to align and report caliber, namely to confirm What, When and How. Where, when and how in the product.

PS: The early caliber alignment is more critical, because the reporting logic is mashed in the project engineering code, so it is very important to confirm clearly.

Pay attention to the point

Code compatibility handling

Use ES5 syntax as much as possible, such as template strings and let keywords in ES6. Do not use them.

The author at the burial site also meet this problem, as a web page in WeChat browser to access, report the data problem report (logic using the template string) in the ES6 grammar, the last problem orientation is WeChat browser kernel is X5 kernel, does not support ES6 syntax, led to the mobile WeChat end data reported problems when accessing a web page.

Report the timing

In the project, the author reported when the user entered the page or switched the module to report.

The old project

In older projects, implemented in things like jQuery, this is usually added in the onLoad event of the page.

window.onload = function() {
    ReportConfig.upload({
       CHANNEL_ID: 1.// Channel id. 0 indicates XXX and 1 indicates XXX
       ENVIRONMENT: 0   // Environment identification, 0 is the test environment, 1 is the official environment
       url: document.documentURL
    });
}
Copy the code

The onLoad event is reported for a reason, because the referenced JS SDK is loaded asynchronously, and the onLoad event is triggered only after all the resources on the page (such as JS and CSS) have been loaded. In this case, errors such as null references are not reported. This is a reasonable time.

The new project

In single-page applications developed using Vue, modules usually switch to different routes, so we can add route guard hooks in either beforeEach or afterEach.

router.afterEach((to, from) = > {
  ReportConfig.upload({
    CHANNEL_ID: 1.// Channel id. 0 indicates XXX and 1 indicates XXX
    ENVIRONMENT: 0   // Environment identification, 0 is the test environment, 1 is the official environment
    url: `http://xxxxx#{to.path}`
  });
});
Copy the code

Different JS SDKS are loaded according to the protocol

Manual load processing

The same web page will be accessed through different domain names, and there will be inconsistency between different domain name protocols. We need to load the corresponding JS dynamically according to different protocols.

<script type="text/javascript" id="report_script_tag"></script>
<script>
    report_script_tag.src = window.location.protocol.indexOf('https'= = = -1)?"http://xxxxx.js" : "https://xxxx.js";
</script>
Copy the code

Window.location. protocol Indicates the protocol used by the current URL.

Use relative protocol processing

<script type="text/javascript" src="//xxxx.js"></script>
Copy the code

Relative protocol is to remove the URL protocol (HTTP, HTTPS), only retain // and the content behind. Use HTTPS protocol website, when the request to use the relative protocol file, will automatically fill the HTTPS prefix, so, can correctly load the corresponding JS file.

reference

  • Front-end monitoring and front-end burial point
  • Data Buried Point Analysis System for Front-end Engineering Practice (I)