Building a Declarative, Component‑Based Tracking System with Buffer Queues in React

Introduction

Front‑end tracking (埋点) is a method of collecting product usage data to support analysis and product iteration. Business Intelligence (BI) teams rely on these data for decision‑making.

Background

With diminishing traffic bonuses, precise data collection and analysis become crucial. The team identified three main pain points:

Manual concatenation of BI‑required fields is time‑consuming and error‑prone.

Exposure tracking in pagination or virtual lists is cumbersome.

Tracking logic is tightly coupled with business code, making reuse difficult.

The goal is a simple, fast tracking solution that does not burden developers.

Common Front‑End Tracking Solutions

Three typical approaches were evaluated:

Manual code tracking : Accurate and customizable but tightly coupled with business logic.

Visual tracking tools (e.g., Mixpanel): Configurable without generating massive useless data, yet hard to pass runtime parameters and fragile to DOM changes.

Full (no‑code) tracking : Captures all events automatically, but produces large volumes of irrelevant data.

Proposed Solution: Declarative Component‑Based Tracking + Buffer Queue

Based on the team’s React stack and product requirements, a hybrid solution was designed:

Separate click and exposure tracking into two declarative components.

Introduce a buffer queue to batch reports, reducing API calls on rapid interactions.

Standardize BI fields (e.g., _mspm2) within the library to avoid manual concatenation.

Automatically register page‑level exposure events during library initialization.

Manage tracking configuration at the page level for easier migration.

Key Implementation Details

5.1 Process Flow

Points generated before the library is fully initialized (especially exposure points) are temporarily stored in a secondary queue and processed after initialization.

Flow diagram: