Design and Implementation of a Universal Frontend Event Tracking Solution

The article introduces a generic front‑end event‑tracking (埋点) scheme that has been applied in Baidu Takeaway’s sales CRM platform. It starts with the background: the PC side of the sales CRM lacked any user‑behavior data collection, which hindered analysis, product strategy, and monitoring.

More than 100 tracking points were identified across multiple subsystems (智子, 任务制, HES, 商机, etc.). The back‑end tracking uses a DA‑based SAK solution, while the front‑end consists of legacy jQuery + widget implementations and newer Vue‑based stacks.

The article reviews three mainstream tracking approaches: code‑based tracking (manual API calls), visual (no‑code) tracking tools, and automatic (无埋点) tracking. Due to tight schedules and limited manpower, only code‑based tracking was feasible.

Code‑based tracking can be imperative or declarative. An example of imperative tracking is shown:

// page load tracking
$(document).ready(function(){
  // business logic ...
  sendRequest(params);
});

// button click tracking
$('button').click(function(){
  // business logic ...
  sendRequest(params);
});

This style quickly intertwines tracking code with business logic, making the codebase bulky and error‑prone. To decouple, a declarative method is proposed, where tracking metadata is declared directly on DOM nodes.

Declarative tracking uses a data-stat attribute, e.g.:

<button data-stat="{key:'111', act:'click'}">Track</button>

The system scans for elements with data-stat , binds the appropriate event, and sends the data, keeping business code clean.

To support both Vue and legacy jQuery projects, a Vue custom directive v-stat is created. The directive defines bind , update , and unbind hooks:

Vue.directive('stat', {
  bind: function(){ /* preparation */ },
  update: function(newValue, oldValue){ /* handle value change, send request */ },
  unbind: function(){ /* cleanup */ }
});

In pure Vue applications, the directive automatically reacts to data changes, eliminating the need for manual DOM traversal. For non‑Vue pages, a mixin that wraps MutationObserver is provided to detect DOM mutations (child list, attribute changes, subtree) and re‑compile the Vue instance, ensuring newly inserted elements with v-stat are processed.

Key tracking behaviors are handled:

Ready (page‑show) tracking: The first update call signals the element is ready, triggering a request.

Click tracking: A click listener is attached in bind and removed in unbind .

Show (visibility) tracking: Initially attempted via MutationObserver on style , but switched to the open‑source VisSense library for reliable visibility detection.

Collect (eye‑tracking) tracking: Mentioned but omitted as out of scope.

For edge cases where DOM manipulation is outside developer control (e.g., Baidu Map API inserting POI markers), the directive also exposes a programmatic sendStat method, allowing explicit imperative tracking.

Usage guidelines:

In Vue projects, simply register the directive and add v-stat attributes to target elements.

In non‑Vue projects, import the observerMixin and initialize a Vue instance with the mixin and the directive.

Example markup:

<div id="app" v-stat="{'act':'ready','key':'samplepg'}"></div>
<button v-stat="{'act':'click','key':'samplebtn'}">Click</button>
<div id="container" v-stat="{'act':'show','key':'samplepn'}"></div>

The solution has been smoothly adopted across both Vue and legacy jQuery codebases, decoupling tracking from business logic and supporting over a hundred tracking points with minimal overhead. In production, the system can be toggled between debug (console logging) and real request modes based on environment.

In conclusion, the front‑end data collection and reporting mechanism is crucial for building a data platform. The presented declarative tracking approach, backed by Vue directives, MutationObserver mixins, and fallback imperative APIs, meets the large‑scale tracking needs of Baidu Takeaway’s commercial platform and has received positive feedback from front‑end engineers.