Event Collector: A Markup‑Based Web Event Tracking Solution

This article, presented by the Feiyu Frontend team, introduces Event Collector, a markup‑based event tracking solution for web environments designed to improve tracking development efficiency and the experience of using tracking data.

Readers will learn the differences between markup tracking and imperative tracking, the new experience brought by the accompanying browser extension, and an overview of Event Collector's technical implementation.

In many products, recording user interactions—known as behavior tracking—is essential for analysis and product improvement. Traditionally, this is done imperatively by listening to events and calling a reporting function in callbacks.

As behavior‑tracking requirements grew, the imperative approach produced redundant code and harmed readability, prompting the team to leverage event bubbling and devise the Event Collector markup tracking scheme.

Markup tracking embeds tracking information directly on interactive elements using custom attributes; a global listener then collects and reports the pre‑marked data after the interaction. Compared with imperative tracking, markup tracking consolidates listening, collection, and reporting, reducing code redundancy and making the tracking logic easier to read and understand.

Event Collector provides two markup methods: (1) using HTML attributes prefixed with data‑log‑, and (2) using dedicated React components. Both support click, hover, and display events and each offers unique features while satisfying basic markup‑tracking needs.

The solution includes a browser extension, Event Collector Kits, which visually highlights marked elements on a page, helping developers quickly identify existing tracking points and verify that no tracking requirements are missed, all without modifying business code.

Event Collector Kits also integrates with the company’s internal analytics platform, allowing both developers and product managers to swiftly create analysis dashboards for the marked events.

These capabilities rely on Injected Hooks injected into the page, inspired by React Developer Tools but with a stable API and type declarations ( @event-collector/devtools). This design lets any web application use the hooks independently of the full Event Collector SDK.

To ensure maintainability, Event Collector is organized as a monorepo: publishable packages reside in a packages directory, while non‑publishable applications live in apps. The release workflow uses protected branches (e.g., v0.4.7), merge requests, changelog updates, automatic Git tag creation, CI pipelines for npm publishing, and documentation site deployment.

The browser extension itself is built with React. The team follows a convention inspired by Angular: the index.tsx file contains only JSX, while a sibling model.ts file holds component state, event callbacks, and side‑effects, as illustrated in the included diagrams.