Several ways to report front-end buried points

Recommend a practical interview question bank to everyone

1. Front-end interview question bank (Essential for interviews) Recommended:

Address: Web front-end interview question bank

Introduction

In modern web applications, point reporting is an important means of data collection and analysis. This article will introduce several common ways to report front-end buried points, and elaborate on how to use these methods to report data in projects to help developers better collect and analyze data.

Reporting method

In the front-end, the common ways to report hidden points are as follows:

1. Image request (Image Beacon): Create an Image object, splice the data to be reported as a URL parameter into a 1×1 pixel transparent image URL, and send a GET request to trigger the report.

2. XMLHttpRequest or Fetch API: Use XMLHttpRequest or Fetch API to send asynchronous requests to report data. You can choose to use the GET or POST method and send the data as request body or URL parameters.

3. Navigator.sendBeacon(): The Navigator.sendBeacon() method allows asynchronously sending data when the page is unloaded. It is usually used for final data reporting when the page is closed to ensure that the data can be sent successfully.

4. WebSocket: Use the WebSocket protocol to establish a persistent connection with the server, and send messages to report real-time buried data.

5. Third-party statistical tools: Use the JavaScript SDK provided by third-party statistical tools (such as Google Analytics, Baidu Statistics, etc.) to bury points and report data.

6. Custom interface: Based on business needs, design and develop your own interface to receive and process buried data, and send data to the custom interface for reporting through Ajax and other methods. Each method has its applicable scenarios and characteristics. Choosing an appropriate hidden point reporting method depends on factors such as specific needs, performance requirements, real-time requirements, and impact on user experience.

1. Image request

Advantages:

  • It is simple to use, has good compatibility, and can be reported across domains.
  • Will not block page loading and closing.

Disadvantages:

  • Only GET requests can be sent, and response results cannot be obtained.
  • Asynchronous operations are not supported.

By creating an Image object, the data to be reported is spliced into a 1×1 pixel transparent image URL as a URL parameter, and a GET request is sent to trigger the reporting.

const data = { event: 'click', element: 'button' };
const url = `https://example.com/track?data= ${encodeURIComponent(JSON.stringify(data))}`;
const img = new Image();
img.src = url;

2. XMLHttpRequest or Fetch API

Advantages:

  • Asynchronous requests can be sent and multiple HTTP methods such as GET and POST are supported.
  • The response results can be obtained and further processed.

Disadvantages:

  • The logic of request and response needs to be handled manually.
  • Need to handle cross-domain request issues (such as setting up CORS).

Use XMLHttpRequest or Fetch API to send asynchronous requests to report data. You can choose to use the GET or POST method and send the data as request body or URL parameters.

const data = { event: 'click', element: 'button' };

//Use XMLHttpRequest
const xhr = new XMLHttpRequest();
xhr.open('POST', ' https://example.com/track ');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify(data));

//Use Fetch API
fetch(' https://example.com/track ', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(data)
});

3. Navigator.sendBeacon()

Advantages:

  • Reliably sends data when the page is unloaded, without blocking the page from closing.
  • Support sending data in the background.

Disadvantages:

  • Only POST requests can be sent, and response results cannot be obtained.

The Navigator.sendBeacon() method allows sending data asynchronously when the page is unloaded. It is usually used for final data reporting when the page is closed to ensure that the data can be sent successfully.

const data = { event: 'unload', page: 'home' };
const url = ' https://example.com/track ';
navigator.sendBeacon(url, JSON.stringify(data));

4. WebSocket

Advantages:

  • Good real-time performance and supports two-way communication.
  • Suitable for real-time monitoring and large-scale data reporting.

Disadvantages:

  • The server needs to support the WebSocket protocol.
  • More complex and not suitable for simple buried point requirements.

Use the WebSocket protocol to establish a persistent connection with the server and send messages to report real-time hidden data.

const socket = new WebSocket('wss://example.com/track');
socket.onopen = () => {
  const data = { event: 'click', element: 'button' };
  socket.send(JSON.stringify(data));
};

5. Third-party statistical tools

Advantages:

  • Provides complete statistical functions and analysis reports.
  • Has high stability and reliability.

Disadvantages:

  • You need to rely on third-party services, which may be subject to restrictions by the service provider.
  • The usage specifications and privacy policies of third-party statistical tools need to be followed.
How to use
  • Registration and configuration: First, you need to register and get an account, then add the corresponding tracking code to your website or app. Typically, this involves adding a piece of JavaScript code to the header or footer of each page.
  • Tracking configuration: According to the documents and guidelines provided by Baidu Statistics, you can configure the events, page views, custom variables, etc. that need to be tracked. This usually involves adding specific snippets of code on specific events or pages.
  • Data analysis: By logging in to the Baidu Statistics console, you can view collected data, generate reports, analyze user behavior, etc.

6. Custom interface

Advantages:

  • It can be flexibly customized and expanded according to specific needs and business logic.
  • Have complete control over how your data is processed and stored.

Disadvantages:

  • Requires additional development and maintenance of custom interfaces.
  • Issues such as security, performance and scalability need to be considered.
How to use
  • Interface design: Based on business needs, design and develop a custom interface for receiving and processing embedded data. This can be a backend API interface and can be implemented using any backend technology stack.
  • Data reporting: In the front-end code, send buried data to the URL of the custom interface by sending an asynchronous request (such as XMLHttpRequest or Fetch API).
  • Data processing: In the custom interface, the received data is processed, stored or further analyzed according to business logic.

Summary

According to the specific needs and project conditions, it is very important to choose a suitable reporting method. For simple buried needs, image request or XMLHttpRequest/Fetch API may be a simpler and commonly used choice. For situations where real-time requirements are high or custom functions are required, WebSocket or a custom interface may be more suitable. Third-party statistical tools provide complete statistical functions and analysis reports, but they need to rely on third-party services.

In actual projects, various factors can be comprehensively considered according to needs to select the appropriate buried point reporting method. At the same time, various methods can be used to report hidden points according to specific circumstances to meet different needs.

Recommend a practical interview question bank to everyone

1. Front-end interview question bank (Essential for interviews) Recommended:

Address: Web front-end interview question bank