Comprehensive Guide to Event Tracking (埋点): Concepts, Implementation, and Data Consumption

Event Tracking (埋点) Overview

Event tracking is a data‑collection technique used to monitor user actions such as clicks and page views in web or mobile applications, enabling behavior analysis, A/B testing, error monitoring, and informed product decisions.

Basic Concepts

Monitoring Types : data monitoring (user actions, business metrics), performance monitoring (page load, render times), exception monitoring (JS errors, request failures).

Reporting Lifecycle : from event definition to data consumption.

Data Monitoring

Collects user behavior and business data to help product managers and operators analyze usage patterns and optimize decisions. Examples include button clicks, page navigation paths, search keywords, and stay time.

Performance Monitoring

Tracks page load time, First Paint (FP), First Contentful Paint (FCP), Largest Contentful Paint (LCP), JS initialization, and main API latency to guide performance optimization.

Exception Monitoring

Captures runtime JavaScript errors, failed API requests, and resource loading failures, providing real‑time alerts for rapid issue resolution.

Reporting Methods

Manual Reporting

Developers add explicit tracking calls in code, giving full control over event timing and payload.

button.addEventListener('click', () => {
    sendEvent('click_button', { userId: '12345', time: Date.now() });
});

window.addEventListener('load', () => {
    sendEvent('page_view', { page: 'homepage', time: Date.now() });
});

const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting && entry.intersectionRatio > 0.5) {
            sendEvent('component_exposure', { component: 'banner', time: Date.now() });
        }
    });
}, { threshold: [0.5] });
observer.observe(document.querySelector('#banner'));

Visual Reporting

Non‑technical users configure tracking via a UI; the system generates the underlying code automatically, reducing development effort but offering less flexibility for complex logic.

Automatic (No‑Code) Reporting

SDKs or plugins automatically capture interactions, network requests, and resource loads without manual instrumentation, lowering development cost at the expense of fine‑grained control.

Type‑Safe SDK with TypeScript

Using TypeScript to enforce event name and payload contracts prevents mismatched fields and improves data quality.

type LogParams = Record
;
export const sendEvent = (event: string, params?: LogParams) => {
  // upload event
};

export const sendEvent =
(
  event: T,
  params?: TrackInterfaces[T]
) => {
  // upload event
};

export interface TrackInterfaces {
  main_picture_click: MainPictureClick;
  page_view: PageView;
}
export type EventNames = "main_picture_click" | "page_view";
export interface PageView {
  appName: string;
  device_platform: string;
  enter_from: string;
  page_url: string;
  page_name: string;
}

Common parameters (e.g., device platform) can be extracted into a shared type and merged with event‑specific types.

type CommonParams = { device_platform: string; };
type trackParams
= Partial
& Omit
;
export const sendEvent =
(event: T, params?: trackParams
) => {
  // upload event
};

Testing Strategies

Unit tests with Jest or Mocha validate payload structures, while manual network inspection (browser dev tools, Charles) or platform‑provided dashboards verify that events are correctly reported.

Data Consumption

SQL queries illustrate how to extract key metrics such as PV/UV, event‑level counts, average durations, and 90th percentiles.

SELECT page_name, COUNT(DISTINCT user_id) AS UV, COUNT(*) AS PV
FROM page_view_events
WHERE date BETWEEN '2024-09-01' AND '2024-09-08'
GROUP BY page_name;

SELECT button_name, COUNT(*) AS PV
FROM events
WHERE event_name = 'click_button' AND button_name = 'submit'
GROUP BY button_name;

SELECT AVG(duration) AS avg_duration,
       PERCENTILE_CONT(0.9) WITHIN GROUP (ORDER BY duration) AS p90_duration
FROM purchase_events
WHERE event_name = 'purchase';

Funnel analysis combines multiple events (page_view → add_to_cart → purchase) to calculate conversion rates.

WITH conversion_data AS (
  SELECT user_id,
         MAX(CASE WHEN event_name = 'page_view' THEN 1 ELSE 0 END) AS viewed_product,
         MAX(CASE WHEN event_name = 'add_to_cart' THEN 1 ELSE 0 END) AS added_to_cart,
         MAX(CASE WHEN event_name = 'purchase' THEN 1 ELSE 0 END) AS purchased
  FROM user_events
  WHERE event_name IN ('page_view', 'add_to_cart', 'purchase')
  GROUP BY user_id
)
SELECT COUNT(*) AS total_users,
       SUM(CASE WHEN viewed_product = 1 THEN 1 ELSE 0 END) AS total_viewed_product,
       SUM(CASE WHEN viewed_product = 1 AND added_to_cart = 1 THEN 1 ELSE 0 END) AS total_added_to_cart,
       SUM(CASE WHEN viewed_product = 1 AND added_to_cart = 1 AND purchased = 1 THEN 1 ELSE 0 END) AS total_purchased,
       (SUM(CASE WHEN viewed_product = 1 AND added_to_cart = 1 THEN 1 ELSE 0 END) * 100.0) / SUM(CASE WHEN viewed_product = 1 THEN 1 ELSE 0 END) AS cart_conversion_rate,
       (SUM(CASE WHEN viewed_product = 1 AND added_to_cart = 1 AND purchased = 1 THEN 1 ELSE 0 END) * 100.0) / SUM(CASE WHEN viewed_product = 1 AND added_to_cart = 1 THEN 1 ELSE 0 END) AS purchase_conversion_rate
FROM conversion_data;

Conclusion

The guide provides a full‑stack view of event tracking—from conceptual foundations and SDK implementation to testing and data analysis—empowering developers to build reliable, low‑overhead instrumentation that drives data‑driven product improvements.