Front-End Event Tracking (埋点) – Fundamentals, Types, and Best Practices

Preface

The following is the sixth article in our team's engineering series, introducing how to take responsibility for and complete front‑end performance optimization work, with a focus on event tracking (埋点).

What is Event Tracking (WHAT)

Event tracking, also known as "埋点" or "event tracking", refers to the technology and process of capturing, processing, and sending specific user behaviors or business processes for analysis.

It forms the foundation of product data analysis, supporting recommendation feedback, user behavior monitoring, new feature or operation effectiveness measurement, etc.

Front‑end event tracking records user actions on terminals (App/H5/PC) by inserting collection code that triggers on conditions such as page entry or button click, then uploads the data for downstream analysis.

Note: This article discusses only behavior tracking, not performance tracking.

Why Track Events (WHY)

Traffic monitoring (time‑space analysis, retention, conversion)

Build behavior paths for user segmentation, insight, and profiling

Analyze product effectiveness and future direction through data modeling

Provide data support for marketing strategy and channel conversion

Heat‑map analysis to evaluate page design

Implement A/B testing for continuous product optimization

When/Where to Track (WHO/WHEN/WHERE)

Various fictional scenarios illustrate the need for event tracking in product, design, and operation decisions.

Tracking Scenarios

mindmap
      埋点场景
          产品
            用户日活/留存/转化
            核心转化流程分析
            新功能效果验证
            产品问题洞察
            用户路径追踪
          运营
            用户日活/留存/转化
            营销活动ROI评估
            用户行为分析、用户画像
          设计
            交互效果评估
          研发
            人力等资源ROI评估
            智能推荐
            场景化提示
          老板
            市场分析
            资源投入

How to Track (HOW)

Tracking Types

Tracking can be divided into front‑end (client) and back‑end (server) tracking; this article focuses on front‑end tracking.

Back‑end tracking:

Front‑end tracking:

Code Tracking

Full Tracking

Visual Tracking

Definition

Define specific data points manually in code.

SDK captures all events automatically; data is filtered later.

Visually select elements on the page to generate tracking configuration.

Principle

Manual code insertion after defining events.

SDK records as many events as possible for later consumption.

Separate code from configuration; UI generates config, which is fetched and applied at runtime.

Workload

Introduce SDK and add code per requirement.

Just introduce SDK.

Introduce SDK; use visual tool to select modules.

Advantages

Focused data, low transmission/storage cost, customizable.

Low development effort, complete data chain, discover unused features.

Low effort, decouples from development, product/operation can configure without releases.

Disadvantages

Requires definition, development, verification; tied to releases.

Less detail per event, higher transmission/storage cost, no custom events.

Breaks when page structure changes; adding custom events is difficult.

Applicable Scenarios

Complex tracking needs with custom business logic.

Variable business but lightweight analysis needs.

Many pages with relatively stable structure, enumerated analysis scenarios.

From workload perspective: Code Tracking > Visual Tracking > Full Tracking.

From accuracy perspective: Code Tracking > Visual Tracking > Full Tracking.

Tracking Model

A complete model typically contains five elements of user behavior, enabling detailed analysis of who, where, when, what, and how.

Model Events

APP Launch (AL)

APP Hide (AH)

APP Show (AS)

APP Quit (AQ)

Page View (PV)

Page Quit (PQ)

Module Exposure (MV)

Module Click (MC)

Model Attributes

User Attributes user_id // User ID user_name // User name uid // Application unique ID

Time Attributes event_time // Timestamp of the event time_zone // Time zone

Network Attributes ip // IP address network_type // Network type carrier // Carrier type

Device Attributes device_type // Device type device_id // Device ID os_type // OS type os_version // OS version user_agent // User agent string

Geographic Attributes country // Country city // City

Application Base Attributes app_version // Application version app_id // Application ID app_name // Application name env // Environment source // Source

Reporting Methods

When a tracked event is captured, reporting typically involves three steps: data enrichment, queuing (batch vs. single, real‑time vs. delayed), and network transmission.

Data Queue Processing

Single real‑time reporting is default; when volume grows, batch and delayed reporting are introduced to avoid blocking business logic.

Optimized processing aggregates multiple events and delays transmission until the page is idle.

Network Request Methods

XHR

Image Object

Beacon API

Principle

Send data via AJAX.

Use an image src (usually a 1×1 transparent GIF) to send data.

Use Beacon API to send data, ensuring requests survive page unload.

Advantages

Custom headers, large POST payloads.

No cross‑origin issues, non‑blocking, fast.

Requests are not aborted on page unload.

Disadvantages

GET requests expose data in URL, length limits, security concerns.

URL size limits, same security concerns.

Only POST, payload size limited by browser, compatibility issues.

In practice, a hybrid approach is used: prefer Beacon, fall back to Image, and finally XHR for large payloads.

Tracking Iteration (Code Tracking)

Roles and Responsibilities per Phase

Phase

Task

Role

Responsibility

Key Deliverable

Requirement

Tracking requirement output

PM/Operation

Define metrics, goals, and produce requirement doc

Tracking requirement doc

Tracking review

All

Participate in review and provide conclusions

Review conclusion

Design

Tracking design

DA

Design concrete tracking items and logic, produce design doc

Design doc

Development

Tracking implementation

FE/RD

Develop tracking logic according to design and self‑test

Code

Testing & Acceptance

Tracking testing

QA

Validate tracking completeness, correctness, and generate test report

Test report

Tracking acceptance

DA

Verify test report against design rules, produce acceptance conclusion

Acceptance conclusion

Release

Launch

All

Deploy code and perform online verification

Online verification

Analysis

Data analysis & conclusions

PM/Operation/DA

After running for a period, pull data, analyze against goals, and produce conclusions

Analysis conclusion

Tracking Tips (TIPS)

Data Security

Sensitive information in tracking data should be masked or encrypted during transmission and consumption.

Internationalized services may need additional storage considerations.

Access to tracking data must be tightly controlled with proper authorization and monitoring.

Tracking Accuracy

Module exposure should be defined as: element intersecting viewport with at least 1px overlap and staying for a minimum duration.

Incorrect placement of PV (page view) tracking code or asynchronous logic can cause other events to be reported before PV.

Duplicate exposure and refresh mechanisms need careful handling to avoid over‑reporting.

Impact on Business Logic

Since JavaScript runs on a single thread, tracking code should be placed after business logic and wrapped in a try catch block to minimize performance impact.

Summary

The theoretical part introduced what tracking is, why it matters, when it is needed, and how to implement it. It also highlighted practical considerations such as security, accuracy, and avoiding blocking business logic.

Data analysis is essential for understanding product performance; reliable tracking provides the raw data needed for insightful analysis and optimization.

As teams recognize the value of tracking, it becomes a standard practice for solving contentious product questions and guiding future development.

Reference

[1]

https://juejin.cn/post/7311596602249134106

[2]

https://juejin.cn/post/7314493192187265074

[3]

https://juejin.cn/post/7315231440777707558

[4]

https://juejin.cn/post/7316723621292638246

[5]

https://juejin.cn/post/7319312761073958975